British Airways - Design System

Helping BA become the UK's most accessible airline

Embedded experts
Accessibility that protects the brand

Through BAgel, accessibility can be built into every digital experience British Airways delivers by embedding inclusive design as standard. 90% of British Airways employees using the system agreed it made their work more accessible and an analysis against the Gain’s barrier score noted a 39% improvement in the customer's benchmark score.

Enterprise-scale consistency

BAgel provides a single, scalable design and engineering foundation across British Airways’ complex digital estate. Teams can now deliver consistent, high-quality experiences across brands, platforms, and regions, without slowing innovation or limiting flexibility.

Faster delivery, lower cost

By aligning design and front-end engineering through shared components, tokens and documentation, BAgel has significantly reduced duplication, rework, and technical debt. This has accelerated delivery, improved productivity and lowered the long-term cost of change across the business.

SITUATION

Overview

British Airways operates at enormous digital scale. With customer and colleague apps, more than 15 websites, multiple brands, languages, device types, and regulatory environments, maintaining a consistent, accessible, and high-quality user experience is a constant challenge.

Previous attempts to introduce a design system had delivered some value but had not been widely adopted across the organisation leading to a fragmentated approach to design and engineering. Teams were still reinventing components, accessibility was inconsistent, and the gap between design and code slowed delivery and increased technical debt.

British Airways needed a partner who could help them create and implement a new design system that met varying needs across the business.The team would need to support adoption across a large, distributed design and development community and ultimately deliver a system that could scale, evolve and be incrementally adopted.

The new system would need to establish clear UX/UI and front-end best practices, build accessibility into its foundations ensuring a business-wide consistent approach and create efficiencies between design and engineering, speeding up development and minimising technical debt.

Leighton was appointed to help achieve this through the evolution of the British Airways global experience language (BAgel) design system.
‍

Solution

The approach

Members of the Leighton team were embedded into the BAgel team – including one of our creative technical leads – to steer the project and work collaboratively with British Airways’ UX, design and technology colleagues. The focus was not just on producing consistent and reusable design components, but on building the right foundations, processes and ultimately the wider understanding of the design system across the business to support long-term success.

The first step was to review the existing system and create a roadmap that would take the customer to where they wanted to be – a widely adopted and valued design system that the business could access to achieve consistency, efficiency, scalability and sustainability. The system would then need to be implemented incrementally to ensure continuity and avoid causing disruption to existing platforms.
‍

Front-end engineering best practice

Leighton supported British Airways in building modern, scalable front-end components that balanced longevity with flexibility, the coded components would be available for use across the British Airways digital ecosystem going forward.

The BAgel system was implemented using standards-based web components, enabling future-proof, browser-native components, strong accessibility support by default, incremental adoption across existing platforms and compatibility with BA’s front-end ecosystem, including React.This in turn would reduce dependencies and lower maintenance costs.

Accessibility was engineered directly into each component, ensuring consistent keyboard support, focus management, labelling and semantic structure across all implementations.

Putting inclusion at the centre of the project

Accessibility was treated as a core design principle. Leighton supported British Airways in defining inclusive design principles that ensured accessibility informed every design decision and was consistently adopted across the business, minimalism never came at the expense of usability.  

Accessible foundations were established across typography, colour and theming, layout, iconography, motion and tone of voice, ensuring consistent experiences for all users, across all platforms.


Building relationships across the business

The Leighton team worked to establish relationships across core functions within British Airways including brand, design, development and leadership to put the needs and wants of the users at the heart of the new system. It was essential to adoption that the confusion around the existing design system and its purpose was clarified and those using the product understood its value and the efficiencies it could offer them.  

Once the design system was ready to roll out, further engagement work was carried out across the wider business to encourage adoption. The Leighton team supported British Airways in running workshops and presentations, providing opportunities for feedback and additional requirements, creating communication channels and contribution models and providing training and education for designers and developers

This helped embed BAgel into everyday workflows and foster a shared design and development approach.

UX/UI best practices
Documentation and governance
Parity between design and code
Supporting design library
Reusable components engineered for accessibility

Tech stack

To ensure consistency and scalability across channels, the front-end platform was built using a component-driven approach. Figma and Storybook provide a shared design and development foundation, while reusable components built with modern frameworks enable seamless integration across React, Angular, and AEM. Automated testing ensures reliability as the platform scales, supporting fast, high-quality delivery across multiple experiences.

‍

Stencil
TypeScript
SASS, SCSS & LESS
Jest
React.js
Next.js
Angular
Figma
Storybook
Style Dictionary
Playwright
AEM
IMPACT

Driving accessibility and consistency across the digital ecosystem

BAgel is now a core part of British Airways’ digital ecosystem. The design system is now being used by hundreds of designers and developers across over 30 web projects, customer facing airport kiosks, colleague apps, in-flight entertainment systems and BA’s catering app for pre-ordering meals, with further implementation across new native apps planned.

The system has also been recognised through several awards ceremonies since its implementation. It was awarded 1st place in the UK CAA Digital Accessibility ranking for airlines and 2nd place in Best Accessibility Mission at the Digital Experience Awards.

Independent accessibility audits also praised BritishAirways for strong WCAG compliance, keyboard accessibility, focus management, labelling and responsive design following the implementation of BAgel. The team also carried out an analysis against the Gain ‘barrier score’ for website accessibility, after adopting BAgel the British Airways barrier score improve by 39%.

Positive impact survey results:

Following its implementation a colleague impact survey was launched to allow users at British Airways to provide feedback on the impact of the BAgel design system.

·     82% said it was driving efficiency in their work

·     77% said it had helped to reduce design and coding duplication

·     77% felt the implementation process had helped to remove confusion around terminology and helped to clarify communications with colleagues from other parts of the business

·     90% agreed the system made their work more accessible

·     81% noted BAgel’s effectiveness in guiding design and development decisions
‍

“BAgel has become an extremely well managed and organised resource. It's difficult to imagine how we worked with BAgel before this.”
— British Airways team feedback

‍

  • Accessibility that protects the brand

    Through BAgel, accessibility can be built into every digital experience British Airways delivers by embedding inclusive design as standard. 90% of British Airways employees using the system agreed it made their work more accessible and an analysis against the Gain’s barrier score noted a 39% improvement in the customer's benchmark score.

  • Enterprise-scale consistency

    BAgel provides a single, scalable design and engineering foundation across British Airways’ complex digital estate. Teams can now deliver consistent, high-quality experiences across brands, platforms, and regions, without slowing innovation or limiting flexibility.

  • Faster delivery, lower cost

    By aligning design and front-end engineering through shared components, tokens and documentation, BAgel has significantly reduced duplication, rework, and technical debt. This has accelerated delivery, improved productivity and lowered the long-term cost of change across the business.

  • Supporting customer-facing and colleague-facing experiences across the business

    BAgel has been able to support across a number of BritishAirways products including catering pre-order applications, in-flight entertainment systems, airport kiosks and internal colleague tools.

    ‍

  • Standardised web components

    The system offers teams across British Airways access to accessible components that can be adapted using the design library to meet individual requirements. These components can be incrementally implemented, with fewer dependencies and have future proofed the approach to design and development across the business.

    ‍

  • Widely adopted across the business

    Following Leighton’s community work to foster relationships across the business and provide training and education on the benefits of adopting the design system, BAgel is now being used by 100+ designers and developers across over 30 web projects.

  • Time and cost efficiencies

    Effective adoption across the business has generated savings in terms of employee resource and has provided British Airways with a cost-effective way to manage their design and development consistency across the business. The alignment of design and development through readily available components and designs dramatically reduces rework, misinterpretation and duplication across teams.

Embedded experts
Similar case studies
Reducing global lounge app costs by 96% with AWS serverless modernisation
British Airways - Lounge App
View case study
Mock up of the Avios Shop displayed on a Macbook. Mockup shows Avios Shop basket page.
Delivering a serverless OMS for multi-brand fulfilment at scale
Avios - OMS
View case study
From proof of concept to scalable storefront: the new Avios Shop
Avios - Storefront
View case study

Let's talk about your next project.

hello@leighton.com

+44 (0)191 305 5140

Thank you!

Thank you! Your submission has been received!
A member of the team will be in touch with you shortly.
Oops! Something went wrong while submitting the form.
Let's talk about your next big project.
Let's Talk
Who we are
Careers
Insights
What we do
We build products
We build processes
How we do it
Build as a service
Embedded experts
AWS Advanced Tier Supplier logo
ISO 27001 logo
Crown Commercial Service Supplier logo
Cyber Essentials logo
G-Cloud Supplier logo
WCAG logo
Copyright © 2025 Leighton Corporation. All Rights Reserved.
Privacy & Cookie Policy
Leighton Corporation Limited is a company registered in England and Wales. Company No: 03307776. VAT No: GB1846503 92
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
PreferencesDenyAccept
-->