The Atlas App is a software which allows Levi’s store associates to fulfill orders for store pickup or home shipment in the ATLAS regions:
India • Korea • Australia • New Zealand • Japan
Problems:
• Consumers cannot place orders online for in-store pick up
• Store associates cannot fulfill and ship orders from Levi's stores
The Atlas app bridges online and in-store experiences, creating a seamless omni-channel journey between customers and store associates for order fulfillment
Design Process
Object oriented UX
Our first step was to define the objects in the fulfillment process based on the mental model of our users (store associates) to ensure that our work was aligned with how they think. This also helped us to establish a vocabulary for all stakeholders (product managers, developers) to improve our communication & efficiency.
We then associated our objects with actions. We'll come back to these actions as they'll help inform the stages of order fulfillment:
Process Flows
Because store order fulfillment is an omni-channel experience involving multiple actors including consumers, store associates and carriers, as well as multiple locations including online, in-store, and at home, the first flows we wanted to map out were high level, or the 2 types of order fulfillment.
1. Store Pickup - where consumers place their order online for pick up in their selected store:
2. Ship From Store - where consumers place their orders for shipment to their home address:
User Flow Mapping
Our next step was to focus on the store-associate portion of the process flows to flush out their entire user flow. We conducted a journey mapping session with product and engineering to ensure we were capturing all user requirements:
This may look like a lot but the minutia isn't important right now. What is important is how those main 5 actions associated with our 'order' object can be mapped onto this flow to create the 5 stages of order fulfillment: Order overview, Opening orders, Picking orders, Packing orders and Order Pickup:
1. Order overview
2. Open Order
3. Pick order
4. Pack order
5. Order Pickup
Once we determined the 5 order fulfillment stages and the user steps that fell under each stage, we had our blueprint for how the app would function and were able to start diving into the information architecture for each stage.
Information Architecture
Understanding the steps store associates needed to take at each stage made it easy to plan out the information architecture at that place in the app. Let's take the 'Picking Orders' stage as an example. At this stage, store associates needed to see an order and its items, pick those items from inventory and confirm their availability by scanning their barcodes, or select a reason if the item is unavailable.
We used the information architecture diagram below to understand the necessary screens in the 'Picking Orders' stage. See below for the happy path represented in green and the associated low fidelity wireframes:
IA diagram:
Wireframes:
Wireframe iteration
Along the way we found ways to improve the experience. The scan feature here was improved based on the observed behavior of store associates. We saw that they would grab all items from the stock room and scan at once, instead of grabbing one item and scanning it, finding another item and scanning it, etc. So instead of the original flow of scanning one item at a time, we proposed an improved flow of a continuous scan feature that allowed users to stay in camera view until they were done scanning all items:
Design System
Colors
Typography
We leveraged the existing color and typography from the Levi's style guide to stay within brand. We also used existing components where it made sense to, but created new ones for new features and functionalities specific to the Atlas app including the camera real-time alert/notifications, a product tile for picking items, and a sheet component for entering barcodes:
High Fidelity Handoff
These components were then slotted into the low-fidelity screen templates to create our high fidelity screens. Below is the same 'Scan' flow from before, but with our shiny hi-fi components:
Having a strong foundational understanding of the flow and information architecture of this app made it easy to go from low fidelity wireframes to high fidelity screens. Because we had spent so much time as a team in the first few steps of the design process, we had a very clear blueprint that we were confident we could execute on. This made the high fidelity handoff extremely quick, painless, and efficient. The high fidelity screens were inserted back into the flow of our 5 stages:
1. Order overview
2. Open Order
3. Pick order
4. Pack order
5. Order Pickup
Translating to Tablet
The Atlas app also had to be developed for tablet. Below are a few examples of how the designs changed based on the device.
Leveraging 2 column designs on tablet:
Order overview
Opening Orders
Changing sheets to modal designs:
Impact
Business Impact
-
Live in 15 stores in India and reaching all 250 stores by start of 2023
-
Plans to scale to Korea, Australia, New Zealand and Japan thereafter
-
Future feature enhancements to follow (expanding search functionality, creating a notifications system for orders about to expire)
Personal Impact | Roles I played
-
True collaborator | Working tightly with product & engineering to flush out interactions and negotiating between user needs and technical constraints to build the best experience
-
Information architect | Gathering and organizing information from the widest to most focused lens (flow to feature). This relied on a concrete understanding of how the product must work end to end, how users may best navigate between those steps, and how each step may be simplified to expedite the order fulfillment process.