Global Navigation Update

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 (Current Navigation on YETI.com)

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, my goal was to add our unique perspective to a design trend that had become quite prominent among our competitors. Rather than simply following the trend, I wanted to infuse our own style while still aligning with what users were becoming accustomed to. I chose to implement a background for the drawer with low opacity and a subtle blur effect. This design choice not only helped create a modern, visually appealing look, but it also ensured the content remained legible and accessible, meeting key accessibility standards. The blur effect added a sense of depth and sophistication, while the reduced opacity prevented the background from overpowering the content, maintaining the focus on the primary information.

A major consideration during this iteration was to preserve the existing layering structure from the first version. I didn’t want to overwhelm the user by introducing too many potential entry points or visual distractions. By keeping the layering consistent, we maintained a smooth, intuitive flow that didn’t confuse or overwhelm the user. The goal was to create a seamless experience that felt fresh and engaging, without complicating the navigation. This balance of creativity, accessibility, and usability was crucial in ensuring that the design was both functional and visually striking.

Information Hierarchy

Choosing the right font, font size, and font weight played a pivotal role in establishing a clear and effective visual hierarchy for this project. A well-structured hierarchy is critical for guiding users through the content effortlessly; without it, users would likely struggle to process information and locate what they’re searching for. I carefully considered the balance between readability and emphasis, ensuring that the most important elements stood out while still maintaining a cohesive flow across the design.
‍
Another significant challenge was designing intuitive hover and selected states, which are essential for providing users with clear feedback as they interact with the interface. The interaction states needed to feel seamless and responsive to enhance the overall user experience. Additionally, I focused on selecting the right iconography for collapsible sections to make them easily recognizable and accessible, improving the navigational flow.

Lastly, I rethought the positioning of key elements like the 'Find A Store' and 'Language Selector.' Both features had to be relocated to ensure they were easily accessible but didn’t overwhelm the layout. The goal was to improve their visibility while maintaining a clean and user-friendly design.

Final Conclusion

This test ending up performing so well, with $10M in sales and 8% increased conversion rate, 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.