The Order History dashboard in the Levi’s store associate app allows them to view and track trends across store orders in the American and European regions:
United States • Great Britain • Italy • Spain • France • Germany • Austria • Ireland
Prior to this project, Levi's store associates in America had no database to refer to their store's order history. Imagine! The closest thing being loose customer receipts stapled together and handwritten sales tallied... This feature not only digitizes and centralizes this information, but also enables associates to easily see trends across the data, informing future in-store sale strategies.
Design process
User needs
The first step was to understand our user problems and needs. There were 3 main use cases for store associates and managers:
1. Track performance of the store (for the day, the week, the month)
2. Look up customer orders for order tracking or returns
3. Track store specific trends and aggregate this data across many store locations
Scoping
The next step was to scope the type and amount of data we would have for a store's order history. There were 3 levels of information that were tracked: a specific order and it's details, orders in a day, and orders in a month.
I also wanted to scope any past implementation, so I referenced the old order history feature from our European store associate app. As you can see, every level of information was on separate screens, making it hard to view and connect the relationship between the information. Users would need to toggle back and forth between each level of information, and it wasn't immediately clear which information was the most important because all the elements held the same visual weight:
The design of this Order History dashboard did not make use of the screen size and did not have effective visual hierarchy. We'll address these issues in Design Iteration!
Information hierarchy
Once I had a grasp on the use cases and available data, I was able to connect the two to create a hierarchy of information. Based on how it would be used, I determined what information was necessary and how that information was organized and connected:
Use Cases
Key Info
1. Track performance of the store (for the day, the week, the month)
2. Look up customer orders for order tracking or returns
3. Track store specific trends and aggregate this data across many store locations
I understood that stylists were using month and day data at a summary level but also needed to deep dive into a specific order down to itemized product prices. Therefore, there were 2 ideal users journeys: being able to access month and day summaries immediately and being able to access order details immediately.
Design iteration
To design towards that first user journey, I consolidated the Month and Day summaries onto a single screen and made this the default landing page of our Order History dashboard. This eliminated the disjointedness of having all 3 levels of information on separate screens.
Below is an example of how I started to combine Month and Day info within a 2 column design:
I eliminated the toggle button between month and day since it was redundant when both could be displayed at once
I nested the information from
Month -> Day -> Order to match the mental model of store associates.
Here we see the month data with the ability to select for a month on the left and the days within that month on the right.
The next step was to address the Order level of information and how users would access that from the dashboard. There were 2 designs I explored, either expanding orders on the same screen or seeing orders on a separate screen.
Orders: Expanded
Orders: New Screen
Because store associates preferred the larger, full screen view of orders and they both took one tap to navigate to, I went with the second option.
But I still needed to address the user need of immediately accessing a specific order and its details! So I also added 2 new features not in scope for the original project: searching by order number or email and expanding items in all orders. 'Search' allowed them to get to the Order level of information from the dashboard for use case 2 (looking up customer orders for tracking or returns):
Search
Expand all items:
'Expand all items' allowed them to have that hyper-specific level of information hidden by default, but to access it all at once for use case 3 (tracking sales trends for specific items in that day):
High Fidelity
Once I had the information structure down, it was time to tighten up the UI - I applied visual design principles to create the high fidelity screens for iPad and translated these to iPod as the other device store associates would be using this on:
iPad
I used color, font size and weight and white space to create visual hierarchy
I added affordances for interactive elements such as clicking into months and days and scrolling
I updated the components to be cleaner
iPod
Handoff
-
Currently in development for Mobile & Tablet
-
Live in all American Levi’s stores by July 2023 and European regions by end of 2023
-
Future feature enhancements to follow! This dashboard only covers the basics of store order data in allowing users to view it. There is so much potential for leveraging this data on aggregate to create insights for the future. Next steps are to expand the data analytics tools, for example, allowing store managers to view their most popular products in a day or month, be notified on any sale spike or trend that is atypical, and creating data visualizations and graphics to support these insights.
Roles I played
-
Info puzzle master | Practiced how to break down a feature into its fundamental parts and reassemble those parts into a better, more functional whole
-
Visual designer | Iterated on how to display information in the most digestible, intuitive pieces for a dashboard layout