now experience.png

Design Systems

Building detailed components for ServiceNow's extensive design system library.

Company

ServiceNow

Duration

Q3 2018

Team

Design Manager

Design Engineer

Skills

Visual Design

Accessibility

Introduction

Now Experience is ServiceNow's design system component library. There are hundreds of components, and each one has a breakdown on its anatomy and behavior. 

During my time at ServiceNow, I learned what it meant to be a Visual Designer that strives for pixel perfection. When building a Design System, one must have strict attention to detail and a mindset to solve for all use cases. 

This walkthrough demonstrates the standard requirements components need to have defined before they get approved.

Component Walkthrough

At ServiceNow, I worked on many different components for the design system. This example walkthrough showcases one of the card variations that was approved and submitted to Now Experience. Here is the card I worked with:

Although simple, all components must have all use cases defined. Our standard breakdown entails Anatomy, Usage, Interaction, Truncation and Accessibility.

Anatomy

Components in the Design System library have anatomy breakdowns:

Anatomy.png

1. Card Container: Container for subcomponents

2. Header: Summarizes the contents of the card

3. Status: Status of card content 

4. Content Slot: Container for card content

5. Content Slot: Container for card content

Padding and margins are also defined for pixel perfection:

Pixel breakdown.png
Usage

Usage is defined as: card should be used when differentiating a piece of content from the rest of the page.

Card.png
Usage.png
Interactions

The different states for the card component are also defined:

None: User cannot interact with the card. 

Click: User can trigger an event when interacting with the card. 

Select: User does not trigger an event and can only select the card. 

Truncation

Designs for text overflow states and how truncation would appear:

Truncation.png
Accessibility

All components must also follow accessibility guidelines. Here I have defined the keyboard interactions for this card component: 

Tab: Shifts focus away from the card when it has a click or select interaction. 

Enter or Space: Launches the click or select state of the card.

Interactions .png

Design Review

When designs are polished and finished, the mockups are brought to the Design System Engineering team. After the components are built, the Design System team undergoes an extensive visual design review to ensure all guidelines are fulfilled.

Component Library

After a successful design review, the components are added to the library and are now available to both developers and designers! 

The card component I worked on now contributes to the many card variations that exist in the ServiceNow platform and is available for ease of use and reference.