Nordstrom Pattern Library

Defining the foundation for Nordstrom's web experiences.

 

Nordstrom, 2013

 
 

Background & Role

 When I first joined Nordstrom, my very first project was laying the foundation of our UX pattern library for our website. After wrapping up our first set of 80+ patterns, I oversaw continued maintenance, enhancements, and evangelism of the library. 

As Nordstrom’s digital platforms continued to grow in size and complexity, the need for documenting our web and app patterns became essential. The lack of said documentation resulted in fragmentation of the user experience for our customers and excessive maintenance efforts for our designers and developers.

Our ultimate goal is to allow our customers to focus on shopping, rather than thinking about how to use the site. We leveraged the capabilities of modern browsers to define styles that are consistent, accessible, and on-brand for an effortless user experience.

We established the specifications and guidelines for every repeatable design component within the Nordstrom digital space. Each pattern included an overview, assets, redlines, and usage guidelines which we made available for anyone designing in our web and app space.

 
 
 

Problem

We began with a side-wide audit of our web experiences in order to identify the elements and components that existed in those spaces. We then determined the four critical weaknesses of our existing web components (I've used primary buttons as an example):

 
InconsistentStyling_v6.jpg

INCONSISTENT STYLING

An effortless user experience derives from a high degree of familiarity. The multitude of design variations hurts our ability to present our customers with a consistent, familiar experience.

AccessibilityConcerns_v4.jpg

ACCESSIBILITY CONCERNS

Accessibility creates a barrier-free shopping experience for all of our users, no matter their needs or abilities. Key concerns were touch friendliness and the lack of distinct focus states (for keyboard-only users).

 
BrandMisalignment.jpg

BRAND MISALIGNMENT

Modern, minimalistic design strengthens the perception of Nordstrom as a high-end fashion retailer. A number of our elements fell short, especially in comparison with other luxury retailers (buttons on the left include: Saks Fifth Ave, Barneys, Chanel, Neiman Marcus).  

static1.squarespace-5.jpg

WEAK VERSATILITY

Versatile design elements allow for greater design options and straight-forward implementation. The lack of flexibility creates restrictive or undesirable design scenarios.

 
 

Process

We defined the core components of each pattern, which we developed into our pattern template. For my first pass of the pattern library, I documented the status, variations, examples, usage guidelines, and specs for every repeatable component on our site.

 
  Before

Before

  After

After

 
 

Solution

This undertaking improved the consistency and maintenance efforts for anyone designing, developing, or testing across our digital experiences.

After drawing a line in the sand, we took the following year to devise a visual theme update to address accessibility, brand, and versatility concerns. The following screens show screen shots of a few of the patterns.

 
Alerts.png
Button.png


ModalDialog.png

TextInput.png