Archive
An in-house digital destination that customers can search through to find active in-production styles similar in fit as their favorite Levi Jean
My role
UX Designer, Visual Designer, Intercation Designer
Team
Joanna K. -UX Designer
Joana C. -UX Designer
Luisa R. -UX Designer
Alex A. -Front End Developer
David D. -Front End Developer
Mindy M. - Marketing
Tools
Figma, Photoshop, Illustrator, Asana, Figjam
Category
E-commerce, Fashion
Timeline
3 weeks
Type of projects
Client
Overview
Levi Strauss & Co. Denim Decoted Hackathon was a competition open for the first time to the public that gathered 12 startups and visioners to generate innovative and scalable business solutions that enhanced the online shopping experience.
Our team has been the only one that has been created in the first few days of the hackathon from scratch and competing against teams that have dedicated years to the size and fit problem faced by the clothing industry.
Design process
Problem
01
42% of online returns are attributed to fit and size, which continue to be one of the primary reasons for returns
02
People are disappointed where bought a product that doesn't fit.
03
1 in 3 Levi customers return items they purchased the online store
Solutions
01
Help comsumers indentify their right size
02
Increase consumers's satisfaction
03
Decrease the % of online returns
Market research
The first step was to understand the needs of customers shopping online and learn about their problems related to shopping and returns. My goal was to determine how we could help Levi's customers of all shapes and sizes to confidently find products that match their style and fit preferences.
Despite the need AR tools, 88% of shoppers still rely on photos, reviews, descripitions, and sizing guides.
Source: Narvar Costumer Returns Study, 2021.
Understanding the users
After reviewing market research and conversation with Levi's team, I was conducting user interviews to gather qualitative and quantitative information on people’s shopping online.
I conducted 3 in-person and 1 virtual user interview to gain perspective from current and prospective Levi Strauss & CO customers located in the US.
I compiled all data received into an affinity map. This gave us insights and common trends for users. As a team, this was key to prioritizing our design.
4
Levi's customers
11
User interviews
24-38
Age range
Interview insights
It’s tricky because it also goes hand in hand with the body type, not everything looks good on every body type.
Still finds it difficult to shop online because dimensions vary so much.
I would like to have easier and faster options to buy jeans than finding measurement charts.
I wouldn't feel comfortable taking pictures of myself to use an AI/AR tool because I don't know where else this data will be used for.
Key findings
Who are we designing for?
Based on my research conclusions, I was able to create a user persona to help establish the problem that needs to be solved, focus and inform our design decisions, and further empathize with our users. Persona Returning customer emerged from our affinity map.
Customers shop for items on the online store with a general fit and style in mind, usually the same fit and style as the current Levi jeans they own. There is a general confusion about different styles and most customer shop for themselves.
Levi's customers struggle with picking the right size and fit without the physical experience of the product.
Business side vs. user side
Ideation/ Reality
Our focus had been primarily on find solution to find the best fit for all clothing products as a shirts, jeans and jackets. However, due to time constraints and limited access to the levis design guide, we decided to focus on jeans only.
We came up with an in house solution we called “Archive” where Levi’s customers will be able to scan or plug in the product code (PC9) of their best fitting jeans and find similar jeans by fit, color, material, etc.
First time customers will be able to input their measurements in the archive page and receive recommendations based on their desired fit, color, etc.
Flow diagram
To outline all the necessary functionality I created simple diagram of the main task that Levi's customers can do. One of the flows shown below it's dedicated for returning Levi's user who whan to find the best fitting jeans on the website as quickly as possible.
Low-fi wireframes
Once the flow diagrams were established, I started creating the low-fidelity wireframes for all oh the flows. Screens below have been created for returning Levi's customer.
Usability test result for Lo-Fi wireframes
I facilitated three rounds of usability testing. Each round has five tests to discover any issues that might arise for the users in the proposed prototypes. This was tested over the Maze platform where I introduced the user to the app and asked questions regarding the tasks.
77%
Set up preferences to receive personalized recommendation
70%
Finalized purchase of a recommended product based on tag
58%
Found a product that they like and is close to their size.
Style Guides & Assets
In preparation for the high-fidelity prototype, I studied the Levi’s website and native mobile app to create a style guide. I discovered that the site is product image heavy, they have very few illustrated graphics, and primarily only uses red and shades of black throughout the site.
With this in mind, I created a logo and icons for Archive that match the style and colors of the existing UI kit.
The Algorithm
I collaborated with developers to create an algorithm solution using data that was given to us by Levi's team. Because of the proprietary nature of the data, we received I presented only a part of the outcome.
Hi-fi wireframes
High-fidelity prototype
I connected my high fidelity designs into a clicable prototype. That will allow me to test
Final product
I connected my 26 high fidelity designs into a clicable prototype.
