Lead UX/UI Designer
YETI Coolers
2 Weeks
In preparation for the growing catalog, we needed to explore a way to expose our product categories more effectively and make room for the future product expansions. I also saw this as an opportunity to redesign two flyouts that are linked in our navigation.
.gif)
I started this project out by moving our YETI logo to the top bar and restyling our product category links to be a lighter font which created more design real estate to fit more product category links. We took some of the most important links from our Customer Support flyout and moved them into the that top navy bar of the navigation next to our language selector. I also did a character count study to give our Merch team a good gauge on what they could fit and set min and max widths for our search bar for all the different viewports our desktop version would appear on.
Our old customer flyout lacked hierarchy and brand voicing
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.
.png){kind=small}
