Please ensure Javascript is enabled for purposes of website accessibility
top of page

Airline flight booking app

CONTEXT AND BRIEF

Startup airline, FlyUX, require a mobile flight booking application.

 

FlyUX seeks to gain market share by offering a simple, user-centric app that rivals other airlines and one alleviates the frustrations users frequently experienced on other larger, commercial airline sites.

 

The project focused primarily on the unpicking the current process of booking a flight, identifying key weaknesses and frustrations encountered and then looking at ways to remedy these.  

 

The design process was essentially two-fold. First, the way users search, book and pay for flights were investigated, documented and refined. Then, utilising insights from this research and analysis, a prototype and wireframes were designed and developed.

Design Process

01

RESEARCH

Screenshot 2021-08-12 at 12.56.58.png
Screenshot 2021-08-12 at 12.59_edited.jpg
Screenshot 2021-05-05 at 11.14.36.png

Competitive Benchmarking


In-depth analysis of three competitor sites and apps revealed a wealth of information about best practices and unearthed some unexpected discrepancies also. Here is a link to the Competitive Analysis for FlyUX. 

 

Online Survey


In order to understand users better, I took time to engineer and conduct a survey for flyers. The goal was to have a broader understanding of their context and situation, motivations, pain points and expected outcomes. Here is a link to the results of the Online Survey for FluUX.

Customer Interviews


To gain further contextual insight, I conducted interviews with regular flyers to learn about their thinking process when booking a flight.  This enabled me to build deeper insights and also provided me with an opportunity to learn about their needs and desires for an optimised customer journey.

Usability Testing


In order to gain insight from usability testing, I set out a typical scenario or ‘use case’ and asked participants to carry out a series of primary. Observing the participants allowed me to understand how want about completing the tasks and how they felt as they proceeded. All tests were recorded with permission of the users, including recordings of the user as well as their on-screen actions. Notes were taken during the sessions and during video playback.

02

ANALYSIS

Affinity Diagram

Once all the data from the Competitive Benchmarking, Survey, Qualitative Interviews, Usability Tests and Notes was gathered, I set about creating an Affinity Diagram. Doing this sifting and sorting allowed me ( and participants) to naturally group insights and observations that would later make up parts of the User Journey when searching for and booking a flight.

 

During the session all post it notes containing research information from the various sources were placed into groups and following discussions with colleagues were moved around accordingly.  

Following the session these groups were named and numbered according to which step in the purchase process they fell into.  

 

Customer Journey Map

Further analysis of the groups created from the Affinity Diagram allowed me to delve deeper into the key steps of the User Journey.  I examined what were the users goals and behaviours, in what context were they carrying out these steps, what were their pain points along the way and how did they feel throughout the journey. 

I created a Customer Journey Map as a more structured way to present the User’s point of view to the Product Owner and Business Stakeholders.

 

The map also provided an overview of key areas within the site that needed improvement in terms of User Experience.
 

Screenshot 2021-08-12 at 13.36.07.png
Screenshot 2021-08-12 at 13.36.24.png
Screenshot 2021-08-12 at 13.55.00.png

03

INSIGHTS

The affinity diagram and user journey map led to the identification of clear primary pain points in the user airline booking journey.

Data Entry

Frustration due to data input being cumbersome. This emerged as a significant annoyance for the majority of users.

Cognitive Load 

 

Confusion during the flight selection process as to how to proceed or how the flights were organised - this was particularly evident on multiple flight option or transatlantic flights involving stopovers.

Pricing Transparency

 

Users wanted to know pricing earlier in the process and weren't always certain if price was per person or if extras were included. They also wanted to see the prices of flights close to their selected dates easily. A particular sore point was fees and charges etc being added at the checkout stage

Communication and Language Setbacks

 

Users struggled with the language used by airlines and the stage they were at in the process.

 

There was also a lack of feedback from the airline with regards to error messages or not being able to fly on a particular date. Help text often wasn't adequately guiding them through the booking screens.

04

SOLUTION DESIGN

User Flow Diagram

Detailed flow diagrams were created to illustrate the primary user flow (and potential secondary paths) through both the desktop website and mobile app booking processes - from the moment they enter the website to the end point of the booking process when payment has been confirmed.

Screenshot 2021-08-12 at 14.12.02.png
Screenshot 2021-08-12 at 14.13.31.png
Screenshot 2021-07-29 at 23.05.44.png

05

PROTOTYPE

Sketches and the flow diagram were used as a basis for creating an interactive High Fidelity Prototype.

 

As a pre-curser however,  I created a low fidelity prototype in Marvel. This helped further define the pages and page states and tease out flaws. 

 

The prototype was developed in Axure and presented to stakeholders for feedback. 

06

WIREFRAMES

Screenshot 2021-08-12 at 14.30.49.png

User Flow Diagram

Detailed wireframe flow diagrams were created to illustrate the primary user flow (and potential secondary paths) through both the desktop website and mobile app booking processes - from the moment they enter the website to the end point of the booking process when payment has been confirmed.

bottom of page