This project involved working closely with Levi Strauss and Co. to identify a problem rooted in business goals and user needs and create an innovative and useful solution. My team and I were tasked to conduct research, identify, and solve for a problem in Levi's current in-store experience, with the goal of improving customer satisfaction and boosting product sales revenue. This was done by implementing an end-to-end design process.
- Duration: 17 days
- Team: 4 designers
- My role: UI design, interviews, usability testing, content strategy, copywriting
- Tools: Sketch, InVision, Illustrator, Principle
- Deliverable: high-fidelity interactive prototype
How can we disrupt existing retail conventions so that customers can shop confidently on their own terms?
Introducing Levi's Scan.
1. Scan automatically.
2. Pay instantly.
3. Leave happy.
What I did specifically
- Conducting initial interviews with store employees
- Competitive analysis
- Initial brainstorming through sketching and wireframing
- Creating user flows
- Owning design of home and checkout/payment screens
- Usability testing
- Content strategy, fine adjustments, and proofreading
At the beginning of the project, we as a team collectively decided that the first course of action that should be taken was to visit a physical Levi's store to make observations and gain insights. A teammate and I visited Levi’s largest store in San Francisco (Market Street) to study customer and employee behavior, as well as gather information through asking questions. The goal was to obtain real-time, on-the-ground data in order to inform the design.
Key findings from this visit:
- The majority of customers in this location are foreign tourists visiting for the first time who don't know their way around the store.
- Checkout lines can get long during peak hours when the store is crowded.
Interviews and Surveys
Having determined that a common customer pain point was the checkout process, we took this information and endeavored to validate it further by conducting interviews and surveys. Participants expressed dissatisfaction with having to wait in line, as well as having to interact with sales associates. A total of 37 individuals took the 16-question survey, with 25-34 being the most common age. Below is a summary of all responses to five linear scale questions, with a response of 1 being "not at all enjoyable" to a response of 5 being "very enjoyable".
Survey Response Insights:
- Most people have neutral experiences with cash registers
- Self-checkout isn't always the most straightforward
- Roving point of sale is a positive experience
- People do not interact with sales associates often
Therefore, these findings led us to start thinking about taking our solution in a direction that would minimize interaction with cash registers and sales associates, as well as exploring ways to improve upon the experiences of roving point of sale and self-checkout.
My team and I conducted a competitive analysis of other retail stores that had mobile apps to enhance the in-store shopping experience. We found that there were a number of useful features that competitors were using, including price check scanning, checkout scanning, search, saved favorites, and store map view. We decided to implement all of these features into our design. In particular, we decided to make scanning products for price check and checkout the primary feature.
The user persona was created from the combined key findings from my team's surveys, interviews, and research. This persona is meant to represent how a typical user of the product may think and behave.
With the research complete, the problem clearly defined and the persona and user flow established, we started to formulate design concepts by individually brainstorming and sketching out our ideas, then reconvening to discuss what we came up with and combine our best ideas.
After sketching out a full user flow on paper, we were able to conduct preliminary user testing to get feedback. The most important pieces of feedback we received were:
- Onboarding information should be displayed on the first screen
- Other sizing options should be available
- After each successful scan, the app should default back to the scan screen
Taking all of the feedback received into account, my team and I resumed ideating. The following is an example of the different iterations that were created and the changes we made as a result of the noted feedback.
Feedback received and changes implemented
After mockups were created, I personally took a critical look at every screen and examined them to check spelling, alignment, padding, size, and word choice. I made improvements to maximize effective communication and logical visual choices.
Below is a walkthrough of highlights of the final mockup, starting with a narrated full demo video.
Narrated Demo Video
The first thing that users will see is a carousel of concise but welcoming graphics explaining how to use the app. They are prompted to create an account, but are also presented with the options to sign in or continue as a guest.
Following this, the user is directed to the home page and is able to proceed with three options for courses of action: scan, search, or favorites.
If the user selects scan, they can scan their product and add it to their bag.
If the user selects search or favorites, they will eventually be presented with a map view of the store with the exact location of their item called out.
All of the user flows end with checkout. This design demonstrates how a user would check out using Apple Pay because it is likely the most convenient, but other options available are credit card and Paypal. Immediately after payment, the user is shown a receipt with their purchase summary and, if they selected a bag, a QR code for them to scan at a bag dispenser.
iPad Kiosks: this was an idea that my team and I initially thought about designing as a companion to the mobile app. Kiosks with iPads and scanners would be stationed throughout the store so that users who do not have the mobile app can perform the same functions using the kiosks. With the appropriate time and resources, this could be easily designed based on the mobile app.
Personalized suggestions based on shopping history: this was a piece of feedback that I heard late in the design process. Having specific suggestions based on past purchases would make future purchasing easier for the user, as well as make it feel more personal.
Returns: going beyond checkout and looking at the whole purchasing experience, another experience that my team and I considered incorporating into our design but ultimately decided to hold off on was the returns process. Returns could benefit from the scanning function in the same way that buying can.
From this experience, my main takeaway was that ambiguity is not always bad as it may seem. Our contact at Levi’s was very open about the project requirements, and did not have any specific direction for us. This was a bit daunting at first, as we were not sure how to proceed, but once we found something we were excited about, our contact was on board and very flexible and encouraging.
Another thing I learned was that some features or functions of a product that may make good sense when designing may prove to not be as appropriate to users, as we discovered several times during testing. This also underscored in my mind the importance of usability testing at every stage of the design process.
Finally, I have come to appreciate even more the value of solid research and data. At first, my team and I thought about designing a product to solve for problems with fit, like a virtual changing room app, but after gathering insights from the store visit and the survey and interviews, it became clear to us that this would not be the appropriate direction to take at the time.
Overall, I am very satisfied with the experience of working on this project, and I look forward to working on more like it in the future.