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 struggled in its recovery as infections waned and the world opened back up to travel. Part of that recovery involved a comprehensive schedule of digital transformations to streamline their online operations and ‑ hopefully ‑ reduce their costs whilst increasing their 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 these transformation plans, focusing on leveraging modern front‑end web technologies to redefine the way that the Virgin Atlantic and Holidays brands engage with their customers online.
At the heart of this strategy was the adoption of a headless architecture and shared Design System and Component Library, targeting another failing in the existing online properties, where they lacked visual consistency from one area of the site to another. By choosing React and Next.js for our front‑end development, we were able to ensure that each individual online property could be worked on and released as a stand‑alone concern while retaining that important integration within the wider Digital First ecosystem.
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.
This was more than just a simple upgrade, and my role involved more than just leading the technical implementation; we also ensured that the transition supported the company's broader goals, enhanced user engagement, and streamlined the customer journey across all digital touchpoints.
By bringing together disparate and outdated applications under a single, modern framework, we were able to improve operational efficiency and performance as well as deliver a more cohesive experience for our users and customers. User and stakeholder feedback has been overwhelmingly positive, with a notable uptick in online searches and bookings.
Looking further into the future, these projects stand as a foundation for continued development and innovation. The modern, unified digital framework we have established will allow for easier ongoing enhancements in customer engagement and the development of new features. It will continue to serve the airline for many years to come.
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.
