Nordstrom Header

Aligning the header with the future vision and aesthetic of Nordstrom’s omni-channel shopping experiences.


Nordstrom, 2016

 
 

Background & Role

In 2016, as our brick and mortar stores were going through spectacular remodels, we also had the opportunity to provide our customers with beautiful experiences – no matter their shopping channel. We were eager to envision a modern experience for our digital shopping experiences – and the header was identified as the first priority. 87% of new customers come through the website, so we are the first touch point and the opportunity was huge to make a good first impression.

Why start with the header? It’s the primary component of the customer shopping experience – composed of the primary navigation, search, shopping bag, check out, and your account links. It was also the unlock for our future responsive vision.

While there were lots of designers collaborating on the initial discovery and project definition phases, I solely led the effort to plan, execute, and implement the new header on desktop and mobile web.

 
 
 

Problem

The header of the website has remained largely untouched for the past decade (which is a long time in internet years). The only change as been the ongoing addition of marketing links –  leaving us with a 247px tall header with 14 separate elements (the most and tallest compared with the 24 other competitors we researched).

The marketing clutter, unresponsive width, and dated interface patterns distracted our customers while making the entire website feel static, overwhelming, and out-of-touch.

 
NHeader_Problem.jpg
 
 

Process

Discovery and Definition

Emily, one of my UX peers, led an impressively comprehensive research study as a foundation for the project. We gathered data from our research teams (what’s being clicked on?), and conducted an in depth competitive analysis of 24 other e-commerce websites.

We then partnered with the Creative Team to summarize the research into several hypothesis:

  • Less, but better: reduce distractions and increase value of important elements by removing things that are non-essential.

  • Embrace the design direction of our flagship store.

  • Provide dynamic and personal shopping experiences.

 
 What's being clicked on? This visualization helped us make the case for stripping away marketing.

What's being clicked on? This visualization helped us make the case for stripping away marketing.

 
 

Concept Cars

How do you inspire an entire organization – the leadership, business, engineering, and multiple design teams – to be excited and aligned on a unified vision?

Enter, concept cars.

Armed with the hypothesis from our research, each designer came up with their best take on what the header could be for the future of Nordstrom’s digital shopping experiences. We narrowed the scope to home page, fly out navigation, category results page, search, product detail page, mini bag, and checkout – but we designed for all of our digital platforms (desktop, mobile web, and app). 

 
 My personal concept car

My personal concept car

 
 

Each designer was given two weeks to work on their concept car, and soon after we gathered leaders from all parts of the business to attend the presentation. This process served to get us buy in from stakeholders, cultivate the working relationships between cross-functional teams, and sift out common themes from the different designers.

 
 A snapshot of my peer's concept cars

A snapshot of my peer's concept cars

 
 

Design Sprints RollOut

Now that the entire company was bought in on our mission, I had my work cut out for me as I was personally assigned to lead the project to the finish line. My first order of business was to take the 7 different explorations and distill them down to a single, “master” design.

A few of the stronger, common ideas that influenced my final design:

  • Vastly reduced header height, stripping away marketing and consolidating checkout, shopping bag, and account links into fewer entry points.

  • Contextual header that focuses down the further down you get in the shopping funnel (example: just the logo in checkout).

  • Visually clean, minimalistic, and airy.

  • Flexibility as the viewport becomes wider.

Working backwards from the master design, I devised phased approach to steadily roll out the new header. This would minimize risk for the business, ease the customer into the changes, divide engineering work into bite size tasks, and give design time to work through the details.

 
 My timeline for the design sprints. Adding a couple weeks for testing (pink) proved to be invaluable.

My timeline for the design sprints. Adding a couple weeks for testing (pink) proved to be invaluable.

HeaderIterations.jpg
 
 

Rollout 1: It took some convincing for our marketing partners to give up their marketing placements, but we made it a point that cleaning up the clutter was absolutely essential for the new header.

  • Marketing placements consolidated to one banner.

  • Account links organized into one entry point.

  • Header responsive up to 1440px.

  • Marketing banner moved to top on mobile.

 
 Surprising number of use cases to spec out for a seemingly simple menu.

Surprising number of use cases to spec out for a seemingly simple menu.

 
 

Rollout 2: Out of the 24 competitors we researched, we were the only e-commerce site with a checkout button exposed outside the mini bag. While I was confident we would be safe hiding the checkout button in the mini bag, we A/B tested it (along with several variations) to be absolutely sure. We found the second design to be most successful with no dip in our numbers.

  • Shopping bag and checkout consolidated to same entry point.

  • Mini bag visual improvements.

  • Updated iconography on mobile to reflect lightweight aesthetic.

 
Minibag.jpg
 
 

Rollout 3:

  • New typeface, Brandon Text, rolled out on desktop and mobile.

  • Predictive search menu visual improvements.

  • Top navigation fly out menu aligned to updated grid.

  • Header reduced to one row on mobile.

 
 Before and after of fly out navigation on new grid system

Before and after of fly out navigation on new grid system

 
 Before and after of predictive search menu

Before and after of predictive search menu

 
 

Final Rollout:

  • Top navigation links reduced to fit header on one row.

  • Banner restricted to one row on mobile.

 
 
 

Solution & Impact

We hit our deadline and launched the final header prior to the holiday season in 2016. Through each step in the process, we moved forward methodically by testing and validating our hypothesis, and in the first 90 days this feature netted the company $2.1m.

 
Nordstrom_HeaderMocks1.jpg
Nordstrom_HeaderMocks2.jpg
Nordstrom_HeaderMocks3.jpg