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 whilst increasing sales.
This meant consolidating twelve fragmented digital applications onto a new, unified, cohesive, headless architecture, using a shared Design System and Component Library built with Storybook and React. The aim was to reduce development and maintenance costs over time, whilst improving consistency, user experience, and online performance.
I was brought on as a lead consultant engineer to help deliver the replatform. At the heart of the strategy was a headless architecture, shared Design System, and Component Library, allowing individual properties to be developed and released independently whilst remaining part of the wider Digital First programme.
The phased movement of the brand's various online properties to this new architecture took more than two years to implement fully, requiring detailed planning and coordination across multiple teams and stakeholders, alongside an understanding of both the internal technical landscape and the brand's strategic vision.
By bringing disparate and outdated applications under a shared framework, we improved delivery consistency and front‑end performance whilst giving users a more coherent journey. Stakeholder feedback was positive, with an uplift in online searches and bookings.
The resulting shared platform also provided a stronger foundation for future releases. New customer‑facing features could be built using the same architecture, Design System, and Component Library rather than extending separate legacy applications.
I've also written about two discussions from this project: how to handle carousels and using seeded randomisation to vary the order of content.
A New Header and Navigation
An early improvement 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 application and integrated into each website using ESI.
The result was an animated, accessible, responsive, and content‑driven navigation system, with complete content control through AEM and brand‑specific theming for use across both websites.
Design System & Storybook
Working closely with Virgin's design team, we developed a comprehensive set of standardised, reusable, and accessible React components for use across the different brands and applications under the Virgin Atlantic umbrella.
Built and documented in Storybook, with thorough test coverage using Cypress, the Component Library ranged from foundational elements such as typography and icons through to complete layouts and more complex interactive components.
An All‑New Search Experience
Another key feature my team and I developed was the new search experience, an interactive, animated, and accessible interface covering flights, hotels, and complete holiday packages. As with the Header and Footer, this was developed as a stand‑alone React application which could be included across different brand properties using ESI.
User statistics indicated that this version of the search panel was 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 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 also gave us the opportunity to simplify the UI whilst delivering a significantly faster and more stable experience.
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 had undertaken over the previous year culminated in the staggered launch of a new homepage for Virgin Atlantic Holidays. This was an all‑new Next.js application that we developed, incorporating the refreshed branding alongside the Header, Navigation, Footer, and Search components. Page content was managed through AEM, using our shared Component Library.
The Outcome
Over more than two years, the replatform project brought previously separate customer journeys onto a shared technical foundation across Virgin Atlantic and Virgin Atlantic Holidays. Alongside measurable improvements in performance, searches, and bookings, it left both brands with a more consistent and unified experience and a reusable architecture, Design System, and Component Library for future development.
- "
John Kavanagh's biggest strength is his ability to deal with conflicting priorities in high‑pressure situations. Along with his excellent development skills, John's ability to manage difficult stakeholders and requirements is one of the key reasons that the projects he led were completed on time without too many problems."
- "
John Kavanagh is a fantastic developer with all the skills one would want in a lead developer. He's done a superb job on all tasks and has been a great resource within the company. Exceptionally knowledgeable, self‑motivated, and a great team player. I would certainly work with John again!"
- "
John Kavanagh is a passionate and highly skilled developer with a wonderful ability to calmly concede downward business pressures whilst pragmatically delivering the project at hand.
John is never fazed by project management/requirement issues as are common in these environments, instead, he always finds a way to deliver value to both the end consumer and the business. It's not always easy to remain level‑headed and calm on high‑pressure projects but John's good nature and professionalism invariably remain infallible. It's an absolute pleasure working with him."
- "
John Kavanagh is an incredible UI developer, mentor and passionate lead developer.
I've been incredibly impressed by his technical understanding of UX and front‑end frameworks. Rapid turnaround times with quality output and attention to detail. Would highly recommend."
- "
If you're seeking to elevate the visual appeal of your design and translate it into an exceptional user interface, John Kavanagh is the ideal professional for the job. With his outstanding skills as a UI developer, he consistently delivers remarkable work with remarkable efficiency. John's contributions make him a valuable addition to any front‑end team."
