Header Modernization

Nordstrom • 2016

 

Introduction

In 2016, we were eager to re-envision a modern experience for our digital shopping experiences. Our header was identified as the first priority on our list of components to update. After participating in the early discovery phases, I led the UX effort to execute and implement the final designs for the new adaptive header on desktop and mobile web.

 
 

The Problem

While our brick and mortar stores continued to go through spectacular remodels, the online experience lacked the same level of attention. The header of the website has remained largely unchanged for the past decade (besides the continuous addition of marketing links), resulting in a bloated, static, and out-dated experience.

 
Old stores: dull, cluttered, apathetic.

Old stores: dull, cluttered, apathetic.

New stores: minimalistic, clean, engaging. 

New stores: minimalistic, clean, engaging. 

 

The Approach

Our goal was to visually overhaul the header to align with the future vision and aesthetic of Nordstrom's shopping experiences: both in-store and online. Key objectives included reducing the height and removing distractions in the header, while introducing flexibility of a responsive layout. We achieved our target deadline by launching prior to holiday in 2016.

 
 

Research

Lorem ipsum something about the brick and mortar stores. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sagittis neque et venenatis. Praesent nunc ante, posuere consectetur neque non, iaculis imperdiet nibh. Nam tincidunt cursus nulla, sit amet gravida tellus pulvinar eu. Aenean hendrerit nisl non arcu imperdiet, sed blandit nulla hendrerit.

 
 

Bloated

Our header is 247px tall, with 14 elements – the largest and most out of all our competitors.

Problems_Bloated.jpg
 

Static

Our header is fixed to 940px in width, limiting our ability to move toward a responsive future.

 

Dated 

free? fonts and UI elements damages the customer's perception of our site. Something about lagging behind the look and feel of the stores.

 
 

2

Concept Car


Emily, one of my UX peers, completed an extensive amount of competitive research as a foundation for the project. We partnered with our Digital Creative partners (they produce our marketing assets) to come up with hypothesis based upon the research:

CORE HYPOTHESIS

  • We believe that the site should embrace the design direction of our flagship stores.
  • We believe the concept cars should explore ways to integrate personalization for our customer.
  • Reduce elements and possible distractions as customer becomes more invested and intent on purchasing.

Armed with our hypothesis, each designer went away and came up with an individual "concept car" (our vision for the future), which we presented to our stakeholders the few weeks following. The following is my personal concept car for our desktop site, mobile site, and mobile app:

 
 

Desktop

Search.jpg
 

Mobile Web

 

App

 
 

3

Next Steps


After completing our individual concept cars, we gathered our business and tech partners to present our concepts. We noted themes and concepts that we liked, and I'll be working closely in the coming months to bring our future vision to life.

 
Our concept car review with business and technology partners.

Our concept car review with business and technology partners.