Nordstrom UX Design Standards
Nordstrom, 2012 – 2014
When designers and developers are forced to solve a constant stream of small problems, they're denied the opportunity to solve any of the big ones.
A lack of consistency in a complex user interface creates all sorts of problems for the customer, particularly in the fostering of an accurate conceptual model. It can create brand problems, diluting messaging and presenting the appearance of a lack of discipline or focus.
But disarray in an interface's design creates process and people problems too. Think about it: if you're a designer creating a button and there's no common understanding of what that button should look like, you need to make the following decisions:
How big is it?
What color is it?
Does it have rounded corners? What's the radius?
How do I correctly style the label?
Does it have hover and active states? What do those look like?
...every damn time you design a button.
The developer has to ask those questions too. Same goes for figuring out how big a component should be on a page, or what typeface to select for a headline, or what color the background should be on that error message. You see where I'm going with this.
If designers and developers are caught up with making these small decisions every time they need a button or a headline or an error message, how will they ever have the time or energy to effectively tackle larger, more interesting problems?
Q:
How do you focus the efforts of well over a hundred designers and developers to create an intuitive, consistent web experience?
When I joined the team in 2012, I spent some time exploring the live site, the design archives and what little documentation existed, trying to get my head around the organization's design language.
While there certainly was a style, it was clear that with the recent, rapid growth of the design and development teams, focus had been lost somewhere along the way. Some of the biggest issues I noted:
Page layouts had no common structure for content or spacing
Design patterns were rendered in dozens of minute variations across the site
Typography was a free-for-all, with over 40 size and weight combinations of Arial, Verdana and Georgia, in no semblance of a hierarchy
Color decisions, particularly the selection of grayscale values, appeared to be left to the individual designer
Any large design organization faces these kinds of problems to some degree. Why not take care of them now?
We resolved to work across the organization to establish a shared vision and framework for our design.
The goal was to deliver a more stylish and intuitive experience for our customers, while also making us more efficient in our jobs.
I divided our approach into four themes:
1. Grid-based layouts
Two fixed-width grids
We devised two page grids and applied them to the existing templates, bringing a much-needed visual harmony and rhythm to the site. They also unlocked the ability to start sharing assets across page templates, a process change that profoundly affected the creative team's ability to deliver at scale.
Page grids also provided an easier way for our design teams to communicate about design intent. We could start talking in columns rather than pixels. Previously complex tasks, such as managing text line length for optimum readability, became simpler.
We tried to have only one grid. But due to some constraints imposed by the site's local navigation scheme, we did some experimentation and landed on two that would account for all the possible scenarios in the current design.
2. Universal design patterns
Remember the button problem? Time to tackle it.
We conducted an end-to-end audit of the current experience, and found a staggering amount of variation across common design patterns. 23 button styles!
It wasn't just buttons, of course. There was little consensus within or amongst teams around how drop-down menus, carousels, accordions, filters, pagination, and many more patterns should look or function.
Over the course of about nine months, I worked with multiple design and development teams to establish the "one true pattern" for every repeatable component on the site. The specifications, guidelines and advice for when to use for each of these patterns were documented in a pattern library so that our new-found consensus could be accessed by anyone tasked with designing and building interfaces across our experiences.
We designed and documented over 80 design patterns across three experiences — desktop/tablet, mobile web and mobile apps. The pattern library is housed on the company knowledge share and is available to anyone on the network.
Carefully crafted iconography
The consistency problem was perhaps most apparent when looking at the way we handled iconography.
Iconography can be a powerful tool for distilling information down to an atomic visual unit. But it only works if a concise and thoughtful visual language governs their forms.
Working with a new brand style developed by the creative strategy team, we audited and redesigned every icon on the site.
We designed three separate sets of icons, to be displayed at three different sizes. As each set got smaller, we removed detail to preserve the clarity and meaning of each icon, and adjusted line weights to create a consistent feel across the sets. We also decided to deploy the icons as SVGs rather than bitmaps, ensuring that they'll look their best on high resolution displays.
3. Simplified typography
Fewer type styles = more fun
Before we started this project, there was precious little agreement as to what type style to use where, and therefore no established rules. I don't know about you, but I think page layout is a lot more fun when there are a couple rules to follow.
Gaining consensus on this greatly simplified type hierarchy was tough, and updating the type styles in production was no joke, for real. But the effort has paid off, dramatically cleaning up the visual presentation for the customer while also simplifying typesetting tasks.
4. Vision-accessible color palette
A simple, seeable color system
From the start of this effort, one of our principles was to design for accessibility using W3C's Web Content Accessibility Guidelines, which ensures that people of all abilities can access and use content on the web. Color can be one of the trickiest guidelines to follow as it requires text to have a 4.5:1 color contrast ratio to its background, taking some of the subtlety out of the application of color.
But out of constraints come good design, and we developed an accessible palette of just 14 colors to be used throughout our experiences:
Using a color contrast calculator, I put together a precise set of values that provides the designer as much flexibility as possible while still meeting W3C's guidelines.
