Virgin Atlantic
& Holidays
A transformation and replatforming project bringing together twelve fractured and disparate applications under a new, unified, headless architecture using React and Next.js.
In Detail
Like every airline, Virgin Atlantic felt the impact of Covid‑19 and had to recover as travel demand returned. Part of that recovery involved moving fragmented online journeys onto a shared platform, with the aim of reducing operating costs while increasing sales.
This presented a unique challenge: consolidating twelve fragmented digital applications onto a new unified, cohesive, headless architecture using a new Design System and shared Component Library using Storybook and React. This ensured that development and maintenance costs would reduce with time, whilst user experiences and online performance would improve, leading to higher sales.
I was brought on as a lead consultant engineer to help deliver the replatform, using React, Next.js, and shared front end architecture across Virgin Atlantic and Virgin Atlantic Holidays customer journeys.
At the heart of this strategy was the adoption of a headless architecture, shared Design System, and Component Library, addressing the lack of visual consistency across the existing online properties. React and Next.js allowed each property to be worked on and released as a stand‑alone concern while still fitting into the wider Digital First programme.
The phased movement of the brand's various online properties to this new architecture was no small feat, taking more than two years to be implemented fully. It involved detailed planning, coordination across multiple teams and stakeholders, and an understanding of both the internal technical landscape and the brand's strategic vision.
My role covered the technical implementation and the delivery decisions around it: making sure the migration supported the company's broader goals, improved user engagement, and made customer journeys more consistent across the new platform.
By bringing disparate and outdated applications under a single framework, we improved delivery consistency and front end performance while giving users a more coherent journey. Stakeholder feedback has been positive, with an uplift in online searches and bookings.
The shared platform now gives Virgin Atlantic and Virgin Atlantic Holidays a clearer base for future releases. New customer‑facing features can be built against the same architecture, design system, and component library instead of extending separate legacy applications.
A New Header and Navigation
An early improvement made to the Virgin Atlantic and Virgin Atlantic Holidays websites was the introduction of a new Header, Navigation, and Footer. This was one of my first key projects, developed as a stand‑alone React/Next.js project, which was then included in each website using ESI.
This is a highly animated, accessible, responsive, and content‑driven navigation system that folds out from the right‑hand side of the screen. It allows complete content control via AEM and includes brand‑specific theming for each website use.
Design System & Storybook
Working closely with Virgin's design team, we developed a comprehensive set of standardised, reusable, and accessible React components that can be imported and used across the different brands and applications under the Virgin Atlantic umbrella.
Including thorough test coverage with Cypress, this Component Library includes basic Atoms as simple as Typography and Icons, up to complete Layouts and a configurable Carousel.
An All‑New Search Experience
Another feature my team and I developed, which will eventually be rolled out onto both the Virgin Atlantic and Virgin Atlantic Holidays websites (at present, it only appears on the new Holidays and Atlantic homepages), is the all‑new search experience.
As with the header and footer, this is a stand‑alone React application which can be brought into different brand properties via ESI. This features an interactive, animated, and accessible search panel covering flights, hotels, and complete holiday packages.
Current user statistics indicate that this version of the search panel is being used approximately 80% more than the previous version, resulting in significantly more bookings.
Search Results: New vs. Old
After completing the new search experience, my team then shifted focus to the flight search results application for Virgin Atlantic.
The original version had often faced criticism for having a cluttered interface, being unintuitive, and difficult to navigate. It was also perceived to be slow and clunky, running on an application and architecture that was more than seven years old.
We developed and deployed 'Version 3.0' of Flight Results, a ground‑up replatforming of the application in Next.js, with an all‑new GraphQL API infrastructure. This overhaul also allowed us to improve the UI with a familiar yet significantly faster and more stable interface. The simplified design now caters to users' needs, enhancing both their experience and usability.
During load testing, our new architecture performed extremely well, continuing to respond well past 400 visitors per second ‑ a tenfold improvement over the previous version. Moving filtering and sorting to the client side also resulted in a quicker, more seamless user experience, providing instantaneous results to our users and replacing the need for an additional back‑end call and loading spinner.
Virgin Atlantic Holidays: Old vs. New
The work that my team and I undertook over the previous year culminated in the staggered launch of a new homepage for Virgin Atlantic Holidays. This is an all‑new Next.js application that we had developed, including new branding, alongside the Header, Navigation, Footer, and Search components. Page content comes from AEM, using our Component Library.
