8 days to onboard a client. We asked: what if it took none?
design system
leadership
workshops
Cut component implementation time by 48% — from 1,200 to 620 hours — by leading Veracode's design system initiative as Principal UX Designer, defining UI standards and coordinating 4 designers to modernize the platform's UX across 5 security product lines.
Timeline
Jun 2023 - Sep 2024
Industry
Cybersecurity
my role
Principal UX Designer
PROBLEM STATEMENT
How might we create digital-first, self-serve onboarding experience in PF Expert, designed to guide new clients through operational setup and learning, while reducing dependency on human-led onboarding?
When a platform scales faster than processes
As the Emerald segment grew across Dubai, Abu Dhabi, and the Northern Emirates, so did the burden. CSPs were each managing around 200 accounts. Manual onboarding was taking up to 8 days per client. And the clients who slipped through the cracks published bad listings, burned credits, failed permit validation, and churned.
01 / CONTEXT
The brief was not to make a prettier UI kit. It was to reduce decision debt across a growing product.
Teams were solving the same interaction problems differently: form states drifted, data tables used inconsistent hierarchy, and onboarding flows depended on handoff interpretation. The design system became a way to make product quality repeatable without slowing delivery.
Fragmented patterns
Core flows reused similar ideas with different spacing, labels, and states.
Slow decisions
Design reviews were spending too much time on solved UI questions.
Handoff ambiguity
Engineering needed clearer specs for responsive behavior and edge states.
02 / SYSTEM STRATEGY
01
Foundations
Tokens described how Veraco should feel before any component was drawn.
02
Components
Patterns were built as product decisions: states, rules, variants, and failure modes.
03
Adoption
Docs and rituals made the system easier to use than inventing from scratch.
03 / FOUNDATIONS
Token governance
Color, typography, spacing, and elevation were named around intent, not appearance, so teams could understand when to use each value.
Accessibility defaults
Focus states, contrast pairs, disabled states, and error guidance were included in the component specs instead of treated as late QA fixes.
Documentation model
Every pattern included anatomy, interaction states, responsive behavior, content guidance, and examples of when not to use it.
Adoption rituals
A contribution path, review cadence, and changelog made the library feel alive instead of frozen after launch.
04 / IMPACT
36
core components documented with variants, behavior, and usage rules
2×
faster early-stage interface assembly for recurring product flows
1
shared language for design reviews, QA, and implementation handoff
PF onboarding showed how a case study can make complexity legible through clear problem framing, artifacts, and outcomes. For Veraco, the same structure makes the system feel practical: a set of product decisions that can keep evolving with the teams who use it.