Global Navigation Update

Roles

Lead UX/UI Designer

Company

YETI Coolers

Duration

6 Weeks

Project Overview

Background

There was a need to explore a new design for the global navigation on site which keeps the top level navigation clean, but also allows an additional layer of navigation segmentation that helps support a growing catalog and product selection.

Pain Points

L2 and L3 only do not allow merch to effectively categorize, and merchandise their products to customers in the nav with the growing catalog
Do shop by color and shop by activity provide value? Should those be put within the product categories themselves?
How can we get customers down the funnel faster, but also provide a clear picture of the products we offer and how we can serve their needs?

Design Objective

Reduce amount of clicks to get to sub category, Categories are expanding need to prepare for future, introduce layers of shopping sooner
Improve organization and reduce cognitive load, possibly offer sub categories as attribute-style options or in dropdown

Organization and Reduced Cognitive Load

The previous navigation design was a drop down from the top bar which had difficult navigation and learnability for users.
With the new design, I led with a side drawer for the desktop version and a full screen takeover for the mobile. The goal was to create easy-to-digest layers for each level of products. By breaking each level into separate steps / pages, we simplified the experience and reduced cognitive load for users.
I reorganized the hierarchy of this experience in several ways but one of the most impactful was moving the "My Account" CTA and language selector to the top of the page. These are two elements that are vital for users to have easy access to.
‍

Visual Development and Guiding

In the process of redesigning the global navigation for the site, I wanted to add more visual elements that could make the experience easier to quickly move through.
One way I executed this goal was by adding product thumbnails next to each categories which allows the users to scan through the listing faster.
I also created tiles at the bottom of each page that hold some of our most popular landing pages such as "Shop by Color" and "Shop by Collections".

Second Iteration

Background

We noticed a trend in global navigations among our successful competitors that was a maximalist take on navigation layout and wanted to test how a navigation like that would perform with our customers. Our stakeholders also really wanted to explore a version that laid out the entire breadth of our product catalog as a company.

Pain Points

L2 and L3 only do not allow merch to effectively categorize, and merchandise their products to customers in the nav with the growing catalog
Do shop by color and shop by activity provide value? Should those be put within the product categories themselves?
How can we get customers down the funnel faster, but also provide a clear picture of the products we offer and how we can serve their needs?

Design Objective

Expose the full catalog of products in the navigation for better visibility and discoverability for product categories for users.
Optimize organization and layout to reduce cognitive overload.

Visual Complexity and Segmentation

For this test, I wanted to add our own touch to a trending design that most of our competitors were doing some sort of version of. I decided to make the background of the drawer low opacity with a blur effect to maintain legibility for accessibility while still adding some spice to the design.

We maintained similarly layering from the first version so that we didn't overload the user with choices of entry points.

Information Hierarchy

Choosing the right font, font size, and font weight was so crucial for the hierarchy of this project. Without proper hierarchy, users would struggle to digest the information and find what they're searching for.
‍
Another challenge was selecting the right hover and selected states as well as iconography for collapsable sections as well as relocating Find A Store and the Language Selector.

Final Conclusion

This test ending up performing so well that it became a permanent addition of the site.
As a next step, I would love to test moving the L1 elements (Shop, Customize, Stories) to the bottom of the wireframe for mobile for easier reach with thumbs.
With this project having a fairly unique container background style, it was a great opportunity to learn more about the dev team's process and what it takes to make something like that.