01Problem
The Challenge
Multiple product teams at Serpro were building inconsistent interfaces, leading to duplicated effort, poor accessibility scores, and a fragmented user experience across services.
Back to work
🎨 UX/UI💻 Frontend
Design SystemAccessibilityWCAGFigma
Serpro Design System
Building a unified visual language for enterprise-scale government products.
Role
UI/UX Designer
Impact
40% reduction in design-to-dev handoff time and a 30% improvement in accessibility scores across products
02Process
How I Approached It
Kicked off with an audit of 6 existing products to identify inconsistencies. Ran stakeholder workshops with PMs and engineers to align on token structure. Defined a 3-tier token system (primitive → semantic → component). Built components in Figma and documented usage patterns in an internal wiki.
03Solution
What We Shipped
A fully documented component library covering 60+ components, a semantic token system, and a Figma-to-code handoff workflow using annotations. Included WCAG AA compliance for all interactive elements.
01
Token Architecture
Primitive, semantic, and component-level tokens mapped in Figma.
02
Component Library
Buttons, forms, modals, and navigation components in light and dark variants.
03
Documentation
Usage guidelines, do/don't examples, and accessibility annotations.
04Impact
Results
1
60+ reusable components delivered2
Adopted by 3 product teams within 2 months3
40% faster design–dev handoff4
WCAG AA compliance across all core flowsInterested in working together?
Let's build something great.