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.
What's new
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.
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.
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.
Native
Non-native
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.
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.
Body Standard - 14px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at mattis sem interdum.
Do: One primary action, concise copy.
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.