Leading a Multi-Platform Design System Across 20+ Acquired Products
Overview
Over a span of two years, our company underwent a series of acquisitions, adding over 20 products to our portfolio. Each of these products brought with it its own unique visual identity, front-end architecture, and design maturity. This rapid expansion led to significant inconsistencies and inefficiencies across our teams. Designers were working without clear guidelines, and developers were often rebuilding components from scratch. As a result, our product experiences were diverging, putting a strain on trust, time, and resources.
I led the strategy and execution of a unified, themeable design system built on top of MUI — one designed to scale across brands, teams, and codebases. The work began with foundational theming and component design. It grew into a cross-functional initiative to deliver tokenized design infrastructure, robust documentation, and hands-on support for reskinning legacy products.
This case study illustrates how I created alignment across design and engineering, introduced governance and scalability, and helped unify a fragmented product ecosystem with a shared design language.
My Role
- Led theme and token strategy across 20+ acquired products
- Defined and documented system governance and contribution models
- Built foundational component libraries and design patterns
- Initiated and led the migration from Figma variables to design tokens
- Collaborated closely with design system engineers and product teams
- Supported implementation through design audits, handoff specs, and reskin rollout
The Challenge
Each acquired product came with its stack, style, and team culture — making it difficult to:
- Scale UI consistency
- Maintain efficiency across teams
- Rebrand legacy interfaces
- Align designers and developers on interaction standards
It was clear that we needed more than just a design library. We needed a comprehensive design infrastructure that could bring our teams together under a shared, extensible foundation.
Approach
1. Establishing the Theme Framework
Working from MUI’s architecture, I led the creation of a core design theme that could support multiple brands and modes (light/dark) while remaining flexible enough for teams with unique needs.
This included:
- Defining typography, spacing, colour, and elevation tokens
- Establishing brandable themes for legacy and new products
- Building extensible patterns that engineers could implement quickly
My focus was on clarity, reuse, and balance — making it easy for teams to adopt the system without losing identity or autonomy.
2. Defining Governance and Guidelines
To ensure consistency and long-term scalability, I developed a governance model that outlined:
- How components should be used and extended
- How designers could contribute to or request changes in the system
- How we would version, review, and roll out updates
This structure gave teams a clear path forward, reduced ambiguity, protected the integrity of the system, and encouraged adoption.
3. Transitioning to Token-Based Infrastructure
Once the visual and component frameworks were in place, I initiated the second phase of our project. This involved converting our Figma variables into design tokens that were ready for export using Style Dictionary.
This allowed us to:
- Create parity between design and code
- Accelerate reskin projects by updating tokens instead of refactoring UI
- Build a future-proof design foundation for scaling and automation
I mapped variables to a core → alias → semantic structure and worked closely with engineering to validate output formats, ensure code readiness, and align on implementation timelines.
Collaboration and Alignment
A primary focus of this work was fostering collaboration across disciplines. I engaged:
- Designers, through Figma libraries, pattern reviews, and office hours
- Engineers, via documentation, implementation support, and weekly syncs
- Product teams, by embedding myself into reskin efforts to guide usage
Rather than handing off work, I built working relationships that created shared ownership. This cross-functional collaboration was key to the system’s adoption and success.
Outcomes and Impact
- Enabled multi-theme support across the product portfolio
- Accelerated rebrand efforts across 3+ legacy platforms using tokenized themes
- Improved collaboration between designers and developers with aligned naming, variables, and documentation
- Reduced redundancy by standardizing components and eliminating duplicated efforts
- Established a governance model that scales with product and team growth
- Drove strategic alignment without being asked — transforming a design refresh into a foundational system initiative
Conclusion
This project reflects how I approach systems-level design as a strategic enabler. By building a design system grounded in collaboration, tokenization, and governance, I helped unify a complex ecosystem of products under one scalable design language. The system continues to support faster delivery, stronger consistency, and cross-team cohesion — all without sacrificing flexibility or brand identity.
