ServiceNow Design Systems

Light and dark theme component library for the Virtual Agent Platform

TYPE

Design System

TEAM

Engineer

Mobile Product Designer

Content Writer

Accessibility Team

DATE

March - October 2022

TOOLS

Figma, Miro, Zoom, Builttools (Internal Tracking Tool)

OVERVIEW

ServiceNow is a cloud computing platform that helps companies manage workflows for enterprise operation.

A component library is an important foundation to create better organizational workflows for the design team and all of ServiceNow users.

MY ROLE

I was tasked with theming the light and dark version of Virtual Agent, addressing accessibility concerns, and creating a consistent component library.

The Opportunity

7/10
Of users said they were impacted by the lack of dark theme

9/10
Wanted the ability to swtich between dark and light theme

Problem

Users are not being as productive in their work when there is only light theme

Users find it hurts their eyes
Want customization
Eyes are tired from looking at screen too long

Discovery + User Research

I scheduled meetings with stakeholders to figure out what information we already have. Here are the steps I took:

First, I asked previous designers, product managers, and engineers whether they had any information on existing components.
Once I compiled all the information, I confirmed with the Now Design System (NDS) team which components should be used.

Color Swatch

I paired closely with the mobile team, to make sure the components and color scheme matched. We followed strong UI guidelines for light/dark theme so that it would adhere to accessibility and design standards.

Light Theme

Dark Theme

WCAG, AY11 Accessibility Standards

I paired closely with the mobile team, to make sure the components and color scheme matched. I followed strong UI guidelines for light/dark theme so that it would adhere to accessibility and design standards. The designs went through extensive review processes with the AY11 team to ensure quality.

Accessibility Concerns

We discovered this link color would work on light but not on dark theme. People with color blindness cannot see this.

Accessibility Fix

I changed the color so it adhere's to the accessibility requirements for both light and dark mode. It is crucial that the link color is legible to all kinds of users.

Seeing Results

80% of users were using the dark theme for more than 2/8 hours of their workday, and 5/5 loved the dark mode feature and agree that it increases engagement.

80%
Using more than 2 hr

5/5
Usefulness

Next Steps

I want to modernize the library as more components are discovered and adhere to good conversation design principles. I want to integrate research into the process so that we are making better informed design decisions.

Email me to learn more!