As Exxact scaled its product offerings, inconsistencies in design and development slowed teams down. This project focused on creating a single source of truth; reducing fragmentation, improving handoff, and enabling faster, more consistent product development.
With a thorough analysis of our existing design ecosystem, I:
An overview of our ecosystem audit, illustrating the disparate color usage and unstructured component catalog we needed to resolve.
Based on our audit findings, I created a structured design system with:
A walkthrough of the structured design system architecture, designed for intuitive navigation and scalable growth.
To ensure adoption across teams, I:
A look at the onboarding resources and shared terminology created to bridge the gap between design and development.
Custom Notion tooling in action: Automating the generation and management of our design tokens.
The impact of tokenization in code: Standardizing naming conventions to make implementation clearer and more predictable for engineers.
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.
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.
Comparing pre- vs post-launch metrics (1 month window):
A quick look at how this project felt—measured by challenge, teamwork, and personal sanity.
Impact
A Single Source of Truth
Creating a shared design system transformed how we build products, reduce design time, improving consistency, and laying a scalable foundation for future growth.
Technical Challenge
Learning Through Complexity
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
Raising the Bar Together
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
Trial, Error, and Progress
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
Debate That Builds Better Systems
Lively discussions with the software team, especially around token naming, pushed us toward clearer, more durable decisions. These conversations ultimately made the system stronger.
Looking Ahead
Built to Evolve
With a solid foundation in place, the next step is expanding the system to support themes and dark mode—leveraging the variables and structure we’ve already defined.
