It’s expensive for small online retailers to send parcels, as their quantities are not high enough to receive discounted rates. They constantly need to send and receive samples to/from their Chinese factories and US partners. It’s a huge financial burden for them.
Create an online platform that allows online retailers in the US to:
*I worked on many aspects of this project, but in this case study I will focus on processes and UI related to the main goals, which is shipping and saving money.
I created 2 personas based on the customer insights provided. It’s difficult to please both rookie users (working mom) and pro users (startup founder). Rookies need a lot of help and assistance. Pro users are annoyed by these unnecessary help windows, as they add extra steps and slow down the process.
Movley’s provided wireframe did not have a top or side navigation. It was unclear how to access other features from the home page. I therefore decided to streamline the information architecture first before I start updating the UI.
I did a virtual card sort with other team members via Mural.co to improve the navigation and information architecture. We logically grouped similar functions together and placed them in locations that we thought were the most intuitive.
I used Whimsical to create task flows. I held meetings with other team members to streamline and improve the user experience for each flow. Below are task flows that are related to shipping and shipment tracking.
Movley’s provided wireframe did not have a top nor side navigation. It was unclear how to access other features from the home page. Below are a few key updates I made to the wireframe.
I used results from the card sort to create a side menu and top menu. I eliminated the map because it's distracting and not important. The most important information users need to see is the shipments they created, what they are, where they are, and when they will arrive.
The old shipment wireframe does not have a previous, next, or cancel button. It was unclear how to proceed or go back. The long form is also hard for users to take in all at once. I broke down the form into smaller steps and greyed out other sections to minimize cognitive load and create a clear focal point.
I built a high fidelity prototype with Figma and did a round of user testing. Two major problems I discovered are:
The most noticeable improvement is the addition of top and side navigation. Creating a new shipment is also simpler and more intuitive. Help menus are hidden inside the hint text next to the item, which is easily accessible and doesn't slow down pro users at the same time.
Dashboard gives the user an overview of upcoming and recently delivered shipments. There are two dropdown menus for them to select filters to narrow the search and sort shipments for easy viewing. Users can click on a specific shipment to see more details of that package.
This is the hero feature of this app. I tried to break up long forms into smaller steps to minimize cognitive load. Help windows are hidden inside the hint text so they wouldn't slow down pro users. I also added a summary page at the end to make the task feel more complete.
In the billing section, I decided to show users how much they are saving with this app in big numerals. This is my strategy to make users appreciate this app more and increase retention rate.
The final result was well received by the CEO and Movley’s upper management. I learned a lot about the aesthetic requirements of B2B software. I also learned how to frame and simplify a complicated problem. My greatest contribution is improving the app's navigation and coming up with a solution that can satisfy both pro users and rookie users. I am also proud of the style guide and UI pattern library I created in Figma for the company .
Onboard tutorials and pop-up help windows still need to be designed. I briefed new interns during my exit meeting on how to proceed. Some features I proposed will be released in later editions. Below is the feature release schedule of this app.
