Creation of Design System
I led the creation of Global Relay’s first centralised design system to improve consistency, scalability, and collaboration across multiple product teams. The goal was to unify fragmented UI styles and workflows while meeting the needs of distributed teams working across time zones and product streams.
SaaS
Self-Service
B2B
Technical System
Leadership
Hands-on
Systems Thinking
Scalable Design Practices
67
%
Development Time Reduction
95
%
Product Line Adoption
6
x
Contributing Squads
Context & Challenge
The Problem
- Inconsistent UI across products, leading to a fragmented user experience.
- Duplicated work by design and development teams with no shared library or standards.
- Engineers faced inefficiencies due to inconsistent styles and naming conventions.
- Designers worked in silos, with disconnected Figma files and workflows.
- Scaling product development highlighted the absence of reusable, well-documented patterns.
Why it mattered
- Operational efficiency — Fragmented design and engineering workflows were slowing delivery and increasing duplicated work; a unified system would free teams to focus on innovation.
- Business growth — Achieving accessibility compliance and design consistency was critical to attract and retain enterprise clients and strengthen the company’s market credibility.
- Team scalability — As product lines and teams expanded across time zones, establishing shared standards and governance was essential to sustain quality, collaboration, and speed.
Role & Team
My Role
UX Design Manager & Design Lead
- Defined the vision and roadmap for the design system.
- Facilitated discovery workshops with designers, developers, and stakeholders.
- Created foundational design principles, UX Guidelines and led the creation of Figma libraries.
- Championed adoption across products, ensuring buy-in from PMs and engineering.
- Procured Design System Management Tool – Zeroheight
UX/UI Design Team distributed globally
Started on my own and scaled the team
6
Designers
Dedicated Development squads
Working on a hybrid/matrix model
6
Squads
Cross-collaboration
Product, Development, Architecture, Legal,
CSOC, Support
6
Functions
UX Research
UX Architecture
UX Strategy
UX Design
Accessibility
Hands-on
Governance
UCD Process Implementation
Stakeholder influence
Approach
1
Discovery & Alignment:
Uncovered cross-team pain points through interviews and research, and aligned stakeholders on a shared purpose for the design system
2
Defining Foundations & MVP
Established core system foundations, translated them into reusable Figma libraries and delivered a design system MVP alongside a new product launch
3
Cross-Functional Delivery
Established process, including async-friendly workflows, to enable distributed teams to collaborate effectively and embed collaboration and accessibility.
Process
Discovery
- Carried out user research with designers, engineers, and PMs to uncover pain points – In collaboration with UX Researcher
- Synthesised insights as Personas from the user research study, highlighting fragmented UI and duplicated work.
- Aligned teams on a shared purpose and long-term value of the design system.
Outcomes
Understanding of pain points for designers and developers: duplicated work, inconsistent UI patterns, and inefficiencies across design and development.
Achieved early buy-in and clarity around goals and priorities.
Outlined the MVP and identified the starting set of components and patterns
Foundations & MVP
- Established core foundations: design principles, colour, typography, spacing, iconography.
- Authored detailed UX guidelines, creating UX research process to ensure UX best practices in usage guidelines.
- Led the build of Figma libraries with components, variants, and naming conventions.
- Procured Zeroheight to manage design system content.
- Prioritised accessibility, ensuring all components met WCAG AA standards.
Outcomes
Delivered an MVP library in parallel with a new product launch to accelerate adoption.
Created the foundations and a structured Figma component library that became the single source of truth for design and engineering teams.
Established the foundations for governance, review cycles, and design–dev sync rituals that ensured quality, alignment, and continuous improvement.
From Creation to Publication Sample
Roll Out: Cross-functional delivery
- Introduced a federated model to ensure consistent growth of the design system – Product squads contributed to the build of components as the product lines needed new patterns.
- Embedded accessibility and governance into daily practice, by including accessibility in each component guidelines, coded into the Storybook components, and tested by the development teams for accessibility.
- Implemented async-friendly workflows for distributed teams: onboarding guides, a centralised hub, and Confluence documentation for Work-In-Progress and commenting.
- Ran regular design–dev syncs and product alignment sessions to track progress and refine.
Outcomes
Unified product experiences with a consistent visual language and interaction model across three product lines.
Accelerated delivery through reusable, documented components and clearer design–dev handovers.
Strengthened collaboration via shared governance, async workflows, and regular cross-functional reviews.
Embedded accessibility with WCAG AA-compliant components, which evolved in a team-wide training that enabled enterprise growth.
Zeroheight Site Samples
Leadership
- Influenced strategic direction and secured executive buy-in by framing the design system as a platform-wide enabler of scalability and quality.
- Scaled DesignOps practices — governance, reviews, and async workflows — that unified design and engineering delivery.
- Launched the company’s first Accessibility Initiative, mentoring a designer to lead it, driving inclusion, alignment with company goals, and a team-wide uplift in skills and capability through training programs.
Strategic Aligment
In-built Accessibility
Training
Accessibility Leadership
Scaling Design Maturity
Design -Ops Governance
Executive Buy-in
Cross-functional Collaboration
Capability Growth
Results
Outcomes
- Achieved progressive adoption on all major products, laying the foundation for platform-wide scalability.
- Delivered WCAG AA compliance, directly supporting enterprise client wins and expanding market reach.
- Elevated brand perception, helping position the company as design-forward and attractive to new design talent.
- Strengthened collaboration between design and engineering, reducing rework and increasing delivery speed.
- Improved onboarding & handovers for distributed teams with centralised documentation.
Impact
Direct support to Enterprise Client Wins
Large financial Enterprises and Governmental bodies.
Accelerated delivery and improved quality
Inclusive experience for all our users
Delivery Effort Reduction
Development and Design Teams
Reflections
Building the design system was a pivotal step in scaling design maturity and cross-team collaboration. If I were to do it again, I’d embed UX capability within a centralised design system team to drive stronger continuity, governance, and innovation.
- Building the design system was both a strategic and cultural transformation. It required not only creating reusable components and accessible patterns, but also introducing new ways of working between design and engineering.
- The initiative laid the groundwork for a scalable, cohesive platform experience and elevated design maturity across the organisation.
If I were to do it again….
I would ensure that UX capability is embedded within the core design system team, rather than relying on a partial federated model for implementation and growth.
I would have pushed more for a centralised approach, which would strengthen continuity, accelerate innovation, and maintain a higher level of governance and quality as the system scales.