Case study: Checkout flow redesign for leading North-European airline

At the end of last year, we got an exciting call challenging us to redesign the Checkout flow for a leading North-European airline. Even though we were over the moon to work on such an exciting project, we knew that it would be a good challenge. 

2 months and 400+ screens later, the project was delivered. Read on to find out what went on behind the scenes of creating a new checkout flow for the biggest airline in the region.

Project background

We jumped on the project when the client had already developed the user flow that consisted of 6 steps: tickets, flight class, baggage, seats, meals, and passenger info. We also received low-fidelity wireframes with the information and products to include on the page. Our task was to prepare designs based on the requirements provided by the client, ensure seamless user experience for the new Checkout flow, and optimize it for micro-conversions. 

The goal of the project was to Design a new booking flow that will increase ancillary product attach rate with one-decision at a time approach.

Approach

Airline booking funnel isn’t your typical eCommerce Checkout. It requires you to keep in mind not only dozens of user cases but also specific systematic and legal requirements. For this project, our team relocated to the client’s office to ensure constant knowledge transfer and fast feedback loops.

UX audit of developed wireframes

The project started with us reviewing current work the client has done in-house. We reviewed all of the developed wireframes to understand what functionalities and information each step should have. 

We split existing wireframes into smaller components and prioritized all micro-conversions of the page.

Wireframe iteration based on UX audit outcomes

Once we had a clear vision of what to sell on each step, what is the most difficult user case requiring the largest amount of information and elements, we began iterating the wireframes. 

To reach the goal of the project and increase ancillary attach rate, we leveraged personalization and scarcity elements. 

Each product had a personalized value proposition, visuals, and notification tailored to different user cases. We wanted to make sure whether it’s a young mum trying to book tickets to fly with an infant for a week-long vacation, or a group of friends booking the flight to go skiing, each of them see content and value proposition relevant to them.

With the help of visual hierarchy, tooltips, notifications, warnings, and other UI elements we aimed to clearly show prospects scarcity messaging, reflecting the state of the flight. For example, we didn’t want prospects to miss the best deal to purchase food for their flight. We also used small pop-ups to save space and unobtrusively highlight upsells on each step. 

To give you an example, we reviewed 7 different flows for the prospect’s baggage options step, before settling for the final design, which we afterward adjusted to 10+ different user cases.  

User testing on interactive prototypes to uncover design and user flow flaws

After finalizing designs for all the steps, it was time to see them in action and validate our decisions. To do so, we kicked off the user testing sprint.  

In total, we prepared 6 interactive prototypes and conducted 18 user tests which helped us identify flaws in user experience and solve them before passing designs for the development. 

We wrote a separate article on how we ran user testing for that project, learn more about it here.

Checkout redesign functionality description

In parallel to the designs, we were preparing an in-depth Checkout redesign functionality description to cover system behavior for different user cases and make sure designs are developed as we intended.

Results

In 2 months we managed to revamp airlines booking flow and deliver:

  • 400+ screens for 17 user cases
  • 6 interactive prototypes
  • 18 user tests 
  • 100+ page technical documentation

Last but not least, a seamless user experience that nudges users towards adding ancillary products. 


Have a complex system that needs a redesign? Shoot us an email at marketing@scandiweb.com to schedule a free consultation with our experts! 

If you enjoyed this post, you may also like