AMAX Customer Portal: Improving the existing portal to have a comprehensive Dashboard for users to gain insights into their products, orders, and shipping information.

The Problem

The customer portal is the main web page for which AMAX's customers get their inventory, order, and shipment info on a daily basis. Customers lack a space where they can easily find and access timely information resulting in unnecessary additional back and forth emailing and meetings. New and potential customers might be driven away due to the outdated look of the inability to find the information that they are looking for.

The Solution

A portal for customers to have a comprehensive overview of their ordered materials through data graphs and reports. Users are able to check in on the status and shipping information of materials and parts of their products that they have ordered. The portal also displays inventory information for customers to know how many units are available and what they can order. Adding these features promote AMAX's service as the global leader in application-tailored cloud, data center, and open architecture platforms.
Role
UX/UI Designer
team
Shareen Chang
Jeffrey Zhou
Levin Zhou
Jennifer Xu

USER RESEARCH

Interviews with Program Managers

I talked to 4 program mangers, each managing between OEM and Enterprise customers. Although these customer have very different order habits and relation with the company. We felt that it is important to collect the needs from both types of customers so that this portal can be for everybody.

Here are the main insights:

1. Although portal is functional, the portal feels outdated and many users feel that there are better software out there. We want to show potential customers what our process entails to attract new customers.

2. Customers currently use the site mainly for inventory and shipping. They DO NOT use the WIP and production aspect of the portal because it does not give them the information they need.

3. "Since customers can't find the info they want, our team has to do the work of compiling all the data and information and sending it back to the customers through email."

4. "There seems to be a disconnect between what AMAX wants to show the customers vs. what they customers actually see. We need to figure out what AMAX wants to show the customer on the portal."

From these results, we can conclude that some aspects of the portal and information displayed in the system are not good data representations of what the customers need. Many existing tabs are not used but AMAX still get lots of request for specific reports that pertain to them. So how can we show thorough data while still being able to juggle with customer's specific requests.

Wireframes

We created simple wireframes at the beginning of the project to focus on the site's workflow, without the additional complication of refining its visual detail.

Low Fidelity Wireframes for the customer portal

Documentation for Developers

The specs for this project

High Fidelity

KEY FEATURES

Quick Info Cards

A section in the dashboard called quick info cards that provide concise timely information about customer's orders.

These quick info card deck appearing on the top of the page gives the user a comprehensive overview of information from each category. If more information is wanted, users are able to click the cards and they will be take to a screen with detailed information. This serves as fast and digestible information display for customers to view.

Data Graphs

Line Graph displaying fake data of a customer

The line graphs our the order statistics by quarter. Users are able to see a general overview of "Closed Orders", "Open Orders", and "RMA". Additionally, users are able to hover over the graph to get detailed changed rate information to draw conclusions on the data presented.

ECO Progress Bar

Shows an over view of ECO process

The Progress Bar's status presented in clear bright colors and different logos provide the user a clear and easily trackable Engineering Change Request. This design was inspired by lots of delivery package interfaces how easy or difficult is it for users to track their purchase online or get notified of a change in status.

TAKEAWAYS

Successes

I was able to do the entire UX process from user research, and prototyping to high-fidelity wire-framing. Although our team could not speak directly to the customers, I was able to speak regularly with the Program Managers and Sales team to understand how their customers were interacting and feeling about the new dashboard. This allowed me to understand the wants and needs of different big and small customers of AMAX and how we can plan to add to the portal in later iterations.

Struggles

One of the hurdles I had to deal with was documenting my handoffs to developers to ensure it is clear and understandable. Through the documentation process, I was actually able to go back and improve my existing components to have the design-to-code transition a smoother process. Learning more about writing documentation and specifications for developers to easily execute the design while leaving room open for change and improvement was an eye-opening experience for me.

What's Next?

After deploying, I am planning on learning more about customization of the portal to serve each individual customer their wants while not overwhelming our team in creating a “new” report or feature every time a customer has requested. I’ll update and maintain the components from the user's feedback and inputs. As the portal continues to grow, it's important to identify patterns so that we can contribute and add to the database and have a clear record and priority of customers' needs.

Thanks for coming by !
Got any questions? Or just wanna chat? Connect with me through email or LinkedIn!
If you were wondering, sorry my Tik Tok account is a secret :)
EmailLinkedin