Design Portfolio Piece

Nielsen Global Design System

In mid 2021 I began designing a new, from scratch, design system for Nielsen. It was exciting because the challenge and the opportunity were both clear from the start. Nielsen has over 40 web applications on at least 5 different development platforms. This complexity hurt product quality and hampered designer's ability to create. There was a mandate from UX and Product to consolidate the UI components and patterns into a single design system. This new system would fuel a new application suite, Nielsen One, and eventually the whole organization. That is how Nielsen's Global Design System (GDS) came to be.

In addition, Nielsen's marketing team was in the middle of a secret brand overhaul. I joined those branding conversations to help make a few key decisions. I convinced the team to choose Inter as Nielsen's core typeface for marketing and interfaces. Inter provided sharp clarity, flexible styling, and a wide language support that we required. I also helped educate the team about potential accessibility issues with the vibrancy of their new colors. We made the necessary tweaks and created color palettes that would serve both the marketing team and UX team.

Live Site  ➡️


Cover photo of Nielsen GDS


Foundations

I've found that the more care you put towards building the smallest core pieces of a design system, the better results when scaling the system. The choices for token naming, color scale, line heights, spacing, and even writing standards are all incredibly important. These tiny choices cascade and reverberate throughout the system as it grows. If done well, they become a firm foundation for the system to grow upon. If done poorly, apps are more likely to devolve into standard-less one offs with abandoned components.


Design Principles

Nielsen's core values are inclusion, courage, and growth. Those values drive the company, but I wanted to craft values that were specific to the design system. From our company values and interviewing our designers and customers, I created these core design principles for GDS:

  • Built For Our Users
  • Always Accessible
  • Consistency not Uniformity
  • Inspire Trust & Confidence
  • Strive for Elegance
  • Efficient for Designers & Developers

These values are important to me because they reflect who I am and the systems I strive to create.

For more information, visit the Design Principles on GDS.


Design Tokens

Design tokens are an abstract, human-centered way to store variables. Tokens are useful because they provide consistency and are easier for humans to reference than hard-coded values. I've found that tokens become a shorthand for talking about the design system. They make it easier to speak about design decisions. For example, saying "Do you think that blurple-300 or blurple-400 looks better?" is much easier to understand than "Do you think that #C2BCFB or #958CF8 looks better?"

GDS includes tokens for UI colors, gradients, reporting colors, font family, font size, font weight, line height, letter spacing, spacing, layout, borders, radii, shadows, and elevation. Our color tokens also have a second semantic naming layer to guard against changes in the future. Those semantic names are neutral, primary, secondary, tertiary, accent, success, danger, warning, and highlight.

Table of color tokens

Table of color tokens

Tables of typography and spacing tokens

Tables of typography and spacing tokens

Shadow tokens guidance and documentation

Shadow tokens guidance and documentation

Color

The 2021 rebrand brought a new vivid and rich set of color palette to Nielsen. Because of our emphasis on accessibility, the GDS team worked with the Marketing team to expand Nielsen’s brand colors to the 11 scale interface colors available in GDS. These colors better fit the needs of UX designers and product development.

All the components are built to work in both light and dark mode. I saw this as an important accessibility issue to be addressed. To do this, I optimized the colors at the lighter and darker ends of the scale. The shades at the top and bottom give us excellent contrast and differentiation for our UI elements. When we create the dark mode of a component, we invert the color scale and tweak as needed.

GDS has nine colors: gray, blurple, aqua, eggplant, blue, green, red, orange, and yellow and 11 steps for each color. Including the colors white and black gives us a total of 101 interface colors. These colors are used throughout every part of Nielsen applications. The lone exception is reporting colors. I created a separate set of reporting colors to be used in data visualizations.

GDS core colors on light mode

GDS core colors on light mode

GDS core colors on dark mode

GDS core colors on dark mode

For more information, visit the Color page on GDS.


Typography

During the 2021 Nielsen rebrand, I helped convince the organization to choose Inter as the typeface for Nielsen's identity and products. Inter has excellent support for many Cyrillic, Greek, and Latin languages and will be used in all languages it supports. If Inter doesn’t support a language, the fall back is Google’s Noto Sans. Noto Sans has the most comprehensive language support of any typeface ever created. This makes it an excellent fallback for Nielsen products across the world.

Typescale sizing with examples

Typescale sizing with examples

Features

I created an 11-step type scale to give our designers ample options for building interfaces. Our base size is -size-500, which is 16px. These variety of sizes is not tied to specific headings. This something I see commonly and I find too inflexible. I prefer the typography scale be divorced from semantic headings so that pages can be more creative with how they use typography.

Typography examples and OpenType feature showcase

Typography examples and OpenType feature showcase

GDS has three font weights, Regular, Semibold, and Bold to help provide appropriate contrast between text. In the future I'd like to explore using the Variable Font version of Inter. It opens up a variety of possibilities for providing subtle font weight differences.

Inter has excellent support for OpenType, an advanced set of typographic features. We utilize slashed zero, open digits, and monospaced numbers in our applications. Doing this maximizes legibility and reduces the need for multiple typefaces in our applications.

For more information, visit the Typography page on GDS.


Accessibility

Nielsen's job is to count and include everyone. For this reason, all of the GDS foundations, components, and patterns meet WCAG 2.2 AA standards for accessibility on the web. By adhering to this standard, it raises the bar for Nielsen products and includes as many users as possible.

Accessibility requires focus and direction. I tried to focus our efforts on these key five areas:

  • Including proper UI states for all components
  • Ensuring proper color contrast for all text and elements
  • Creating titles, headings, and navigation with proper semantic structure
  • Using proper input assistance for instruction, errors, and submissions
  • Supporting assistive technologies like screen readers and voice over

Examples of common UI states in GDS

Examples of common UI states in GDS

Documentation about color contrast in GDS

Documentation about color contrast in GDS

For more information, visit the Accessibility page on GDS.


Components

Writing in progress. Coming soon.


Patterns

Writing in progress. Coming soon.