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 roughly 25 applications spanning two product orgs, 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.