top of page
Screen Shot 2022-10-23 at 9.17.04 PM.png

ServiceNow:

Design Systems

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.

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

Tools

Miro 
Figma
Zoom
Builttools (Internal Tracking Software)

Team

2 product designers
Content writer
Engineering Team
Accessibility Team
 

Duration

1 year
(ongoing iteration)

Problem

How can I create a ServiceNow component library within the Virtual Agent space that comprises of standard components in both light and dark theme?

Solution

By researching existing components and studying the best UI elements to implement for long term use, I can make a solid design system library.

PROCESS

RESEARCH
Compiling Information

 PROTOTYPES
Iterations on Interations

ACCESSIBILITY STANDARDS
WCAG, AY11

NEXT STEPS
What did I learn?

Research

Research

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. ​

Prototypes

Prototypes

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

Screen Shot 2022-10-25 at 12.25.00 PM.png
Screen Shot 2022-10-25 at 12.30.19 PM.png
Screen Shot 2022-10-25 at 12.32.29 PM.png

Dark Theme

Screen Shot 2022-10-25 at 12.27.17 PM.png
Screen Shot 2022-10-25 at 12.27.32 PM.png
Screen Shot 2022-10-25 at 12.30.09 PM.png
Screen Shot 2022-10-25 at 12.34.26 PM.png
Accessibility Standards

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. 

Screen Shot 2022-10-25 at 10.23.05 PM.png

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.

Screen Shot 2022-10-25 at 10.23.16 PM.png
Next Step

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. 

More Projects

ServiceNow: Support Font
Artificial Intelligence Product Design

2_URL or Attach Font.png

ServiceNow: Message Preview
Proactive Messaging & Micro Interactions

Dismiss Popover Behavior 1.png
bottom of page