True Fly

True Fly

A new way of booking air travel

Airline travel is a massive industry with multiple airlines vying for user attention (and fares). However, the vast majority of airline websites and apps are sorely lacking in good user experiences. Startup airline True Fly aims to use great design and a user centric approach to gain advantage over larger, established airlines.

  • Client: UX Design Institute (Course Project)
  • Role: UX Design
  • Tools: Pen & Paper, Camtasia, Reflector, SurveyMonkey, Sketch, InVision

Overview

New airline True Fly requires a website and mobile app. The goal is to gain market share through utiilising a user centric approach and dispensing with the frustrations users frequently experience on airline sites.

The project focuses primarily on the airline booking procedure and endeavours to identify key weaknesses and frustrations encountered by users in the process and remedy these.

The method by which users search for, find, book and pay for flights will be investigated and documented. Utilising this research and analysis, a working protoype - along with an accompanying set of wireframes - will be designed and developed.


The future

Will future airline travelers have a good user experience?

My Role

My role in this project is UX Designer. I completed all activites in the UX project cycle in a solo capacity - from research to design to prototyping. This has resulted in the accumulation of a huge amount of knowledge and many new skills such as;

  • User research including identifying suitable users, usability testing, carrying out user interviews and user surveys
  • Competitive analysis and benchmarking
  • Research analysis including affinity and user journey mapping
  • User flow
  • Prototyping and wireframing

The Process

01 / User Research

Users & Audience

Airline users are a very broad demographic. This makes the project somewhat more challenging as there is not a clearly defined target audience. Accessibility and ease of use is clearly of the utmost consideration throughout the project cycle to cater for a wide range of abilities and profiles.

User Survey

A user survey was devised and circulated to a wide range of participants. The purpose of the survey was to learn more about the goals of people who use airline websites and apps. 29 responses were received with many offering valuable insights into the mindset of the airline user. Some interesting patterns that emerged are noted below:

  • Comparative websites were highly rated with 89% utilising them on a regular basis
  • Airline sites and apps are frequented regularly - 82% of respondents had visited in the last 4 weeks
  • Laptops or desktops were the device of choice for 58% with 24% opting for their mobile phone and 13% preferring a tablet

Usability Tests & User Interviews

A recruitment screener was devised to select appropriate users for the usability tests and interviews. Requirements included the booking of a flight in the three months prior to the tests and using the internet on a regular basis.

The usability tests consisted of comparative studies of airline websites and apps. The research objective was to learn about the goals, behaviours and context of airline customers when booking flights.

This (airline) actually recognises that customers are human.

User interviews were also completed with the objective of learning more about the context of use of people that use airline websites and apps.

I check in online, sit wherever there's a seat and take minimal baggage.

Competitive Benchmarking

In-depth analysis of four well regarded competitor sites and apps revealed a wealth of information about best practices and unearthed some unexpected discrepancies also. This analysis will prove invaluable at the design stage of the process.

User Research Results

The results of this research were intriguing. Every user - even the most tech savvy, well travelled of them - encountered frustrations and obstacles during the booking process.

  • 100% of the participants in the usabilty tests encountered problems during the booking process of unfamiliar websites or apps
  • Some insightful comments and views were unearthed during the process such as the opinion that airline sites should function in the same manner as e-commerce sites
  • Depth interviews revealed that users tend to stick with what they know and also employ the use of comparative websites frequently due to their user friendliness
Why do they think they are difference from any other e-commerce website? (The process) shouldn't be any different from buying a jumper.

02 / User Goals

All of the user research was analysed and documented in detail. This material will serve as a constant reference point throughout the remainder of the project and inform all phases of the design stage.

Affinity Diagram

On completion of the initial user research phase, the results were assimilated and used to create an affinity diagram.


Affinity diagram


Post-its were used to highlight user insights and then organised into categories, detailing particular pain points and user insights. The results are detailed in the "Defining the Problem" section.

Post its


User Journey Map

Further analysis of the user research results allowed for the development of a user journey map.

User journey

User journey map (not shown: detailed points regarding goals, behaviours, context and pain points)


The above diagram highlights the users emotions at various stages of the process. It is clear that sections that require customer input are unsatisfactory.

It should say whether seat selection is mandatory or not.

03 / Defining the Problem

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

  • Frustration when inputting data. This emerged as a significant annoyance for the majority of users
  • 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 full price earlier in 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
  • Language and communication issues - the majority of 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 regard to error messages or not being able to fly on a particular date. The copy often wasn't adequetely guiding them through the booking screens
Concerned I haven't booked what I think I've booked.

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.

User flow diagram

"Add Passengers" section from the mobile user flow diagram


User flow diagram

"Choose Add-ons" section from the mobile user flow diagram


The above sections demonstrate the user flow through the passenger and add-on sections of the booking process. These have specifically been shown as they differ a little from the typical booking process flow. The "add passenger" has a conversation with the (logged in) user and asks a few direct questions to establish who is travelling. Traveller details and contact details are autofilled based on the results of this conversation. The "add-ons" section puts the user in control. Rather than forcing users through all the add-on options to get to the payment point, again, a conversation is initiated asking the user which add-ons they want - if any.

04 / The Solution

Prototyping

Based on the user flow diagrams - and bearing the main pain points in mind - sketches of the mobile and desktop layouts were developed. These sketches included consideration of the primary user flow, positioning of main navigation and how interactions on both versions would work.

After many iterations, the rough basis for developing a medium fidelity prototype was achieved and a prototype was created using InVision.

Medium fidelity protoype for the mobile app. Click the screen to interact.

The Outcome

The above prototypes are the end point of this project. Detailed wireframes were also created to communicate with the (fictional) development team on how all aspects of the prototype behave e.g. control rules, feedback messages and so on. The main issues - as identified during the user research phase - and their solutions that have been addressed in the above prototype, are listed below.

  • Issue: Frustration when inputting data.
    Solution:
    At every possible point in the process, the amount of data to be input has been reduced to a bare minimum. No unnecessary fields are in the process. During the initial airport selection stage, only airports that can be flown to from the departure airport appear, this reduces clicks and scrolling as well as avoiding selection of unavailable routes. Fields are added progressively to ensure the user can concentrate on the task at hand and smart defaults are applied where possible - e.g. closest airport to user location is input automatically, 1 passenger is selected by default etc. Another key aspect is the option to select which, if any, add-ons are required in one section. The user then only has to work through the add-ons they want as opposed to going through all of them, essentially fast tracking through the process if add-ons are not required. If users are already registered, they may also add their own details with one click to the passenger section and use a saved card at the payment stage.
  • Issue: Confusion during the flight selection process
    Solution:
    Flights are ordered by time of departure, with filter options to reorder as the user wishes. Departure and return flight selection occurs on one page so the user can easily see what option they have already selected. A small section at the top of each flight selection area also advises the user on their selection and there are multiple opportunities throughout the process to change flight selections if needed.
  • Issue: Pricing transparency
    Solution:
    Flight prices close to the required departure and return dates are displayed as well as the required dates themselves. This provides an overview of pricing so users can be happy they have made the right choice. An overview of the flight selection appears at every stage during the booking process. This includes displaying the price with a clear breakdown if this area is expanded. If add-ons involve a cost, this cost is clearly stated beside the item. The itinerary and payment pages again very clearly show the pricing, with options to view a more detailed breakdown.
  • Issue: Language and communication issues
    Solution:
    Friendly, simple language has been employed throughout the booking process. Buttons are labelled very clearly to let the user know what to expect e.g. instead of a button saying "Next" or "Continue" it says "Next: Add Passenger Details". A progress bar appears throughout the booking process to ensure users understand where they are in the overall process. Feedback is given as much as possible e.g. a text section appears letting the user know how long their trip duration is once they have selected both departure and return dates and buttons only apppear when a section has been completed. This helps to really lead the user through the process.

05 / Identity

An identity was developed for the True Fly brand. Clean and modern, it is instantly reconisable and scaleable. A colour palette with warm, reassuring undertones was also assembled for use across all applications.

True Fly Logo

Identity and colour palette for the True Fly airline


View all projects →

Have a project in mind? Get in touch at hello@katemc.com