Web Pattern Library 

Nordstrom • 2013–2015

 
 
 

1

Introduction


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

 

The Problem

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.

 

The Approach

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.  

 
 
 

2

Identifying the Problems


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).  

Weak Versatility

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

 
 

3

Creating the Library


Before I took on this project, a number of patterns had already been documented on a custom-built website. A company-wide shift to adopt Confluence as our primary collaboration tool prompted us to re-examine our options for housing the pattern library, and we ultimately decided to choose Confluence as our main knowledge share for the UX pattern library. The ease of maintainability simply outweighed our need for customization.

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. 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.

 
 
Artboard 2.jpg
Artboard 3.jpg


Alerts.png
Button.png
 

Checkbox.png

Dropdown.png
 

ModalDialog.png

Popover.png
 

RadioButton.png

TextInput.png