Design System Overhaul
I overhauled an out-of-date design system for a company with 1000+ customers, 6 products, and 3 acquisitions.
Role
UX/UI Designer, User Researcher
Client
BlueCat
Timeframe
6 months
Tools
Figma, Miro, Optimal Workshop, Confluence, Gong
Background
My goal was to redesign the design system to improve consistency, scalability, and efficiency across 6+ products. By aligning the design system and process with IBM’s Carbon Design System, I aimed to create a cohesive user experience while streamlining the design and development process.
Problem
The product suite doubled from 3 to 6 in under a year, and is expected to continue to grow. Before the redesign, the products looked and behaved differently, there was no cohesive user experience, and the brand identity felt fragmented. Additionally, the language used throughout the UI was extremely inconsistent: buttons with the same function used different labels across products, which confused users and disrupted workflows.
Internally, it wasn’t much better. Designers and developers lacked clear guidelines for using components, which meant teams often interpreted things differently or just built their own solutions from scratch.
How can we create a scalable design system that unifies multiple products while remaining flexible to each team’s unique needs?
Goals
1
Ensure all components look and behave consistently across all products
2
Standardise action verbs in the UI to eliminate confusion
3
Provide clear usage rules for every component so teams can implement them consistently
Process
Audit & Research
Product UI audit
Internal interviews (designers, PMs, engineers)
Usability testing
Structure & Standardization
Structure & Standardization
Action verb standardization & UX glossary
Design & Validation
Component creation
Implementation guidelines & contextual rules
Collaboration & Iteration
Cross-functional reviews
Accessibility checks & compliance validation
Continous iteration
Rethinking the Architecture
The first attempt was an atomic design approach, breaking components into atoms, molecules, and organisms. It was theoretically sound, but in practice, it slowed down design and made elements hard to locate. We pivoted to a component-based structure, giving each component a dedicated page in Figma.
Each page contained a clear purpose, all interaction states, and “builder versions” for easy copy-paste into real products. For example, our table component included pre-configured rows, headers, and cells that could be reused and adapted across products.
I explored several design systems and quickly realised that IBM’s Carbon Design System offered the best inspiration. Its accessibility standards, structured documentation, and scalable components provided a benchmark, but I needed to adapt it for BlueCat’s unique ecosystem. Accessibility was a priority from day one: colour contrast, keyboard navigation, and screen-reader support were all integrated into the component design.
Establishing Consistency
Colour tokens replaced generic labels like blue-10 with semantic names such as button-primary. This allowed global teams to work in sync and maintain a recognisable brand identity, even across newly acquired products.
Colour tokens for different links
Colour token | Role | Value |
|---|---|---|
| Used for primary text links |  Blue 60 |
| The hover colour for $link-primary |  Blue 70 |
| Secondary text link for lower contrast backgrounds | Blue 70 |
| Link on $background-inverse backgrounds |  Blue 40 |
| Hover colour for text links on $background-inverse backgrounds |  Blue 30 |
We standardised action verbs like “Apply” vs “Save” and created a glossary with contextual examples. Every guideline aimed to reduce ambiguity and improve UX coherence.
Glossary for Action Words
Action | When to use | Example |
|---|---|---|
Add | Inserting an item into an existing system | Add Item, Add Member, Add Document |
Apply | Confirming and implementing settings or changes immediately | Apply Changes, Apply Filters, Apply Settings |
Cancel | Discarding changes without applying them | Cancel Edit, Cancel Changes |
Confirm | Acknowledging or approving an action, often irreversible | Confirm Changes, Confirm Action |
Create | To build or generate something new entirely from scratch | Create Document, Create Account, Create Task |
Delete | Permanently removing something from existence | Delete Document, Delete Account, Delete Task |
Disable | To turn off or deactivate a feature or setting | Disable Account, Disable Schedule |
Dismiss | To close or remove an element (notification, modal, message) without taking further action | Dismiss Notification, Dismiss Modal, Dismiss Alert |
Download | Transferring data from a remote server to a user's local device | Download File, Download Report |
Edit | Action to modify specific details of content | Edit Profile, Edit Comment, Edit Settings |
Design
Each component page in the system was designed to be self-explanatory and reusable. Every page included a brief description of its purpose, all interaction variants, and examples of real-world usage. This approach ensured that designers and developers could quickly understand how to implement components consistently across products without needing additional guidance.
By documenting components this way, we made it easier to maintain visual and functional consistency, reduce errors, and speed up design and development workflows. The system supports flexibility, so each component can adapt to different product needs while staying aligned with the overall design language.
Results
The redesign of BlueCat’s design system delivered a clear, measurable impact across both users and internal teams. Components across six products are now visually and functionally consistent, reducing confusion and streamlining workflows. Standardised action verbs and a shared UX glossary improved language coherence, making interfaces easier to navigate.
For the team, handoff friction dropped dramatically: developers now have clear documentation for every component and state, reducing implementation errors and speeding up project timelines. Onboarding time for new designers decreased, as the system provides a single source of truth for patterns, components, and guidelines.
Usability testing showed immediate improvements: users could complete tasks like batch actions in tables faster and with fewer errors, reflecting the practical benefits of consistent components and predictable interaction patterns.
Finally, the system is scalable and flexible, supporting the integration of newly acquired products without disrupting established workflows or brand identity. It serves as a living system that evolves with user feedback, company growth, and accessibility standards.
6+ products unified
Successfully implemented across six products with a framework for scaling to additional products.
Reduced hand-off issues
Clear component definitions and guidelines significantly reduced questions and errors.
Faster decision-making
Streamlined design decisions for everyone by defining clear guidelines
Takeaways
In the end, I built a scalable, flexible design system that unified BlueCat’s product suite while still respecting the unique needs of each product.
The Design System now has consistent UI behaviour, language, and component usage across six products, helping users navigate seamlessly, no matter which product they’re in.
For the team, this meant fewer handoff issues and far fewer questions from developers. Components are clearly defined, states are documented, and expectations are aligned.
Design decisions are faster too, because we’re no longer reinventing the wheel.
And this isn't over. The system continues to evolve with regular feedback, keeping it aligned with user needs and design best practices.
