.png)
.png)
.png)
.png)
.png)
The Archive
Project Type:
Mobile Web App, Branding
UX Designers
Joana Capistrano
Joanna Kowalska
Luisa Rincon: Product Manager, Lead Product Designer
Developers
Alex Ayala- Front End Developer
David Domingo- Front End Developer
Mindy Miller- Front End Developer, Marketing
Team:
Project Brief
I led a cross-disciplinary team during the Denim Decoded Hackathon hosted by Levi Strauss & Co. We had a little under two weeks to design and develop our solution from scratch while competing against teams that have dedicated years to the size and fit problem faced by the clothing industry.
Project Outcome
We placed 4th, beating 8 startups.
Backstory
Originally 12 startups that have been developing software for the size and fit issue were competing. As a participant, I was to apply to one of the teams and help them with the UX Design portion of the solution.
However, after listening to their pitches I believed that there was a better option available for users. I decided to take a chance and sent my proposal to the event organizer Matt Phillipe, who really enjoyed the idea and gave me the opportunity to recruit and lead a cross-disciplinary team.
My Contribution
-
Created the research plan & strategy
-
Conducted 3 user interviews and usability testing on 20+ participants
-
Sketched, wireframed, and prototyped original user flows
-
Managed the entire product lifecycle and product roadmap
-
Worked collaboratively with internal stakeholders such as product designers, engineers, and clothing designers.
Research
Interaction Design
Visual Design
Algorithm Design
The Challenge
Levi.com consumers struggle with picking the right size and fit without the physical experience of the product.
Levi’s objective for this hackathon was to find a solution for their size and fit problem. With the implementation of the solution, customers of all sizes/body types should be able to confidently shop for Levi’s products and be satisfied with the fit of the products they purchased online when they receive them.
My Goal
My goal for this project was to deliver a mature solution that could be put into production as quickly as possible. I wanted the solution to be easy to use and intuitive for consumers while also having key differentiators from its competitors.
Most of the startups had developed software where users would have to pose in front of their phone's camera wearing form fitting clothing and go through multiple steps to get a recommendation.
According to the secondary research I conducted after listening to their pitches, most users are apprehensive with sharing private information with a third party and would wonder how the information they submitted would be handled. [1] This conclusion was verified by our user interviews, most were uncomfortable with sharing images of their bodies, even if by doing so they would get accurate recommendations.
As a result, we decided to create an inhouse solution where users have the options of sharing their favorite Levi's jeans PC9 code, share their measurements, or go through a virtual gallery flow to receive tailored recommendations and make informed purchasing decisions, ultimately helping reduce the amount of returns.
Problem Validation
Levi.com consumers struggle with picking the right size and fit without the physical experience of the product. 1 in 3 Levi.com customers return items they purchased from the online store because it does not fit them.
Denim is a notoriously finnicky material to work with; color can affect the sizing as well as tolerance variations between every pair of jeans made For this reason, even jeans sold by the same company and that are labeled the same size may have a difference in measurements. Levi Strauss & Co sells denim products and sources the denim from around the world, which results in these sizing issues to come up when their clients purchase from both their online and physical stores.
This is also a problem that is prevalent in the online experience of the clothing industry because there is no set standardized apparel size system. A potential difference in size from product to product makes online shopping confusing which prompts shoppers to abandon cart in favor of the instore experience.
Narvar’s “The State of Online Returns in 2019: A Global Study” surveyed 3,519 global consumers, ages 19-65, who have made an online purchase at least once in the last year—1,001 of those surveyed were U.S. consumers.
Size and fit was a common reason consumers said they returned online orders to non-Amazon retailers, at 46%.[2]
Users
Who are our users?
Most of Levi's online shopping clients come from phone browsing.
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 on different styles, and most customer shop for themselves.
Mary Jenkins
"I love wearing Levi's jeans, they look great and are comfortable to wear. "
Age: 29
Occupation: Tattoo Artist
Location: Boston, Massachusetts
Pain Points
"Purchasing clothing online always end in annoyance for me. Whenever I buy jeans online they never fit me, they always are too large in the waist or too tight. Looking at the size chart doesn't help, and there have been times when I have repurchased jeans that I like and when I received them the fit was totally off!"
Goals
-
Buying new styles without having to worry about the fit.
-
Repurchasing styles and knowing that it will fit the same
-
Purchasing based off of site recommendations and knowing it will fit.
Scope & Elements to consider
What are our deliverables, what are our constraints, and how do I regulate the design so that the solution is unbiased.
We had twelve days to create a solution that was ready to present to Levi's C-Suite. It took a lot of planning in the beginning to make sure that our solution would be at a stage where it could compete against the startups that had developed software to solve this problem.
Because of limited time, I decided it would be best to focus on one product category (jeans) so that we could have enough time to design and develop our MVP.
We decided to move forward with a MVP that included examples of where the Archive could be potentially integrated into the current design; such as the Home page, the browsing page, and the product page.
We also designed unique elements such as the Archive Landing page and flow, and I helped the developers create an algorithm for our solution.
How did I make sure that the design is unbiased as well as accessible and well organized?
I set in place 3 design principles to create a guideline for our team so that we can stay true to the user without allowing external powers (business, client) to sway the final design.
-
Our design should provide the tools and knowledge necessary to inspire confidence in our users.
-
Interactions with our design should allow for a comfortable and memorable experience.
-
All information should be easily accessible and presented with clarity.
Research & Explanation
What methods of UX research will I use to learn what the user needs and how do I employ those insights in the design?
-
I created a research strategy to help us choose the best data collection and analysis procedures as well as provide a sense of direction for our research.
-
I conducted in-person and virtual user interviews to gain perspective from current and prospective Levi Strauss & CO customers located in the US.
-
We conducted three rounds of usability testing.
Baseline Assumptions/ Hypothesis:
If we create a seamless shopping experience through an in house “archive” where Levi’s customers will be able to plug in the product code (PC9) of their best fitting jeans and find similar jeans by fit, color, material, etc. as well as input their measurements, then users are less likely to return their Levi jeans.
Problem Statement:
-
Levi.com consumers struggle with picking the right size and fit without the physical experience of the product.
Solution Statement:
-
Create an in-house “archive” where Levi’s customers will be able to 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 their profile and receive recommendations based on their desired fit, color, etc.
Research Goals:
-
Through user feedback- figure out the best way to provide users accurate recommendations
-
Figure out the best placement and structure of ‘The Archive’ in the Levi’s site.
Anticipated Outcome
-
Our final solution (mobile & desktop ) will be a personalized destination for customers of all sizes and body types so that they are confident and comfortable with their online purchases.
Findings
Our findings were as follows:
-
Shoppers would like to be educated on size and fit earlier on in their shopping journey to make informed jean purchasing decisions.
-
Shoppers would like to be able to compare multiple fits (ie., Slim and Skinny) within the compare feature, they feel this would help them quickly understand the differences between fits that look so similar.
Brainstorming Session
After synthesizing the data we received from the data interviews, I spearheaded a brain storming session with the developers and designers. It was really beneficial to compare ideas as well as hear the developers voice potential constraints early on in the design process.
Sketches
Levi's Home Page
_edited.jpg)
.png)
-
When on the website, shoppers go straight to shop
-
When I was sketching, I was thinking about how to educate users as they are in the discovery phase of their shopping experience.
-
I thought of elements that we could incorporate into the design that would drive engagement and provide an educational piece to the user regarding the Archive and its purpose. I was initially thinking of incorporating a banner or modal, but decided that a short promotional video would be a good way to attract the users attention. Levi's currently uses this strategy, so I felt that it would not be out of place if incorporated into the design. I tested the home page and the video was well received by users.
-
The promotional video that I created for the home page of our solution.
I noted early on in the design process while researching Levi's style guidelines that the company likes to include short videos on their home page to break up the promotional shots of their products and the many sales banner that live on the home page. This is my take on what a promotional video for the Archive would look like.
Sketches Cont.
The Archive Recomendations Page
.png)
-
After the user inputs their measurements, they will be shown their custom recommendations.
-
At the top of the screen, I wanted to incorporate a visual element of the jeans they entered. In our user interviews, it was mentioned that people often try to look for the jeans they have purchased in the past that fit them well, and if they cannot find them they will try find the most similar pair. I wanted to address this issue in the design and sketched out a section where the user can like the style they entered.
-
If enough people with similar measurements show their interest- Levi’s will have access to this information and might consider bringing back these styles. This is a potential avenue for Levi's to improve customer satisfaction.
-
The Archive's Product Page
.png)
.png)
-
Once the customer is on the product details page, they will see how closely the product fits their size preferences and how the style compares to their current jean details. These preferences can be saved to the customer profile for a continued superior experience for returning customers.
-
While I was sketching this page, I wanted to focus on making sure that the user would know which style would fit them the best. Initially I was using color to portray this, but it eventually evolved through user feedback as a modal that displays visually how close the fitting of the style they are viewing is to their desired fit.
Challenges
The information I needed to create the algorithm was proprietary data. In the beginning the framework of the algorithm was a lot of educated guessing on my part based on research and prior business knowledge. Thankfully, halfway through the sprint we received a report that confirmed my hypothesis that Levi Strauss and Co. stored data regarding differences in products from factory to factory and also had the historical measurements of each style documented.
The design guidelines was also proprietary information: I had to figure out a way to get as close to Levi's branding on the website so it would be as seamless as possible and the integration of our solution into their site could be easily digestible for the judges. I inspected every element on the site, from text to colors to images, and we were able to get a close match.
The Solution
The Archive is a digital destination hosted by Levi’s for customers of all shapes and sizes who want to buy the best fitting jeans-without all the guesses. It is a collection of archival garments -brought to life- though photos and historical data, which customers can search to find active in-production styles similar in fit as their favorite Levi Jean. This in-house solution will allow users to share their information, receive tailored recommendations, and make informed purchasing decisions, ultimately helping reduce the amount of returns.
https://www.figma.com/file/ipJmM3wAQOFR35B5EfSjh7/The-Archive-(Mobile)?t=avtiKw0lOmrOHYlw-1
The Solution: Live Site
https://the-archive-ten.vercel.app/
NOTE: We designed our solution as a mobile web app. If you are using Chrome on your computer, please be sure to inspect the page and 'toggle device toolbar,' then select iPhone XR or manually input 414x816px.
The Algorithm
Below is the outcome of the algorithm that I helped the developers create using data that was given to us the by Levi's team. Because of the proprietary nature of the data we received, I cannot discuss or show much on this section. However, if you'd like to learn more on how we developed the algorithm, I would love to chat with you!
Approach
Condition
- (22%) Size Group_Taxonomy-US (condition 1)
- (25%) Gender_Taxonomy-US (condition 2)
- (0%,9%,18%,27%,35%) Waist/Length (difference of .1) (condition 3)
- (10%) Fit_Taxonomy (condition 4)
- (5%) US -Stretch_Taxonomy-US (condition 5)
- (3%) Color Group_Taxonomy-US ((condition 6)
Waist/Length Measurement Scaling:
Total_Difference = waist_difference + length_difference
(jean compared to optimal pair at entered size)
Total_Difference = 0 => 35%
Total_Difference <= .1 => 27%
Total_Difference <= .2 => 18%
Total_Difference <=.3 => 9%
Total_Difference > .3 => 0%
Reflection & Next Steps
Design is an iterative process. There is no end point.
Reflection
I accomplished so much in 12 days. I learned how to design an algorithm based design while collaborating with internal stakeholders and managing a cross disciplinary team. It was my first time leading a team in this space, and it felt natural and fulfilling.
On a personal level as a designer...
-
I realized that I missed managing teams and really enjoyed the experience of managing other designers. In the future, I would love to be a Design lead who uplifts my team so that we can design the best solution for the user.
Next Steps
I would be interested in continuing to refine the algorithm and the UI. I would like to test the solution with users and continue our iterations with the data that we were unable to access from the Levi's team. I would also like to expand the solution to other product categories such as shirts and jackets once we receive the pertinent data so that the Archive could be considered a true body inclusive brand experience
.
Citations
