Improving the experience of Booking a flight

Airline App
Product Design

There is no shortage of Airline Booking apps in the market and their designs bring different experiences (good or bad) to users. This redesign case study was an opportunity to improve the experience users have today with airline booking apps.

maze case study mockup

Project Overview

As part of my Professional UX Diploma at the UX Design Institute, I redesigned an airline booking app that enables people to search & book their flights with great UX so that users feel confident when booking a journey. We were provided with a brief to identify the current process and problems of airline booking apps in the market whereafter we had to design a solution that would increase the user's experience.
Role
  • ✓ User Research
  • ✓ UX Design
  • ✓ UI Design
  • ✓ Prototyping
  • ✓ Usability Testing
Tools
  • ✓ Adobe XD
  • ✓ Zoom
  • ✓ Survey Monkey
  • ✓ Keynote
Time Line
  • ✓ 4 months

The Problem

Currently it is challenging for users to search for and book flights on a booking app. It is not clear how to select dates, location of departure and arrival flights, see options for available flights and feel confident that the booking was made correctly.

Hypothesis

I believe that improving the search and booking process for people who will travel, [will improve their understanding of using the booking app for booking flights], therefore [users are more likely to finish the booking process which will reduce the number of cart abandonments for the booking app].

The Solution

I wanted to design an airline booking app that enables people to search and book their flights with great UX so that users feel confident when booking a journey. The solution focussed on restructuring the layout of the search, select, summary, extras, payment and confirmation screens so that the process is clearer.

maze case study mockup banner

The Full Process

Research

Competitive Benchmarking

My first step was to get an understanding of the airline app landscape by doing Competitive Benchmarking. This was the first step to write down initial questions and observations. I chose the following four sites to conduct my research against and to deconstruct the problem at hand.

View detailed competitive benchmarking→
maze case study observations

Online Surveys

Online Surveys is a powerful way to gather user requirements for both qualitative and quantitative data, and therefore I sent out a survey to several people to get some insights into how they have experienced booking applications in the past.

airline app survey results

Depth Interviews

Next, I wanted to gain a thorough understanding of the thought process of a user planning and booking a trip by conducting Depth Interviews.

Usability Tests

After the Depth Interviews, I conducted 4 Usability Tests to determine if the users can reach their goals, the behaviours of users when using the product and the environment in which the products are used. I used a test script to try and keep things on track, to help users relax and to help myself to pay closer attention. The goal was to ask relevant questions and hold a conversation.

airline app  usability test quotes

Analysis

Affinity Diagram

In this phase, I worked together with another person as I wanted to do the Affinity Diagram in a team to get another perspective. I shared my research that I had compiled up to now with the other person. We then wrote down our observations on post-it notes. After that, we grouped the post-its and named the groups. This step was valuable as we could see patterns emerge which I could use to address specific points.

User Journey Map

After the Affinity diagram, I created the Customer Journey Map which helped me structure my findings from a user's point of view. It also served as a reference document that I could refer back to later on. I first sketched the journey map and the used Adobe XD to document it.

airline app user journey map

Ideation

Userflow

I wanted to first sketch out the User flow as a linear sequence and then recreate it in Adobe XD to understand where all the screens located in the process.

maze case study mind map

Interaction Design & Sketches

After designing the user flow, I wanted to focus on how the content was to be organised, labelled and structured on the app. I looked at conventions and decided for the navigation, horizontal navigation tabs at the bottom would be the best way to go because it helps users find information and functionality quickly. I applied the following principle to the app design & proposed the following solutions:

maze case study sketch

Wireframes & Prototyping

Prototype

I decided to create a Medium fidelity prototype in Adobe XD because I wanted the prototype to be fairly detailed and complete to simulate some interactive functionality and navigation. The purpose of creating a prototype was to test detailed concepts, navigation and flow, the layouts and some basic interactions so that I could still improve the design.

maze case study mid-fi wireframes

Wireframes with Annotations

After creating the prototype, I created a Wireframe document in KeyNote to provide critical details for the prototype such as specifications of how the app will work, as if I would be communicating to developers to start building the product.

View wireframe document→
maze case study styles

High Fidelity Prototype

Below is the final version of the prototype that was created. I included interactions and transitions from Adobe XD to match the products flow.

Testing

Testing was an important step as I could gain insights that will validate or disprove the design decisions that I had made. By doing this I come to understand that even when the prototype was finished, it was just as important to test the product at this stage as any other because I could still uncover areas to improve and discover possible solutions to user issues.

I use the same tasks as I had used previously so I could see if the results would be similar or if they improved. Some of the aspects that could be improved in the future included: refining the copywriting and including discount prices.

final product flyux

Conclusion

The main purpose of airline booking apps is to enable people to search and book their flights. I wanted to create an airline booking app with a great user experience so that users would feel confident when booking their next journey. By following the UX process, the following outcomes were achieved:

highlights for flyux