FLY UX

The client here is FLY UX. This client was looking to create an online flight booking experience that is fast, easy, and intuitive: one that’s based on a deep understanding of their target users.

This project is part of a case study to obtain a diploma in User Experience design at the UX design institute.

Client:
FLY UX

My Role:
UX Designer / UX Researcher

Timeline:
Sep. 2020 - Jan. 2021

The process...

01. Research

Benchmarking
Note Taking
Usability Testing‍

0.2 Analysis

Affinity Diagram
Customer Journey Mapping

0.3 Design

Flow Diagram
Interaction Design
Medium Fidelity Prototype

0.1 Research

To fully understand the problem, the first step for me was to conduct some research to understand user behaviour and their intent on booking flights on mobile.

Benchmarking

The first research technique I started with, was
Benchmarking. I have chosen three airlines and one aggregator app to investigate.
The aim here was to see what these apps have done well and what not.

View full Benchmarking here

Note Taking
‍
Pain points noted from 2 usability tests:
‍
"I presume when I clicking on 'Plus', it will tell me what it means..."
‍
"The app looks cluttered, there is lots bits and pieces..."
‍
"Wouldn't normally click on 'Compare Flights...'"

View full Note Taking here

Heading

Usability Testing
‍
To get a deep understanding on how a user behaves when booking a flight, I conducted two comparative tests
using Zoom and Reflector3.

First scenario (EasyJet):
-Book a flight from Barcelona - London
-Depart at the end of October
-Return one week later
-7 nights / 2 people (adults)

Second scenario (TUI):
-Book a flight from London Gatwick - Barbados
-Depart from the 29th of November to the 6th of December
-Return one week later
-7 nights / 2 people (adults)

0.2 Analysis

After gathering all the research I needed, it was time to take all the collected data under review.

Affinity Diagram

I asked my husband to help me out because it was a lot of data to process for a person alone.
We started by dividing the workload and and buying some more sticky notes. It took some time to create the affinity diagram because we went back and forth comparing what we have gathered.

Customer Journey Map

Since we simplified the research data by creating an affinity diagram, it was time to go a step further and give the analysis a structure. Based on the affinity diagram I pinpointed the journey the customer goes through when booking a flight on mobile.

0.3 Design

Before I went straight into designing the app, I took a step back and evaluated what was important. I started by sketching an ideal journey for booking a flight based on the research and developed it further until it became the design itself.

Flow Diagram

This flow diagram is based on an ideal journey that I have sketched (see sketches; right image). The main idea here is to keep the journey very simple and not cluttered. The user has the freedom of going back whenever needed or can straight away edit in the summary section.

Sketches

Before jumping straight into sketching screens, I started sketching and Ideal journey for the user. I took all the pain points that
I gathered from my research and tried to integrate them into the sketches.

Low Fidelity GIF

Sketches from the GIF

Medium Fidelity Prototype

Tools used for the prototype:

You can try the prototype on left or click here to view the prototype n invision!

Wireframes

Based on the medium fidelity prototype, these wireframe sheets contain all the necessary details a developer would need to build the application accurately.

To view the full Wireframe document, click here