Design Systems · Internal Tooling

The system nobody asked for — and the 30% it bought back in engineering time

Engagespot was shipping faster than its interface could stay consistent — a different button here, a slightly-off pink there. This is how I turned that inconsistency tax into infrastructure.

UX Designer, Design System·3 months·Solo, with Engineering & Product·Figma
How I approached it

Audit before you design. Build infrastructure, not decoration. Validate every decision with engineering before it ships.

UI AuditWCAG AA/AAAAtomic Design Lean UX (Think–Make–Check)Component ArchitectureCross-team ValidationMCP-Connected
Engagespot Design System cover
The system's cover slide.

The tax nobody had budgeted for

I audited every live screen and catalogued every button, card, and input already in use — more than anyone expected. Engineering was rebuilding the same components from scratch, onboarding took longer without a shared reference, and several colors failed WCAG contrast outright.

This wasn't a styling exercise. It was infrastructure — a shared visual language that would save engineering time on every feature shipped after it.
Foundation color palette with accessibility ratings
Every token audited against WCAG AA/AAA contrast before it entered the library.

Two calls that shaped the build

Structure the system atomically — atoms to pages — so it scales without rework every sprint. And run it as a Lean UX loop, validating each foundational decision with engineering before it ships, instead of designing in isolation. Buttons, cards, and templates went first because the audit showed they were rebuilt most often; everything else followed in order of reuse, not completeness.

Foundation button states and variants
Buttons — the most duplicated pattern in the audit.
Channel and provider card components
Real product surfaces, not generic UI-kit filler.

From tokens to a living component

Notification templates and channel management became full components with real property variants — state, avatar, action buttons — built for both light and dark mode, and validated against how engineering would actually implement them.

Master notification component with property panel
One master component, every variant exposed as a property.
Light and dark mode comparison
Light and dark mode shipped together, from day one.
ButtonsCardsNotification templates Tab viewAvatar & bell variantsSwipe actions Light & dark mode

Connected, not just documented

A component library that only lives in Figma is still a translation problem — someone has to eyeball a token and type a hex code into the codebase by hand. I connected the entire system to an MCP server so engineers and AI coding agents can query it directly: exact colors, spacing, component states, and accessibility ratings, pulled straight from the source file instead of guessed from a screenshot.

The system doesn't sit in a tab someone forgets to check. It's live context the code editor — human or AI — already has.

It's the same principle behind how I build products today: treat the design system as structured context an agent can reason over, not a picture to copy. Paired with the component work, it's a real part of why that 30% speed-up holds — one live source of truth, not just tidier files.

Figma tokens · components · a11y MCP Server live query layer Engineers build screens from source AI Coding Agents Cursor · Claude Code
Same tokens, same components — queried live by whoever, or whatever, is building next.

What changed

Development velocity increased 0%faster after launch. Engineering stopped rebuilding the same button, and handoff got faster with one place to check. This system also became the ground the Notification System Revamp was built on — a parallel project that cut support tickets 85% using these same components.

What I'd carry into the next one

A system only pays off if people use it — next time I'd pair the library with an adoption plan from day one, not treat adoption as automatic. And I'd audit before building again: every inconsistency caught early was one less thing to reconcile after launch.

Next case study

Enhance Notification Experience — the redesign this system helped ship faster

Let's talk, maybe?

Want to talk about design, ideas, tech, coffee, building — or just anything in general? Feel free to hit me up!

Send message