The Challenge

When I arrived at Express the main site navigation had some major problems. It didn’t fit customers mental model of how an e-commerce site navigation should work, it was not following established interaction patterns.

 

The problem

On the majority of retail sites, hovering (on desktop) on “women” opens a “mega menu” that lists all the categories and subcategories of women’s clothing. Express’ navigation broke that convention, but not for any obvious benefit to users. With Express’ navigation you had to click on Women, this would take you to a women’s landing page that had hard coded categories displayed in a bar across the top of the page. So if you came to the homepage looking for jeans, you would see various promotions for both men and women.  If the user was lucky, they might see an ad for jeans. If not, you would click on your gender, it would take you to another landing page (this time with only ads for your gender but still no guarantee that jeans would be present) and click on jeans in the navigation-like bar at the top of the page. The problem was even worse for mobile where there was no bar atop the page, only selections for gender. That’s right, if you were on a mobile device and there wasn’t an ad for jeans there was no way to get to jeans.

The old design. Though it may look like it, that grey bar at the top was not a menu. It was hard-coded on the page.
 

Taxonomy

This first thing I wanted to do was fix the site taxonomy. There was no structure to the way products were presented. For example, the suits (“because some guys shop by full suit”) and suit separates (“because some guys shop by suit separates”) category pages contained the same information.

The existing site taxonomy also posed a problem. If there was a promotion that applied to multiple categories it appeared as a sub-category in all applicable categories. That meant that if there was a sitewide sale, there would be a 20% off sub-category in tops,  a 20% off sub-category in bottoms,  a 20% off sub-category in shoes, and so on. We needed a system where pure categorical navigation (I want a shirt, take me to shirts) existed alongside, but not encumbered by, discount-motivated shopping (I want to buy something on sale, show me all sale) as well as departments based on the brand’s unique POV in the world of fashion (Express feels strongly about faux leather, here’s the faux leather section).

Besides customer facing friction, there was a major issue that was causing unseen impact across the site. Because there was not long-term strategy for navigation, categories were being created and destroyed at random everyday. Every time we sold out of a product (for example a seasonal item like swimwear) the empty category would disappear from our site taxonomy, until more product appeared next season to fill it. This was a huge SEO problem because that meant we were only getting crawled for that category when it was live, not all year round.

To come up with a strategy that not only made our site easier for shoppers to navigate, but also showcased our assortment in the best possible way, and gave us the SEO value we needed, I pulled together a team of SEO analysts and merchandising specialists to establish consistency and standards, as well as a taxonomy that worked year round no matter what product was currently in the spotlight.

 

Redesign

This main objective was to give users a way to navigate to the department and category of their choice (eg. women’s jeans) easily and efficiently across all devices. I came up with a concept where we would have pure categorical shopping navigation (women, men, sale) as well as discoverable shopping departments structured around a theme (shops which would focus on trends and key items, and lookbooks with would broadly feature seasonal outfitting). Our data showed that customers really needed the pure categorical shopping so that got the most prominent placement (top of mobile devices, on the left on desktop screens).

Here you can see the wireframes of the design...
 
...and the final design as it appeared at launch
 

Top-Down Design on Mobile

Most importantly, since at the time 60% of Express’ total traffic was coming from mobile phones, I designed the navigation with ‘mobile first’ in mind. We chose to go with a top down design because it was the most painless way to implement a navigation interaction across the multitude of devices our site was accessed on. “Off-canvas” side navigations may have been a well understood pattern among users, but programming them to work seamlessly across many different device types and viewport sizes was a constant headache.

We chose to go with a top down navigation that may not have been so popular stylistically, but easily fit into the user’s mental model of how a navigation menu should work and saved us a ton of efficiency in development.Virtual usability tests proved that users found this design much easier to navigate. We also added a feature when the user opened one category accordion the navigation would autoscroll up the page to optimize how many subcategories the user could see and more easily find what they were looking for.

 

Launch & KPIs

Right off the bat we saw a huge improvement in the usability of our navigation, both on mobile devices and on desktop screens, through virtual usability tests. We also saw a significant uptick in customer satisfaction (as reported by our partner ForSee) from a 73% approval rating the month before the navigation redesign, to 80% the month following the redesign. Customer complaints regarding the difficulty of finding what they were looking for virtually disappeared after the new design launched. And while it’s difficult to draw a direct correlation between and increase in overall site sales and the new, easily-navigable navigation, that has been a consistent trend since the design went live. I’d like to think the removal of several friction points in the path from landing page to desired product has been a not-so-insignificant part of this success. :)

 

Update

As with all good designs, we are constantly iterating to improve the experience and make it easier for shoppers. After 9 months, the biggest change we’ve made to the navigation is adding category headers and moving product subcategories into logical grouping so shoppers can easily scan to find what they are looking for.


Role: User Experience Lead

Project: www.express.com