Hat and Apparel Size Guides

YETI Coolers

Roles

Lead UX/UI Designer

Company

YETI Coolers

Duration

14 Weeks

Project Overview

Background

The previous size guide had poor layout with essential information being clipped by the container it lived in. The organization of information felt confusing and hard to navigate to our users. Many customers ended their shopping journey because of the lack of guidance around size and style.

Design Objective

Before

Apparel Size Guide

The main priority for this project was improving the user experience around reading the correlating size chart so I redesigned the chart layout to fit mobile as well as the desktop drawer. Part of paring down the original chart was removing "inches" from the chart and converting that into a toggle at the top right corner. This left some whitespace where we could highlight valuable information like free returns.
One ask from the stakeholders was to add a style guide to this drawer to provide vital information to customers for the decision-making process. To prevent cognitive overload, I divided this drawer into two easy-to-navigate tabs.
I partnered with the brand design team to get the model illustrations to nailed down for this tab and added a tile at the bottom to guide customers on how to take their own measurements. I sectioned out this part to make it easier to digest.

Hat Size Guide

The size guide for hats was a very unique challenge since it was more about the fit design than measurements. In order to communicate the difference in fits, I designed icons for each difference hat style (see below) to highlight the part of hat that the description is referencing.

Next Steps

Final Prototype

Final Prototype