Levi's® – A Mobile Sales Associate Ordering System (AOS)
A hybrid iOS app for retail stores to order online merchandise
Objective
Implement a mobile solution that enables stylists in the EU to perform “save-the-sale” and “endless aisle” capabilities; allows stylists to sell products not available in stores through the online store, levi.com
Save-the-sale: Placing order for out-of-stock items in the store.
Endless aisle: Placing order for items not offered at brick-and-mortar stores.
Challenges
Working on a new AOS app meant we had to optimize the experience for two user groups:. European retail sales associates as primary users and European customers as a secondary user.
A few constraints/challenges we faced involved optimizing for a mobile app experience with little screen space, moving with a faced paced timeline (total project time including development was 7 months), design a modified MVP version and phase I post MVP version.
Role: Co-Lead Product Designer
I co-led the design of this project with another teammate. Due to the fast nature of the project and competing priorities, we had to “pass the torch” at times. My largest contributions involved our define+empathize phase, along with ownership of Navigation, PDP, Browse and partially Scan.
We worked various stakeholders and project teams ranging from a team of software + QA engineers, a ux researcher, a product manager and a project manager to EU business teams consisting of retail, operations and customer experience.
The Cliff Notes
A few highlights below showing some of the core features of AOS (Scanning, Product Detail Page, Browse and Bag).
Design Process Overview
We modified a Design Thinking approach to structure our design process.
Design Process
Empathize + Define
Design Story: Setting up the project through 3rd party conceptual storytelling
*Please note: all illustrations for this section relating to the design story were produced by a 3rd party vendor.
Part 01 | Katie is in the market for a new trucker jacket, and heads into her local Levi’s store to find the perfect one. She finds a jacket she likes a lot, but it’s a little too small. Katie asks a stylist for a larger size and maybe other colors. The stylist checks the sales floor & backroom, but the store is sold out on her size and only carries one color.
Part 02 | The stylist informs Katie her size is out of stock, but offers to have the jacket she’s looking for shipped to her for free. The stylist scans the product barcode and the application quickly pulls up her trucker jacket, alongside expanded size and style options. Together they find the size and color Katie was looking for and easily adds them to the bag.
Part 03 | A few days later, Katie receives her trucker jacket in the mail.
United States AOS User Research
Prior to kicking off, we wanted to get a sense of American users as we had a current AOS system in place we felt would be a good start to gather learnings and experiences from. I ventured out to a few stores and spoke to 3 users on their experiences with AOS. Much of this helped set up the foundation on validating and/or discovering user needs for both the customer and the sales associate.
Much of what I heard, validated the need for stylists to have an AOS system. To further understand when AOS was triggered, below is a “typical” flow stylists described. This helped get a sense of the bigger picture, motivation levels and decision points.
Key insights in talking to American stylists:
Insight 01
Most of the time, customers in US, only order a single item.
Insight 02
Current app was “usable”, but lacked visual clarity + seemed complicated.
Insight 03
Limited bandwidth in stores, try and optimize for performance.
Insight 04
Behavior though of switching between products for various uses was evidently cumbersome (not a single app to look up inventory, etc.).
Insight 05
Multiple users with primary user being Associate but customer could be user at times too.
Insight 06
Primary use case, save-the-sale in the fitting room, then secondary use cases for finding a product not in store or more color assortment.
Insight 07
Current app has scan, search and order history functionality to confirm whether or not orders went through (failsafe)
Insight 08
Looking up product by scanning seemed, most used feature, followed by search by style number (PC9 #)
Analyze + Iterate + Test
Initial Lo-Fidelity Mocks
Based on design process thus far, we gathered as a team and documented what we found to be two primary use cases:
– Customer looking a size of a pair of jeans (or item) that isn’t available in store
– Customer looking for an item in another color or that simply isn’t offered in store
We went to the drawing board and did a few rounds of open discussion and brainstorming. We started by describing steps to execute these, followed by quick initial UI sketches (our initial goal was to adopt iOS patterns to simplify scope).
Iterations
Based on our sketches, we launched into the wireframing process.
v1 | Idea Dump
v2 | US Tested Prototype
Usability Testing
In order to validate our designs, we chose to test the product through a prototype with American iOS sales associates first. We knew there could be differences to our ideal users in the EU, but having a store in our office atrium proved to be a quick way to meet in person and gather information as a foundation. We made an assumption that our findings would be “similar” to EU Associates.
These were our high levels goals:
Determine if users understand flow
Identify areas that frustrate or confuse users
Utilize findings to provide recommendations for further development and next steps
