Chromatic Gallerie shoes sample

Footwear Size Selection Tool

 

The Problem

Chromatic Gallerie was a startup footwear brand that needed an online tool to help customers determine what size shoes to order. Providing accurate sizing is a big problem for all online footwear retailers, but it was especially important for Chromatic Gallerie because they offered an extended range of sizes and widths, and because comfort was one of their main selling points. A shoe cannot be comfortable if it doesn't fit!

The Data

We interviewed, measured, and fit tested close to 200 volunteers in the brand’s target demographic. Based on this data, we learned that:

  • The vast majority of women do not measure their feet regularly and assume that their shoe size remains constant once they reach adulthood, which is not true.
  • About 20% of women whose feet measure in the widely available size range between US sizes 5.5-10 and in the Medium (B) width wore the wrong size, usually too small.
  • The percentage of women wearing the wrong size jumped dramatically to virtually all of them for women whose feet were a Narrow or Wide width, or had a length outside the US 5.5-10 range, or both, because there are so few fashionable options for them in the market in the correct size.
  • There are a few main symptoms of incorrect fit that repeated over and over again.
  • Several, sometimes opposing, fit issues could cause every individual symptom of incorrect fit. This meant that we had to ask for a combination of symptoms to arrive at the correct solution.
  • Many customers have normalized the discomfort and did not know what proper fit felt like, so we needed to provide this information in order to help them start thinking critically about their footwear and expect more from it.

The Solution

Based on the brand's needs, the stakeholders' input, and the information we gathered during the discovery process, we decided that the tool should be in the form of an online multiple choice quiz. 

We decided it was important for the fit tool to provide customers with information on what they should expect from their shoes by presenting the common fit problems as problems with the shoes, NOT their feet. By reframing the problem from the “my feet are weird therefore all shoes hurt them” approach many of our customers had into a “here are the problems to look for in your shoes to avoid the ones that will hurt your feet”, we were helping our customers to become savvier consumers in the process of selecting the best fitting product for them.

We also knew the tool will need to be integrated seamlessly into the brand's core site in order to be effective. 

The Process

We compiled all the data from our fittings and interviews to organize the symptoms of bad fit by shoe area (Back, Sides, and Front) because that is how people naturally examine their shoes when they first put them on.

The result of this stage was a long list of possible combinations of symptoms, with the description of what fit problems caused each combination and our proposed solution. This list of permutations was the engine that made the tool work for the customers. 

We also compiled the information people did not seem to know most often in the interviews to distribute it throughout the fit tool in an organic way so we could educate our customers without lecturing them.

Once we had all the necessary content, we could start designing the tool itself. We needed an area for the question, an area the educational information, an area for the multiple choice answer to the question, and a space for the visual component.

We designed the visual component to build up as the user answered each question, to convey the answers provided so far.

THE WIREFRAME

Chromatic Gallerie fit tool wireframe

I worked with the brand's marketing department to align the tool with the brand’s visual language and conversational tone so that the user's experience with the tool would fit seamlessly with the rest of the brand's presence.

CLICKABLE MOCKUP

(Note: only one possible pathway presented here for demonstration purposes, with the A’s selected).

Click here to view the project `Clickable Wireframe`

This prototype brought to you by InVisionApp

Tool Placement

The final tool became an important part of the brand’s website. We decided to put a button CTA leading to it on every product page as well as in the footer. This reinforced the brand’s commitment to fit and provided another venue for customer engagement for users who were not yet ready to make a purchase.

The final page of the fit quiz depended on the user's starting point. If they started on a specific product page, they would end the process on the same page with the suggested size selected. If they started from the footer link, the process would end on a landing page of products currently available in the suggested size. 

Chromatic Gallerie fit quiz user flow product

User starting the quiz on a product page would end it on the same product page with the suggested size selected.

 

Chromatic Gallerie fit quiz user flow footer link

If a user started the fit quiz from the footer link, the final screen is a grid of products available in the suggested size.

 

My Role

I was the lead designer on this project. I worked closely with the brand’s sales team to formulate the problem, with the PR team and the brand’s owner on the tone and language of the educational component, and visual designer on the final look and feel of the tool. I recruited, interviewed and measured the fit volunteers, compiled the data, developed the wireframes and user flows, and worked with the company's developer to bring the tool to life.

 

The Outcome

The tool became an essential component of the brand’s online presence. The sales team reported that it helped them with a large portion of customer service queries, giving them a concrete way to address people’s questions that otherwise were very difficult to answer. The PR team used the tool to communicate that fit was one of the brand’s core values. Finally, the warehouse reported a decrease in returns due to poor fit, which improved the company’s bottom line.