Fly UX

UX, UXR
Project Overview
The aim of this project was to design a website for 'Fly UX', a fictitious airline start-up company. The company specified that the online experience is fast, easy, and intuitive: one that’s based on a deep understanding of their target users.

The end goal was to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes, that can be handed over to both UI designers and then developers.
My Contributions
Everything detailed in this project has been completed by myself. I am responsible for all research and UX design. This project is research based and the focus is on the usability of the product. In a real world scenario this project would be passed over to UI designers and then developers.
Research
Competitive benchmarking
Online survey
Usability testing

In order for me to better understand the usability of airline apps, I reviewed and compared the usability of four popular websites. Airlines that I used for this research task were EasyJet, Ryanair, Norwegian and Etihad. The objectives of this project were to:

  • Learn how best-in-class websites and apps solve the problems we are trying to solve.
  • Understand the conventions we should follow.
  • Highlight best practice that we should emulate.
view competitive benchmarking
Research
Competitive benchmarking
Online survey
Usability testing

Next I conducted an online survey to better understand users behaviours, needs and goals. Gathering quantitive and qualitive data allowed me to determine:

  • The goals of people that use airline websites and apps.
  • What users are trying to achieve during their browsing sessions.
  • See if there are any potential features users would like to see in the future updates.
  • If there are any pain points for users.
  • How users are browsing airline pages.

Findings: The results highlighted The majority of users don’t enjoy searching for or booking flights. Some of the common reasons were due to the process being tedious, confusing, poorly designed and changing in pricing.

view Online survey
Research
Competitive benchmarking
Online survey
Usability testing

Fly UX is a ficticious website and was to be built from scratch, so in this instance we tested competitor websites. I conducted my own usability test on EasyJet and Ryanair. I also reviewed two other usability tests conducted prior to my research; airlines tested here were Aer Lingus and Eurowings. In total 3 participants were used and 4 airlines tested.

The usability tests allowed me to observe the user interacting with the websites and note their mental models, behaviour and their pain points with the booking process in general.

The usability test involved an in-depth interview prior to the test to help gain insight to the users goals, their previous booking experiences and their usual pain points, if any.

Findings and insights:

  • Many sites display too much unecessay information, leading to information overload.
  • Certain features can be confusing and aren't explained properly.
  • Users don't know whether the cost displayed is for one passenger or multiple.
  • Booking process is complex and hard to follow.
View notes from usability tests
Analysis
Affinity diagram
Customer journey map

The next part of the process was to collect all the data from the research stage; competitive benchmarking, online surveys and usability tests. As a lot of this data is qualitative, I needed a logical way to organise it, which is why I used an affinity diagram. The first step was to write out key findings and observations on post it notes and organise them into groups.

The groups that emerged were:

  • Confusion/sensibility
  • Features
  • Core functionality
  • Innovation
  • User priorities
  • User methods
  • User behaviours
  • Pain points
  • Aesthetics
  • Page structure
  • User journey

Patterns and potential fixes started surfacing during the process, most of which could be easily implemented in the design stage.

Analysis conclusions:

  • Structure and flow needs to be streamlined and simplified
  • Only relavent and important information should be displayed to users
  • If features or add ons are to be included they need to be well explained
  • Design should be minimal and pleasing to the eye
  • Theres should be no ambiguity around the cost of the journey

view affinity diagram
Analysis
Affinity diagram
Customer journey map

After collating all the data, I went through each step of the user's journey in the booking process to determine how Fly UX could do it better. Each stage focused on the users goals, behaviours, positive points and pain point in the process. I used quotes from the usability test to provide further insights.

Findings:

This technique highlighted that users had issues with most aspects of the site. However 'searching for and selecting flights' was found to be the most problematic for users. This area would need to be a main focus point when designing Fly UX.

view Customer journey map
Design
Flow diagram
Interaction design - sketches
High fidelity prototype
Wireframes

Onto the design stage, and the initial part was to map out user's flow through the site. This started at the homepage and finished at the checkout stage. I tried to make the flow as simple as possible while addressing the pain points that were highlighted in the earlier projects.

view flow diagram
Design
Flow diagram
Interaction design - sketches
High fidelity prototype
Wireframes

After determining user flow, it was time to put everything together in the form of sketches. These sketches would roughly outline the look and feel of interaction with the Fly UX website.

Like the user flow diagram, the sketches were designed to consider the user goals, behaviours and paint points that were discovered during the research and analysis phase.

After a few different attemps to get the design correct, I settled on the sketches shown below.

view sketches
Design
Flow diagram
Interaction design - sketches
High fidelity prototype
Wireframes

The next stage of the process was prototyping. Once I was happy with the interaction design I got started. I decided to go with a medium/high fidelity prototype, as these prototypes have the ability to convey richer interactions from the user and gain greater data and insights.

​The design then went through more user testing to either validate or find flaws in the design.

N.B. As this is a prototype, not all of prototype is interactable, however hints are given if needed. It is also important to note that I have designed the prototype with UX in mind and in the real world, the UI would need some tweaking.

view prototype
Design
Flow diagram
Interaction design - sketches
High fidelity prototype
Wireframes

The Final stage of UX process is to produce high quality wireframes as part of handover documentation for developers, and in some situations, UI designers too. All pages, components, states and interactions need to be explained and made clear as to avoid any guess work.

Below you can see my final wireframes for Fly UX.

view Wireframes