GOAL
Create a set of standards to manage design at scale using reusable components and patterns.
1
Deliver consistent design
2
Create solid standard operating procedures for our team
3
Consistently save time and resources for both UX and dev teams
OUTCOMES & IMPACT
👍 Spearheaded building our design system from the ground up
👍 Designed platform-wide React components across 4 platforms, 8 micro-frontends, and multiple products
👍 Expanded the design system by 400%, covering components, patterns, and interaction models
👍 Accelerated design lead time by 30-40%
👍 Reduced UX and development rework through shared standards
👍 Elevated UX maturity across product and engineering teams
CONTENTS
1.0 Creation
Building out the design system and the UI library.
2.0 Process & Governance
A contribution model to ensure our UX team grows the design system together.
3.0 Maintenance
Keeping the design system up-to-date to minimize drift
4.0 Analytics
Measuring the efficacy of the design system over time
1.0 CREATION
Why the System Exists
This design system was built to solve a scaling problem.
As Solace grew across products, platforms, and teams, UX quality became harder to sustain. Designers were spending time continually re-solving trivial problems, developers were re-implementing patterns inconsistently, and product teams lacked a shared language for decision-making.
The design system’s primary goal was to operationalize good design, make quality repeatable, accessible, and measurable across the organization.
Foundational, styling, component, layout, and UX writing patterns, symbols, and process guides were created
1
Get buy-in from stakeholders to allocate resources to building and maintaining the system
2
Create a vision to work towards
3
Research well-known design systems to understand what constitutes as a solid foundation
4
Build out patterns, symbols, and UI components
5
Create a design system SDLC and incorporate it into the feature SDLC
6
Evangelize the system to increase adoption and support with the broader audience
One of our largest design system components to date - a WCAG AA compliant colour theme
Mapping the colour palette to each UI component in Storybook
Phase 1: Building the foundation
The system is a holistic product and not just a library.
That meant defining a vision, roadmap, and success metrics—aligned to both user experience and business outcomes. The project was first kicked off by establishing product principles rooted in the Solace brand and UX heuristics, giving us a clear direction for our designs moving forward. Then the initial growth phase was complete once we had documented the most essential patterns, had a complete set of robust Figma symbols, and unblocked the implementation of a centralized UI library.
Before & After Images
2.0 PROCESS & GOVERNANCE
Phase 2: From building blocks to system design
After creating the basic building blocks, we needed process and proper governance. We created repeatable guidelines that reduced ambiguity and sped up execution for our team. Standardizing these procedures greatly improved cross-team collaboration and reduced design and dev lead time. In the end, these efforts helped us shift far left in the Software Development Life Cycle and enabled our UX team to focus on bigger-picture problems.
1
Create documentation standards for the UX team so designers and developers always know what to expect
2
Create recurring meetings at the beginning of every quarter to prioritize, allocate, and size design tasks
3
Create an evaluation criteria so we know how to prioritize design system needs
4
Establish a point system for design system tasks, giving teams a way to assess effort and intentionally plan work within their feature roadmaps
5
Write the tasks into the team's quarterly critical success factors to keep us accountable and democratize ownership
Our design system’s development lifecycle
A regular quarterly prioritization meeting used the Moscow Analysis to allot design system tasks for our quarterly roadmap
The Moscow Analysis was used as the method to rank UX needs
3.0 MAINTENANCE
Phase 3: Keeping the system up-to-date
As the design system scaled, lack of maintenance surfaced as an operational gap. Small design decisions continued to pop up during feature work or casual conversations that didn’t warrant the formal roadmap ceremony but still needed to be captured. To address this, I defined a lightweight maintenance process that logged and reconciled these micro-decisions, preventing the system from drifting out of sync.
This operational foundation allowed the system to grow sustainably as teams and products expanded.
1
Create a mechanism for designers to log rapid decisions decisions in Slack
2
Create an automated workflow that integrates multiple tools together so all micro-decisions are documented in a digestible manner
3
Create a recurring working period where the team updates the patterns together
4.0 ANALYTICS
Phase 4: Measuring MFE adoption
Once we had a good rhythm, I used AI and the CASTLE framework to measure the efficacy of the design system with the primary goal of increasing adoption across all MFEs. Starting from business goals, I defined metrics that revealed if teams were shifting from custom components and toward the design system as a single source of truth. These metrics were translated into positive and negative signals to understand the current developer landscape and how the system was actually being used. Attitudinal metrics were measured through surveys, while behavioural metrics focused on adoption rates and defect patterns. AI-assisted analysis helped surface trends and guide targeted system improvements.
NEXT STEPS
Phase 5: Integrating AI
Our next task is transforming our design system to be AI consumable, then integrating Claude Code and a Figma MCP server. Our goal is to allow devs to bypass the patterns and UI library and go straight to vibe coding full features through their IDE or CLI. Afterwards, testing will be done to see if the tools meet user needs and outputs are accurate and high quality.
The system is never “done.”
It continues to evolve through analytics, user research, and close partnership with product and engineering. By treating the design system as both infrastructure and strategy, it remains adaptable to new products, technologies, and organizational needs.
This work sits at the intersection of design, operations, and leadership where systems thinking has the greatest leverage.