The Problem

Our navigation system was a couple of years old and in need of a refresh. In addition to needing some basic updates to incorporate content areas that had been added since the last full redesign, it was just kind of a big chunky boy that took up a lot of visual height when in use. Our goal was to visually streamline the nav while making it a more effective tool for discovery.

The Process

I contributed UI design and general razzle-dazzle to this project as part of a three-person prototyping team consisting of myself, a UX designer, and a front-end developer. We met a couple of times a week to share ideas, critique deliverables, consult with stakeholders, etc.

The Product

Here she is! I extended the look of our placeholder mobile nav across the site, phasing out our large seal-of-approval logo in favor of the more lightweight and versatile logotype. A two-tiered navigation bar exposes our top verticals by default and encourages exploration of areas of the site that were previously buried.

Colors & Typography

We'd already been using Montserrat, Google Fonts' Aldi store brand version of Proxima Nova, for H2s; I extended its use into navigation and sorting tabs sitewide. Our highlight/active state color is a cheeky salmon pink to contrast with the brand blues that are all over the site.

Mobile Icons

I gotta be honest: these are some of the first icons I ever made, and it shows. I feel the same way about them as I assume my parents do about me, which is that they embarrass me every day they're out there in the world but ultimately you have to love and support your firstborn.

What Worked

This was a pretty big hit, significantly increasing traffic to high-value verticals and areas of the site that previously required some digging to get to. The streamlined architecture of the new navigation bar also made it easier to run temporary promotions, add seasonal menu items, and execute tests via Dynamic Yield.

What Haunts Me

I think this project was kind of a victim of its own success - it worked well enough that it was hard to get support for further iteration. The mobile nav in particular bugs me because it takes up a good quarter of the screen on my dinky iPhone SE; my hard drive is littered with half-baked redesigns that just axe the icons altogether.

My other Hall of Shame thing here is the millennial-pink active state color, which was a total case of me picking something I thought looked cool instead of spending five minutes thinking about our users, who tend to skew older. It doesn't meet accessibility standards, especially at small sizes, and I think it's more likely to read "ERROR" than "Glossier pink" to the average Brad's Deals subscriber. Sad!