Design System Overhaul: Cutting Redundant Components and Saving 2–3 Hours per Feature
My Role: Product Manager, Product Designer, Design Operations
Team: 2 Backend Developers, 2 Full-Stack Developers, 1 Software Intern, Junior Graphic Designer, and myself
Duration: 3 Months (June-September 2024)
Overview
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.
The Challenge
When I joined Exxact, our design process lacked structure and scalability:
Inconsistent colors, typography, and component behavior
Rebuilt components across teams due to poor organization
Confusing naming conventions between design and code
Difficult onboarding for new team members
No clear versioning or ownership of design decisions
Strategy
I led a system-wide effort to standardize design and development workflows:
Audited existing UI assets across platforms
Defined design principles for scalable decision-making
Created a shared taxonomy for design tokens and components
Implemented variables and reusable components
Established documentation, training, and maintenance processes
Audit & Foundation
With a thorough analysis of our existing design ecosystem, I:
Cataloged color usage across platforms, revealing inconsistencies and accessibility issues
Assessed typography scales and hierarchy for alignment and legibility
Documented component variations and interaction states to support standardization
Partnered with developers to identify and close gaps between design and implementation
An overview of our ecosystem audit, illustrating the disparate color usage and unstructured component catalog we needed to resolve.
System Architecture
Based on our audit findings, I created a structured design system with:
A foundation layer (colors, typography, grid systems)
Component libraries organized by function and complexity
Clear documentation of usage guidelines and best practices
A walkthrough of the structured design system architecture, designed for intuitive navigation and scalable growth.
Adoption & Training
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
A look at the onboarding resources and shared terminology created to bridge the gap between design and development.
Key Solution 1 - Unified Component Library
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.
Key Solution 2 - Tokenized Design System
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 Notion tooling 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.
Before and after applying token variables to our buttons.
Notice how much more descriptive they are!
The impact of tokenization in code: Standardizing naming conventions to make implementation clearer and more predictable for engineers.
Key Solution 3 - Fluid Responsiveness
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.
Key Solution 4 - Change Management
Built a Notion-based change log that automatically posts updates to Slack, keeping design and engineering aligned on system updates.
Regular Updates
We plan to integrate documentation upkeep into our quarterly planning, dedicating time for consistent updates.
Getting Feedback
We'll regularly gather input through forms and user interviews, allowing us to adjust the guidelines based on our users needs.
Streamline Maintenance
We're exploring tools and processes to streamline documentation maintenance. We'll engage more with the development team to collaboratively refine and optimize guidelines for lasting usability.
The automated changelog: Tracking detailed token updates to ensure continuous alignment between teams.
Impact - Efficiency & Consistency
Comparing pre- vs post-launch metrics (1 month window):
~3 hrs saved per feature in dev
~2 hrs saved per screen in design
~3 hrs saved per PR/design review
Removed 15 duplicate buttons + 25 text variants
Color Values reduced from 54 to 43
Font sizes reduced from 20 to 14
Project Reflection Metrics
A quick look at how this project felt—measured by challenge, teamwork, and personal sanity.
What I learned
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.
