Bonobos Size & Fit

A size and fit guide that brings comprehensive and relevant education to the product details pages.

ROLE

Lead Designer

DURATION

6 weeks

01/ The Challenge

How might we instill confidence in a customer's buying decision?

Bonobos, an online menswear brand, differentiates from other brands by offering a wide array of sizes and fits for every body type. Customers have expressed difficulties and inefficiencies accessing size and fit information on the website. Size and fit related customer service issues contributed to the third highest reason for contacts and 67% of all returns are due to size and fit issues. From these insights, it was clear that there is a size and fit issue in the buying experience.

Goals: Increase Conversion, Decrease CX Contacts, Decrease Returns

02/ The Process

The importance in size and fit

We first tapped into our insights team to fully understand how important fit is to the customer and what confidence in fit could mean. The insights team found the following:

Importance of Fit

One of the main buying decision points
Men have lower confidence in a brand’s fit
Some users go to great lengths to ensure full understanding and confidence in fit (rounds of buying/returning until they found the right fit)

Confidence in Fit means

More likely to buy
More likely to buy an item out of their comfort zone
Increase brand loyalty
Increase shopping frequency

Current Experience

At the time, there was only one primary way to learn about size and fit: A fit guide that explained the story behind the fits with information about the chino pants, shirts, and blazer fits and their specific size charts. Users can access it from the homepage or product page.

Brainstorm

I facilitated and led a day long design sprint with the cross-functional team to explore how we might solve the size & fit problem. The team came up with the following ideas:

DYNAMIC GUIDE

A consolidated size and fit guide that is dynamic by serving relevant guidance depending on funnel location.

PROFILER TOOL

User inputs personal size info for an suggested size & fit.

COMPARISON TOOL

A tool to compare overall size & fit across products and/or previous purchases.

CROWDSOURCED DATA

Users can see customer photos, size & fit reviews, what others wore.

We decided to start with a more simplified version of a dynamic guide for testing. The basics and foundation needed to be covered first before attempting the more advanced solutions (profiler and comparison). The crowdsource data idea was interesting, but we felt that it would be difficult to get user feedback and take too long to get a read on the effectiveness. The brainstormed solutions were put in a backlog for future potential iterations.

Content is king

For the guide to be effective, the information needs to be accurate, useful, and clear. I worked very closely with the Technical Design team to understand all of the fits across categories, the differences, and how it should be communicated to the customer.

Fit Illustrations

After some explorations, I decided to keep the fit illustrations to be similar to the ones the Technical Design team uses because of its simplicity, clarity, and scalability.

Size & Conversion Charts

I worked with the Technical Design team on pairing down the size charts to what is necessary for the customer. We also created conversion charts for translating alpha sizes to specific selections (dress shirt sleeve length, neck size, etc.)

Iteration 1

Where should the guide be located?

I first wanted to test where the size & fit information should be located: within a contextual modal or on the product page itself. I tested just the fit portion of the guide instead of the full extent to get a quick read. The winner would determine the constraints of the full design.

VERSION A - GUIDE LOCATED IN A MODAL

VERSION B - GUIDE LOCATED ON PAGE

Users preferred the information to be contextual in a modal because there was a perceived efficiency compared to the required scrolling of Version B. Access to the information from the modal keeps the user to in place of top/dependent selections.

Iteration 2

Should all the size & fit information be accessible from one modal or should there be a modal for each relevant information?

Users preferred having a modal focused on just the relevant information. Displaying size & fit information all at once confused users and added cognitive load when focusing on a singular goal (i.e. find me neck). Users also did not seem to naturally navigate to other sections of the modal when the information was all located in one modal.

Iteration 3

When finding size help, is a simple conversion chart, detailed size chart, or both helpful?

From testing I learned that users would either only use a conversion or size chart to get the exact detailed measurements.

Conversion Chart User: “I walked in not knowing what the heck I was looking for, but because of the great UX/UI of it, I walked out making an incredibly informed decision and feeling empowered”

Size Chart User: “This [size chart] makes more sense to me. I would definitely use this [size chart] information and find it more helpful than the conversion chart."

So I decided to keep size charts with conversion charts (when it made sense) to accommodate both types of size information seekers.

03/ The Solution

The size and fit guide brings comprehensive and relevant education to the product details page (PDP), allowing users to quickly and easily access the information they need at the moment of decision and streamline the overall user experience.