Design system overhaul
Design systems
UI design
Product design
Summary
Goal
To establish a unified design system that could support a growing product operating across multiple countries, devices, and partner environments. Prior to this initiative, the product had no formal design system, leading to inconsistent interfaces, increased development complexity, and frequent front-end issues. The objective was to introduce a scalable and accessible foundation that would align product and engineering teams.
My role
I spearheaded the initiative within the product team, advocating for the value of investing in a structured design system and gaining executive support to prioritise the work. This included transitioning the design team from Sketch to Figma, defining system architecture, and collaborating closely with front-end developers to ensure the system aligned with real development needs. I coordinated the creation of components, design tokens, and guidelines while working with engineering to integrate the system across environments.
Outcome
The resulting design system significantly improved product consistency, reduced front-end complexity, and enabled faster, more reliable development across the platform.
A fragmented product experience
No design system
When I joined the product team, there was no formal design system in place and interfaces had evolved organically over time with limited design oversight, resulting in inconsistent UI patterns and duplicated components across the product.
Misalignment between design and development
Design outputs often differed significantly from what was implemented at the front-end level. Without shared components or standards, developers frequently created custom solutions, leading to inconsistencies and technical complexity.
Examples of inconsistent UI in the product before design system
Growing technical and design debt
As the platform expanded across multiple countries, partners, and devices, the lack of consistency became increasingly difficult to manage. Designers struggled to determine the correct design direction, while developers faced growing front-end maintenance challenges.
Building alignment across the team
Advocating for a design system
Recognising the current and long-term impact of the issue, I proposed establishing a design system as a core initiative. This required gaining executive support to prioritise the work and dedicating time within the product roadmap.
Moving from Sketch to Figma
A key step was transitioning the design team from Sketch to Figma, which offered significantly stronger capabilities for building and maintaining a design system. After many years of the company using Sketch to create design mocks, I worked with leadership to demonstrate the benefits of switching tools.
Creating a scalable foundation
Accessibility first design
User research showed that a large portion of our user base consisted of middle-aged or older users. This reinforced the importance of prioritising clarity, accessibility, and usability over complex visual treatments.
Leveraging MUI for development alignment
To streamline development and meet accessibility standards, our team came to the agreement to design around Material UI components. This ensured components would be flexible and easier for front-end engineers to implement within the existing architecture.
Building the component system
The design system introduced standardised components, typography, spacing, and interaction patterns. These elements formed a shared foundation that could support multiple environments while maintaining a cohesive brand experience.
Bridging design and development
Reducing front-end complexity
By introducing reusable components and consistent design patterns, the system significantly reduced the need for custom front-end solutions.
Establishing shared workflows
Working closely with developers, we aligned the design system with the front-end architecture and created processes to ensure any updates to the UI could be synchronised across all environments.
UI collection
Enabling faster product development
Consistency across the platform
The design system unified the visual and interaction language across different markets, devices, and partner implementations.
Reduced bugs and support tickets
Standardised components reduced the number of UI related issues and bugs caused by inconsistent custom implementations on the front-end.
Faster prototyping and experimentation
With reusable components in place, designers could prototype new features quicker and experiment with ideas without rebuilding UI patterns from scratch.
