OVERVIEW
SimplePart is a software company that works with Fortune 500 automotive groups such as Toyota, Volkswagen, Nissan, BMW, and Subaru to sell car parts, accessories, and services online. As a member of the design team, I work to fulfill requests from these Fortune 500 companies, as well as creating designs that streamline the user experience for our clients, and their customers.

This case study is based on my redesign/consolidation of the Order Details and Recent Orders pages of SimplePart’s internal order management system, the “Control Panel”, which is used by all of our clients. Order Details and Recent Orders are the top 2 most visited pages of the “Control Panel”, with 62,000 and 52,000 weekly visits respectively.

The previous design was inefficient in how it displays information and did not have an intuitive user flow. Users had to take extra steps to fulfill their objectives, especially because the Order Details page and Recent Orders pages were separated from each other. My redesign consolidates the two pages and organizes information to be more easily accessesd, scanned, and utilized based on user research.
ROLE
Jr. UI/UX Designer
PROJECT TIMELINE
3 Months
TEAMMATES
Denny Kim, Jonathon D'Amato, Peter Quinn
DELIVERABLES
Recent Orders and Order Details redesign
The Problem –
Order management is crucial to the workflow of SimplePart users, but the old designs are confusing and force users into an inefficient process. How do we change that?
The old Recent Orders attempts to maximize the information shown, and be a one stop shop for CTAs. It fails at both.

Information is not displayed in an intuitive manner, and is thrown together just so it all fits. The goal is to help the user see and do as much as possible from this screen (without having to leave this page to view an order’s details page).

An important part of the user workflow, however, is to confirm information in the Order Details page and proceed to the next CTA. In order to accomplish this in the current design, a user has to click show more, revealing a few more details, and then click on an order details button that takes them to the Order Details page. This process involves an unnecessary amount of effort to find critical and relevant information.

The cacophony of colors also makes it difficult for users to process their next step / focus on finding a particular CTA.
The Order Details page is where users zero in on a specific order and perform the next steps in their workflow. Due to the unintuitive layout, this can’t be done efficiently.

Different categories of details are separated into tabs, which can take a long time to load. These tabs also include CTAs that are necessary to the workflow, meaning users often have to backtrack to accomplish their goals. The result is a lot of wasted timing clicking back and forth between screens. 


Important notifications like fraud alerts are constantly on display at the top of the page, pushing the rest of the screen down.
The Solution –
Combine Recent Orders and Order Details into a sleek, more intuitive design that keeps key information on the surface.
My redesign places Recent Orders in a side bar on the left, with the ability to scroll through Order Details on the right.

The number of orders you can quickly access has increased without overwhelming users with visual stimulus. Colors are used more sparingly, but with great effect, highlighting key information.

The amount of immediate information about an order has been reduced, but important details like order status and fraud grade remain top level. Fraud notifications have been hidden in a dropdown to prevent overwhelming users with constant information, but are still easily accessible.

Details are easily scrolled through for every order in an email inbox esque format that many users are already familiar with.
Initial Redesign –
The original ask for this project was to find a way to include bulk actions into the original design, clean up order details, and cram even more information and CTAs into an order card.
To fulfill this ask, I included the ability to select multiple orders with global CTAs at the top. I also added the “Ship Order” CTA into each order card, and tried to layout information in a way that showed a step by step process of importance.

The more I iterated on this design, however, the more problems I began to find with it. Not only did it not solve the original problem of excessive effort to reach Order Details, I also learned in a meeting with the dev team that there were backend limitations with designing bulk actions in this manner.

On top of all of this, it was still an incredible eyesore. Even though my CEO is the one who made this ask, I pushed back in our next project meeting for a larger redesign. I believed the time and effort an overhaul would take was worth it for a better user experience.
Iterate, Meet, Repeat –
Thus began the long process of iterating, finding time to meet with my busy stakeholders (CEO, clients, etc), and incorporating their feedback into the next design. As this cycle continued, the number of functionality requests increased, prolonging the timeline and logistical difficulty of this project.
During this long process, my CEO began introducing new design requests that all revolved around letting users do as much as possible at the same time. He still wanted bulk actions to be key, with the ability to receive, capture the payments for, and ship multiple orders at the same time, reasoning that this would cut time out of many users’ workflows.

He also introduced the concept of order tabs, so that users could quickly toggle between multiple orders at once.

“Order Quick Find” was a request based on categorizing orders for new users especially, so they could quickly find what they needed every time they entered the Recent Orders page.

His final request was for two viewing modes; a list mode for “super users” that had dozens of orders a day, requiring a sacrifice of detail for real estate, and a card mode for dealerships and OEMs that are smaller and have fewer orders a day, allowing for greater detail.
The above mockups are a result of all these requests. As time went on, and my meetings expanded to include the dev team, support team, and research with users, I found more and more problems with these designs.

Conversations with the dev team revealed that order tabs would be extremely difficult, nigh impossible to implement. Similarly, backend restrictions made it impossible to capture or ship multiple orders at once.

User interviews implied that they were also unnecessary as no users “toggle between multiple orders at once” the way this task had been described. The same seemed to be true for “Order Quick Find” as it was more confusing than helpful to those interviewed.

We also took a look at the average number of orders a user will have a day, and found that it was around 15, making the “card view” unnecessary. Based on this research, my design team and I also realized (admittedly a little late) that I had been operating under the assumption that our CEO knew exactly what the user workflow was, when this was not in fact true.
User Journey Map –
It was time to go to the source and figure out exactly what our users need, not just what we thought they want.
After interviews with the support team (who handle most complaints from users), as well as watching a few users actually go through their workflows, we created this User Journey Map.

We learned that users almost never perform a CTA without first checking if an order is legitimate by viewing its fraud grade and if necessary, the fraud notifications. They also will check stock in the store/warehouse. Then the workflow is Receive -> Capture -> Print (for the act of business records / shipping label) and then Ship. “Ship” simply sends out an email to the user that their order is on the way, but can be done before actually shipping.

What users care the most about is checking a customer’s information and legitimacy, evaluating their billing information, and keeping track of the order status so they know which orders need to be received, captured, or shipped.

Armed with this knowledge, I began designing towards the final iteration.
Final(?) Design –
After a few more weeks of meetings and iterations, I tentatively finished a design that is being pushed into production in 3 phases. But is a design ever truly finished?
The above mockups are the designs approved by the CEO, clients, and dev team for production. They will be developed in the coming sprints in 3 phases to give the dev team more time to code and address bugs, as it is a large overhaul of the current design.

Upon approval of the desktop version, I also created responsive designs for tablet and mobile viewports.

This was my largest project so far at SimplePart where I handled the most responsibility and knew my designs would have the greatest impact on our users. As I mentioned before, the previous Order Details and Recent Orders pages are our two most visited Control Panel pages, with 62,000 and 52,000 weekly visits respectively. I look forward to seeing my designs in production and am proud of the work I did. 



I’d like to thank my fellow design teammates for their constructive criticism when I got tunnel vision, helpful advice when I got stuck, and generous praise when I was overwhelmed with constantly shifting feedback and additional asks from stakeholders. 


No design is truly finished and I am sure I will revisit this again to add more functionality and tweak some pixels, but for now, I am satisfied.