Combining the KLM and Air France customer facing websites into one efficient web application

With over 98 million passengers carried in 2017, Air France – KLM are aviation leaders, especially in Europe. But they are also two separate entities, each with their own distinct brand and style, which had to be preserved when they decided to migrate both their customer facing websites into one efficient web application.

Our challenge

Both airlines have almost 500 million unique visitors a year. While each airline has its own booking system, there was room for improvement, in order to ensure Air France – KLM had the technology to match their business model. This meant the development of new architecture, one which had the ability to integrate with existing apps and social media platforms, but also one that could be sold as a white-label to other airlines.

In addition to this, and to further enhance the customer journey, Air France – KLM wanted their new architecture to meet the personalization and contextualization needs as defined in the APIs, while still meeting KPIs and maintaining a customer-centered focus.

Our approach

Frontmen have been working together with Air France – KLM since 2015, when we first designed the greenfield architecture of the KLM website. Upon the successful delivery of this first assignment, the scope of the collaboration was expanded to include the engineering of a web-application.

Our first step was to devise a large part of the architecture and build the core of the application. Next, we successfully implemented the architecture in real life, so successfully in fact that Google send over their engineers to collaborate and learn from the project and architecture we delivered.

Our product

The development team, working in conjunction with Air France – KLM, Google and other front-end experts, have built a state-of-the-art Angular application that can be applied to multiple brandings. With additional capabilities, such as the ability to run on the docket platform, the new platform/application is helping to change the organization from a traditional silo-based approach, to a single IT entity for front-end.

Our techniques

The application was built in Angular, which started at 2 beta and is today version 6. We use Node.js as webservers, GraphQL together with Apollo as data communication layer. GraphQL is exposing the API’s of AF KL.

The result

We have been building a scalable extendable application in which KLM can overtime implement all business logic needed to scale down their current business to business solutions. No core code changes are required to release new functionality because of the modular approach the application is built in. The code is designed to be easily adaptable for other brands and languages.

HTML
CSS
angular