Building a unified design system for one of the UK’s largest travel brands
Company
Large UK travel brand (publicly listed)
My role
Design System Lead
Timeline
14 months
Services
End-to-end design system implementation
Platforms
Web, iOS, Android
Users impacted
Millions annually
Challenge
A fast-growing travel company was operating multiple digital products across platforms. Each had evolved independently, leading to inconsistent experiences and slower release cycles.
Key issues
Dozens of duplicated or visually inconsistent components
Hard-coded colours and spacing values with no single source of truth
Separate Figma files maintained by individual designers
Accessibility standards applied inconsistently
Slow feature delivery and high rework due to unclear standards
The goal was to create a unified system that improved quality, accessibility, and delivery speed without slowing down ongoing feature work.
Before vs. After
Before
No shared token system
Inconsistent component patterns across web, iOS, Android
Frequent design–dev mismatches
3–4 rounds of iteration per feature
Accessibility treated as an add-on
Over 200 recurring UI bugs across teams
After
Token architecture powering all platforms
A single Figma library with consistent Auto Layout, documented patterns, and usage guidance
Clear naming conventions and component structure across stacks
1:1 design → code alignment
Embedded WCAG 2.2 compliance
60 percent reduction in UI bugs reported across teams
Faster feature release cycles and fewer hand-off questions
The approach
Audit and discovery
Mapped every existing component across web and native apps.
Interviewed designers, developers, and product leads to identify recurring pain points.
Prioritised high-impact components to tackle first.
Token architecture
Introduced a token-first model covering colour, spacing, typography, and motion.
Defined clear naming conventions and relationships between primitive, semantic, and component-level tokens.
Automated export to multiple platforms via Style Dictionary.
Figma foundations
Built a single shared Figma library using Variables for colour, spacing, and typography.
Created responsive, documented components with consistent Auto Layout behaviour.
Added usage notes and visual examples directly in-file to reduce questions during hand-off.
Development parity
Partnered with front-end engineers to build a Storybook library mirroring Figma components.
Ensured 1:1 design-to-code alignment and accessibility documentation for every component state.
Established a design-dev sync process to review new patterns together before release.
Accessibility and documentation
Embedded WCAG 2.2 requirements into every component.
Created a documentation site outlining principles, tokens, components, and contribution guidelines.
Integrated automated accessibility testing in the component pipeline.
Governance and rollout
Introduced a lightweight RFC process for new components.
Scheduled regular library updates with semantic versioning.
Ran training workshops for design and engineering teams to drive adoption.
Key learnings
Start with tokens. Getting the foundation right made downstream work exponentially faster.
Pilot, then scale. Early pilot projects built trust and generated measurable proof of value.
Governance matters early. Clear contribution and review rules prevented drift as the library grew.
Documentation is a product. Investing time there saved countless support requests later.
Impact
By combining a token-first architecture, aligned component development, and strong governance, the organisation gained a scalable design system that improved consistency, reduced bugs by 60 percent, and accelerated delivery across all platforms.
What began as a maintenance burden became a strategic enabler for the entire product organisation.