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:
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:
Usage
Usage is defined as: card should be used when differentiating a piece of content from the rest of the page.
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:
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.
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.