top of page
During my internship at Levi Strauss & Co. I was tasked with designing a new size guide for the Levi's website.
Take a look
How'd I end up with this design?
By addressing the beast of online sizing headfirst
Online sizing. People shudder at the words. Even as a seasoned online shopper, I admit dreading this stage in the e-commerce process. At Levi's, my objective was to analyze what obstacles in their site's sizing process made shoppers feel this sense of impending doom. I needed to hone in on the job of the size chart and redesign it to accomplish this job.
My process:
1. Understanding the Landscape of Online Sizing
In order to understand the specific job of the size chart, I needed to look at the entire suite of sizing tools. Consumers today use not only sizing and measurement information, but also photographs, customer reviews, and other tools to size themselves. To accurately place the size chart within this schema, I created a user journey for sizing based on interviewing ten people on their online sizing process. The flow chart above is a summary of the sizing tools they used at specific points in time, as well as the reasoning behind their use.
User journey for sizing
n=10
By the time people start using the size guide, they have already decided that the fit and style of the product is desirable and are looking to quickly find their size in this item.
Thus, the job of the size guide is to instill confidence in their Levi’s size, as well as to facilitate ease-of-use of use in selecting this size.
The second half of understanding the landscape of online sizing was analyzing how other competitors are using and displaying their size guides. I conducted competitor analysis on 16 online retail companies to document their size chart display (pop-up modal, separate page, or drawer) and features (in/cm, plus size or international conversion information). 14/16 of these companies used a modal, and because the modal allows users to focus on one given task at a time (sizing) without redirecting them from the greater action of adding the item to their cart, I decided to move forward with this display.
2. UX Research and Redesign
I redesigned the information architecture of the size guide in order to address its job. In order to instill confidence, I displayed only relevant sizing information, and in order to facilitate ease-of-use, I created a new click-to-select function and geolocating function.
-
Reorganizing information so that Levi's sizes are always in the leftmost column, allowing users to consistently read across in one direction to find their size
-
Including a hover feature that highlights the row and column users are in for improved readability (demonstrated in the video)
-
Displaying sizing tables only for the sizing options that are available on PDP (ie. waist and length for womens jeans)
-
Displaying the correct size chart for the product type on PDP
-
Condensing the international conversion table at the bottom to a single column within a table that has a dropdown selector based on country
-
Streamlining language so that the size selection options on the product page match the vocabulary on the size chart
-
Connecting the measurement information at the top to the sizing process below
Original Size Guide Reading Pathways
Redesigned Size Guide Reading Pathway
Above is the original Levi's size guide. The red arrows signify the direction of reading in order to find the Levi's sizing column. This size guide is very disorienting because the user has to read in different directions to find their size and has to look in a different column for every table to find their size. There is no clear pattern to the size guide, which adds even more confusion to the already confusing process of online sizing.
In order to make the process more intuitive for Levi's users, I redesigned the structure of the information. Every piece of information left in the redesigned chart is useful for sizing in the item of interest on the product detail page (PDP). As you can see, these content changes result in a major consolidation of information, giving users a clearer size guide to be confident in using. The redesign includes the following changes:
Redesigning Information Architecture
Innovating features for the future
My redesigned size guide also makes things easy-peasy through 2 new features.
The first is a geolocating feature which automatically displays the sizing information of the country users are in.
The second is a click-to-select function which allows users to click on their size within the size guide pop-up window, and have it automatically selected on the product page.
3. User Testing
The next step was to conduct an A/B test to see if my redesign fulfilled its job with our users. I had participants interact with my prototype as treatment B and the existing size guide as control A, comparing their experiences of the two. I created prototypes for womens and mens bottoms size guides to test across both genders. Since Levi's is a global retailer, and since I designed a geolocating feature for international consumers, I also wanted to test my prototype internationally.
Thus, I conducted this test with 8 participants: 4 in the United States (2 men and 2 women) and 4 in the United Kingdom (2 men and 2 women). I hosted this test on User Testing, tasking participants and asking them to speak their thought processes aloud. I controlled for bias by starting half with the control and the other half with the treatment.
For the control and treatment size guides we asked users to:
1. Scroll through guides and discuss their likes, dislikes, and impressions from them
2. Discuss if anything was missing, confusing, or could be changed.
For the treatment we prompted users to:
1. Explore the hover over functionality, asking them to click a size, which then auto selected this size in PDP.
2. Talk about the discoverability of this function, as well as their likes, dislikes, and impressions.
At the end, all users were asked which experience they preferred.
Results
Pluses
All users shared the sentiment of ease and efficiency surrounding the click-to-select function:
“One click saves me the hassle of remembering my Levi’s size and reassures me that I’m not wasting my time”
All users also:
-
Found it very clear that clicking the measurement auto-selects size on PDP
-
Enjoyed the measurement instructions and image at the top of the size chart
-
Appreciated showing only relevant product information
-
Preferred the treatment over the control.
Deltas
-
7/8 users were confused about the difference between the Levi's True Fit predictor which predicts an individual's size based on user inputs, (displayed as a “Whats my Size” button) and the size guide button.
-
6/8 users had trouble discovering the “Size Guide” link, saying that it was either hard to notice because the text was too small or too far from where they expected sizing information to be.
-
Women wanted to see alpha sizes (XS, S, M, L, XL) included in the size chart
-
Men wanted to see broadest range of sizes (above 44) represented
+
Womens Prototype (Hover State)
Mens Prototype (Hover State)
3. UI Redesign
Keeping the same information architecture and features in the above redesign, but adding in the information users missed (alpha sizing for women, sizes above 44 for men) I changed the visual display of the guide. I wanted it to mirror the look and feel of the new Levi's website, and distilled this down to 3 qualities: clean, bold, and a "zine" feel. This UI overhaul included incorporating more white space, bolder graphics, and layering of text and images.
Mens Final Size Guide
Mens Final Size Guide
Womens Final Size Guide (Hover State)
Mobile Adaptation
I also adapted this design for mobile use. Because there is no hover on mobile, the first tap shows the hover state, and the second tap selects the size in PDP, or serves the click-to-select function.
4. Future Research
With the findings from my user testing, Levi's will be launching a live A/B/C test on their website for the size guide. This test was motivated by the widespread confusion surrounding the differences between "TrueFit" and "Size Guide" and the low discoverability of the Size Guide link.
In the A/B/C test, "A" will be the current PDP layout, while "B" will be we will be the same as the current layout only with a more visible Size Guide button. The "C" treatment will have one entry-point at a discoverable location for both sizing options of TrueFit and Size Guide. Once users click on this entry point, a modal pops up explaining the differences between the two, and allowing users to select one of the two.
The goal of this study is to determine whether 1. Increasing the discoverability of the size guide will increase user interaction and 2. Differentiating between the two will allow users to make an informed decision on their sizing tool preference, and improve the efficiency of their online sizing experience.
bottom of page