Design System build

Objectives

When I joined Travelex in 2023, there was no design team or design system in place. UI components for the website and app were being created ad hoc by developers, resulting in visual inconsistencies, accessibility issues, and significant inefficiencies in the development process. As Travelex also white-labels its currency checkout and money card app, there was no scalable way to switch brand themes using design tokens. A centralised design system was agreed as a business priority.

My role

I led the design-side development of the Travelex Design System, working closely with product owners and engineers to create a scalable, tokenised component library. My responsibilities covered foundational design decisions through to system implementation and documentation. The timeline included initial audits, setup, and ongoing iterations to support evolving product needs across platforms. Figma based UI libraries served as the core, but the Design System took in the Travelex and partner brands, tokenisation, documentation and Storybook integration - plus all the associated governance and working processes.

Incorporated processes

• Global UI audit across online & app
• Brand foundations alignment
• Figma library setup (using Untitled UI as a base)
• Platform-specific library creation (App/CMS/Checkout)
• Native & bespoke component design
• Design token creation (Figma variables for themes & partners)
• Component Documentation
• Asset & theme replication in Storybook
• Cross-functional collaboration

Outcomes and impact

• Streamlined design-to-dev workflow from Figma to Storybook to development
• Increased development efficiency through consistent and reusable components
• Improved UI consistency and accessibility across all platforms
• Strengthened brand equity with tokenised theming for partner brand support
• Created a scalable resource with business recognition