True Fit Kids

Growing shopper confidence in an online size & fit tool

Overview

The Problem

True Fit appears on product detail pages across numerous websites, helping shoppers find the right size shoes and apparel.

The product targeted to children’s shoes and apparel pages had not been user tested (before my tenure at True Fit), and therefore, there was no understanding about the user experience.

A revised UI with improved interactions and UX copy helped users better understand True Fit Kids and feel more confident about size recommendations for their children.

Results

The redesigned experience resulted in the following user experience improvements

• 5.47% lift in ease of use

• 17.50% lift in user confidence in the size recommendations

I was the UX researcher and UX designer, and I worked with a UI Designer, Engineers, and a Product Manager.

Note: My role was to design UX for the base product. True Fit is branded at each retailer and e-commerce site, and there was no need for me to place a heavy focus on the visual design.

Research & User Testing

The Test Plan

I created a test plan with the following goals:

• Understanding the usability of the product

• Determine user confidence in their size recommendations

• Finding out if clothing type has an impact on the experience

The target users included:

• Parents of children, from toddlers to 12-year-olds

• Online shoppers who bought children’s shoes or clothing in the last three months

• A mix of new True Fit users and existing True Fit users

I also wrote a script with tasks and questions to help achieve the testing plan goals.

Test Implementation

I created and implemented several remote tests on UserTesting.com with a total of 32 shoppers. Users were segmented by the age of their children and their level of familiarity with True Fit.

Users were asked a set of questions about their shopping experience and assigned a set of tasks to complete on clothing websites configured with True Fit Kids.

Users were instructed to think out loud and rate the product, including ease of use and confidence in the size results.

Analysis & Findings

After observing all user tests, I organized my notes into a digital affinity map. The map helped me identify test patterns, including pain points.

Pain Point 1: Users didn’t know how to enter a brand as a comparison metric to calculate their child’s size.

True Fit helps users find the right shoe or clothing size by comparing a product to a brand the user already owns.

In the test, users weren’t able to identify the search bar to find the brand their child wears. So, instead, they selected a suggestion from a list of brands. But choosing a brand their child didn’t actually wear caused users to question the accuracy of their size recommendation.

They were also confused by the “Hide brands they may wear” link, not understanding that it would collapse the list of brands in the UI.

Pain Point 2: Users didn’t know how to identify their childs’ shoe sizes in the UI.

After choosing a comparison brand, users needed to select the size in that brand that fits their child.

Viewing the list of sizes in the UI was overwhelming for users. They weren’t sure how to read the size labels. Further, kids shoe sizes often vary from one brand to another, which was confusing for users.

Pain Point 3: The experience caused more confusion and frustration when users received a “Size Not Available” size recommendation.

This status caused several usability issues.

• Users misinterpreted the status, believing it to mean that the item was out of stock. (The status actually means that none of the sizes would be a fit for the child.)

• The modal was designed as a transient alert and therefore closed on its own. Users were confused by the interaction

• Users were frustrated and felt they’d wasted their time going through the flow

Iterations & Follow-up Testing

I used the user feedback to inform design iterations, and then user tested those changes.

Pain Point 1 Redesign & Testing

To help users better understand how to enter a brand as a reference point for their child’s size:

• Updates were made to the search bar to make it more obvious the function of the component.

• The “Hide brands you may wear” link was updated with new language and a chevron

• The brand names were restyled as chips

Users understood that the best-fitting brand was being asked as a reference point, and they understood that they could use the search bar or chips to search for that brand. 

Their reaction to this question became more favorable, and user confidence in the size recommendation improved.

Pain Point 2 Redesign & Testing

To help users correctly identify their children’s shoe sizes in the UI:

• Cognitive load was reduced by breaking up shoes into subcategories

• Clues were provided about the age group of the shoe sizes. (Note: The PM and I compromised on the level of specificity.)

Pain Point 3 Redesign & Testing

The majority of users understood the shoe sizes with the guidance of the age groups. Only one user misinterpreted what age groups the new labels represented.

A few users were confused about the Cs within the Converse sizes (similar to the confusion in the previous testing). But with the new age group labels, they had a better understanding of about how big the sizes were.

To generate a more positive reaction from the “Size Not Available” modal.

• The modal was redesign to be dismissed by the user

• The language was updated to better explain the meaning of the result

• Reassure the user that the information they entered can be used for size results. That way, the flow doesn’t feel like a wasted effort.

• Add a footer to create a look consistent with the other modals in the flow

It took some iterations to find the right copy that resonated. In the final round of testing, users understood the actual meaning of the message.

Some were still disappointed, understandably, not to have a size recommendation. However, they also expressed appreciation that the product was honest that no sizes would fit, as opposed to recommending an incorrect size. In fact, 40% of users said that this screen was their favorite thing in the shoe size flow.

Next Steps

After the initial design process was complete, I:

• Worked with UI designer on defining customizations for individual stores

• Worked with PM to define requirements

• Worked with developers as needed (grooming session, Slack chat)