How Argentina’s leading low-cost airline built a seamless passenger experience

As Argentina’s leading low-cost airline, Flybondi uses Storyblok for its main website across 3 markets and 2 languages. Making the move to Storyblok in 2020 from Hygraph, Flybondi also uses Storyblok for their booking flow whenever passengers book a flight, with specific components providing essential reservation information to customers. 

Challenges 

Flybondi’s journey before using Storyblok can be identified by two pivotal moments - using an S3 bucket to create landing pages and their previous experience with GraphCMS (now Hygraph). While this worked out for a while, an upcoming version of Hygraph that required extra adaptation in Flybondi’s internal service, and the lagging UX experience for the marketing team, made the team consider switching to another CMS. The main challenges faced were found in the following: 

• The frustration of the editing experience, where the development team had to jump from one program to another just to build inside the CMS 
• Overall increasing dependencies from the marketing team on developers to make simple changes to the site
• A lack of scalability with the tech-stack Flybondi had, including GraphQL and React SDK/API

Solution  

From the get-go, the team knew they needed a headless CMS that could allow flexibility between the front and backend for their intended scalability. In late-2019, Flybondi eventually came to find out about Storyblok. Flybondi chose Storyblok as their headless CMS based on:  

• The robust Visual Editor with drag-and-drop components 
• Being a foolproof solution for the airline to expand into new markets and languages
• Overall scalability and being able to integrate different tools to the CMS with a best-of-breed solution

Flybondi is Argentina's first and leading low-cost airline. It made its first flight on January 26, 2018, and until that time, the low-cost model did not yet exist in Argentina. Travel in the country was very seasonal, depending on when people take a vacation or a weekend off, compared to travel in Europe or the United States aimed at both business and leisure travelers. Flybondi's goal was to change this situation, focusing mainly on seasonality and cost, both in Argentina and throughout the South American continent. Currently, Flybondi flies to 17 destinations in Argentina and 3 destinations in Brazil.

Configuring Flybondi’s setup with Storyblok

Flybondi’s overall migration to Storyblok was done incrementally over time (Argentina, Brazil, and Paraguay) in the span of roughly six months. This involved recreating components that previously existed in their old setup and ensuring any components being built and migrated to Storyblok were later nestable and organized simply for developers. The overall component build time was easily achieved in just 2 weeks.

Flybondi currently uses Storyblok to support all their website’s landing pages. Besides that, they also have a small news site hosted in Storyblok for press releases, news, etc. There are configurations in the main site that connect Flybondi’s data and its shared elements to Storyblok, such as their terms of service, payment options, etc. 

The website is organized into different markets. Currently, these include Argentina, Brazil, and Paraguay. In each market, all landing pages contain content and press. When a customer purchases a ticket, shared elements are presented through a promotional banner or pop-up (such as to buy extra luggage, for example). 

Within Flybondi, the marketing team directly manages the landing pages’ graphic content. The site is all built through GraphQL instead of REST API. Their server-side rendering was made on Lambda functions from AWS, which has all the data they need for configurations and updates.

How does Flybondi use Storyblok throughout the passenger purchasing experience? 

As an airline, Flybondi uses Storyblok as the foundation for their customer’s purchasing journey. Through live editing with the Visual Editor, the marketing team has taken back control and fully immersed themselves into the content management experience while leaving room for creative projects. Flybondi uses Storyblok for their main website and the booking flow. 

Breaking down Flybondi’s customer purchasing journey

Storyblok sits on the backend, keeping all data points in various databases. Breaking down the customer journey, with how each data point interacts with Storyblok - the airline’s frontend sends a specific query string to their main GraphQL API (their own middle layer). This then communicates with Storyblok to obtain the most recent version of a page that has been saved (i.e., a draft version). 

Flybondi then configured four webhooks for each environment so that they could manually update the landing pages. Storyblok supports one webhook on publish, which is hooked to the same internal service that pushes the data to Dynamo. From there, they use the slug of the page as the key (allowing them to find the Storyblok content). Dynamo is used as a cache or CDN to return Storyblok information, as a cache in front of Storyblok, and to generate the site map. 

As a customer, the first point of action is to visit an airline’s landing page. In Flybondi’s case, their landing page is what you can consider as ‘mixed content,’ acting as the beginning of the purchase funnel with a ‘picker’ component (destination and calendar input). 

The next step in the customer journey is a page filled with flight options and pricing. This involves a Storyblok component at the bottom of the page with the terms of service (a fixed component on this page), where both the marketing and tech side provides data. For example, this includes information regarding COVID measures and warning messages that clarify which airport a flight departs from, stemming from a database that filters depending on the flight configuration.

All flight information comes from Flybondi’s reservation system, which acts as a single source of flight input. However, any information regarding dates comes directly from Flybondi’s own database hosted on Amazon, alongside airport information.

The following section, which allows passengers to select luggage and insurance, enables a popup on the page.

For the flight seat selection, this data is brought from the reservation system and is inputted through the component placeholder. 

Using Storyblok, Flybondi is able to create the best customer experience for its passengers. Being an airline, having a secure CMS that can perform at the demand of new promotions and a steady flow of customers is vital to success. The airline has been able to continuously deliver and focus on its customer value, ready to scale across LATAM and grow conveniently to the market's needs.