One standard built in flight

Designed while shipping against it, for builders with no design or code background — still accountable for onboarding UX that had to look intentional from day one.

Neutral 50

#F7F7F7

rgb (247, 247, 247)

Neutral 100

#E0E0E0

rgb (224, 224, 224)

Neutral 200

#C9C9C9

rgb (201, 201, 201)

Neutral 300

#B2B2B2

rgb (178, 178, 178)

Neutral 400

#9B9B9B

rgb (155, 155, 155)

Neutral 500

#848484

rgb (132, 132, 132)

Neutral 600

#6A6A6A

rgb (106, 106, 106)

Neutral 700

#4F4F4F

rgb (79, 79, 79)

Neutral 800

#353535

rgb (53, 53, 53)

Neutral 900

#1A1A1A

rgb (26, 26, 26)

Brand Green 50

#F4FCF2

rgb (244, 252, 242)

Brand Green 100

#D7F5D1

rgb (215, 245, 209)

Brand Green 200

#BAEEB0

rgb (186, 238, 176)

Brand Green 300

#9CE690

rgb (156, 230, 144)

Brand Green 400

#7FDF6F

rgb (127, 223, 111)

Brand Green 500

#62D84E

rgb (98, 216, 78)

Brand Green 600

#50B140

rgb (80, 177, 64)

Brand Green 700

#3F8931

rgb (63, 137, 49)

Brand Green 800

#2D6223

rgb (45, 98, 35)

Brand Green 900

#1B3A14

rgb (27, 58, 20)

Heading – 20px

Body Standard - 14px - 15 words. Lorem ipsum dolor.

Heading – 20px

Body Standard - 14px - 15 words. Lorem ipsum dolor.

#62D84E
#1F2421
green-500
neutral-900
bg-primary
text-default

What's new

Feature 01
Feature 02
Feature 03
Feature 04

Heading Large - 20px

Body text - 14px. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel risus commodo.

Body Small - 12px - 12 words. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading Small Bold - 14px

Body Small - 12px - 12 words. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading Large - 20px

Body Standard - 14px - 15 words. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at mattis sem. Interdum et malesuada.

Primary
LabelLabelLabelLabelLabel
Secondary
LabelLabelLabelLabelLabel

Role

Product Designer

Team

Adoption specialists

Duration

8-week initial build; ongoing

Tools

Figma, HTML, CSS, WalkMe

TL;DR

I was given the mandate to unify a fragmented adoption experience across roughly 25 ServiceNow applications spanning two product orgs — built for five adoption specialists with no design or engineering background, working from PM specs inside WalkMe's no-code builder, with no runway to pause delivery while I built it. Pre-built component variants removed the need for design judgment on common cases; a companion usage guide taught builders to recognize when a case didn't fit and needed to come back to design.

Impact

Measured across the five builders who used it daily, the system replaced ad hoc guesswork with a repeatable standard, without requiring any of them to learn design or code.

150%increase in development lifecycle efficiency
20%reduction in inconsistent shipped experiences
1unified standard across every application we touched

Three constraints I inherited

The fragmentation

Adoption experience components existed across 2 multi-app platforms, but with no shared visual standard.

No runway to pause

PMs had active roadmaps, builders had live projects — building never stopped, so the method had to be worked out as I went.

Designed for a different expertise

Adoption specialists, fluent in WalkMe's no-code builder, shipped these experiences. The system had to work with that fluency, not around it.

Design

What builders chose, learned, or never touched

I structured the system in tiers — primitives, components, and, rarely, patterns — not for scalability's sake, but to shape our design and builder partnership. Primitives stayed locked in the code I owned; builders worked one level up, choosing from a pre-built library of components, and only rarely combining them into larger patterns.

Typography was the one tier builders learned rather than had locked down for them. A detailed usage guide I put together empowered them to make that call themselves — recognizing which type standard, ServiceNow-native or not, applied to whatever they were building.

Value
#62D84E
#000000
Primitives
green-500
neutral-900
Semantics
bg-primary
text-default
Applied

Native

font-family: "ServiceNow Sans", "Gilroy", sans-serif;

Non-native

font-family: Arial, "Helvetica Neue", sans-serif;

Owning the code layer builders couldn't touch

WalkMe's defaults didn't give us control over HTML structure, and unlike an engineering team, builders had no way to patch a broken component themselves. I wrote the HTML and CSS for every component myself — not a stretch assignment, but the only way to guarantee nothing broke downstream, because no one else could fix it.

Markup
<div class="wm-outer-div wm-shoutout">
<div class="wm-title">test</div>
<div class="wm-content">
<div class="wm-template-text"></div>
<div class="wm-blue-btn">Action</div>
</div>
</div>
Before
<div class="dap-dialog">
<div class="dap-dialog__nav">
<div class="dap-dialog__nav-title">What's new</div>
</div>
<div class="dap-dialog__content">…body, actions…</div>
</div>
After
Styling
/* baked once, on this element */
style="
background-color: rgb(17,117,224);
border-radius: 8px;
padding: 8px 32px;
box-shadow: rgba(17,117,224,.25) 0 2px 4px;
"
Before
/* !important outranks WalkMe's inline styles */
.dap-btn--primary {
background-color: var(--dap-bg-primary) !important;
border: 1px solid var(--dap-border-primary) !important;
border-radius: var(--dap-radius-full) !important;
padding: var(--dap-space-sm) var(--dap-space-lg) !important;
}
After

Pre-built components, self-serve documentation

Documentation did two jobs. Pre-built variants covered the common cases, so most builders never had to make a design decision. For the rest, a usage guide taught just enough judgment to recognize a mismatch and flag it to design — self-serve by default, with a built-in escalation path.

Heading

Body Standard - 14px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at mattis sem interdum.

LabelLabel
20
20
8
16
R 16
24
Heading✕
Label

Do: One primary action, concise copy.

Heading✕
LabelLabelLabel

Don't: Competing CTAs and a wall of text.

The system as infrastructure

When it shipped, adoption specialists with no design or engineering background could build on-brand experiences independently — and knew when a case fell outside the system and needed design input. The goal was never builders who worked like designers. It was a system that made judgment unnecessary for the common case, and legible for the rest.

/Cross-Platform Design System