Saved per feature in dev
Saved per screen in design
Saved per PR/design review
Duplicate components removed
Color token reduction (54 → 43)
Text styles reduction (20 → 14)
The Problem
What We Inherited
As Exxact scaled its product offerings, inconsistencies in design and development slowed teams down across every surface.
5 Friction areas
01
Inconsistent colors, typography, and component behavior
02
Rebuilt components across teams due to poor organization
03
Confusing naming conventions between design and code
04
Difficult onboarding for new team members
05
No clear versioning or ownership of design decisions
Strategy
01
Audited existing UI assets across platforms
02
Defined design principles for scalable decision-making
03
Created a shared taxonomy for design tokens and components
04
Implemented variables and reusable components
05
Established documentation, training, and maintenance processes
Adoption & Training
To ensure adoption across teams, I focused on alignment before rollout.
To ensure adoption across teams, I:
Led workshops to align design and engineering teams
Established shared terminology and token structure
Created onboarding resources for new contributors
Solution 01
A centralized library covering typography, color, buttons, forms, navigation, and modals accessible across all projects. I mentored a junior designer throughout, reviewing Auto Layout, variants, and system best practices.
Solution 02
I defined a scalable naming convention using seven attributes (category, concept, property, variant, state, scale, mode), ensuring design and code used the same language. To support this, I built a Notion tool that automatically generated token names, reducing human error and speeding up implementation.
Custom Notion tooling in action: Automating the generation and management of our design tokens.
Application
The impact of tokenization in code: Standardizing naming conventions to make implementation clearer and more predictable for engineers.
Before
After
Solution 03
I Introduced CSS clamp() to create fluid typography that scales smoothly across viewports—replacing rigid breakpoints with adaptable sizing.
Storybook demo showcasing responsive h tag sizing.
Solution 04
Built a Notion-based change log that automatically posts updates to Slack, keeping design and engineering aligned on system updates.
The automated changelog: Tracking detailed token updates to ensure continuous alignment between teams.
Reflection
How this project felt, measured in challenge, teamwork, and the occasional missed lunch.
Impact
Creating a shared design system transformed how we build products — reducing design time, improving consistency, and laying a scalable foundation for future growth.
Technical Challenge
This was one of the most technically demanding projects I've worked on. With no formal mentor, I relied on deep research, experimentation, and iteration to navigate unfamiliar design system concepts.
Collaboration
Despite the challenge, the project significantly strengthened cross-functional collaboration. Close partnership with engineering helped us align on decisions and establish stronger design standards.
Iteration
The implementation required ongoing refinement. Through trial and error and constant feedback from a small but engaged team, we steadily improved both the system and our process.
Shared Language
Lively discussions with the software team (especially around token naming) pushed us toward clearer, more durable decisions. These conversations ultimately made the system stronger.
