Air X | UX Design

I am currently studying at the UX Design Institute. The aim of this project is to familiarize myself with every step of the UX design process and study best practices and design principles. On this page, I keep track of my progress and projects.

BRIEF
This project is part of my study at the UX Design Institute and the brief was pre-defined as:
Design a new mobile app from scratch for a start-up airline, focusing specifically on the flight booking process.
The aim is to create an online experience that is fast, easy and intuitive: one that’s based on a deep understanding of their target users.

ROLE
UX Designer
User Research, Interaction Design, Visual Design, Prototyping, Testing

TOOLS
Figma, Miro, Marvel, Diagram.io, Reflector

Banner: wireframe prototype sketches

1 User Research

1.1 - Competitive Analysis

To find any conventions and common problems to avoid, I researched different competitors in the flight booking industry. Four different apps were analyzed: Big Dutch airline, Charter airline, Budget airline, Airline overview website (wildcard).

Key findings

Nearly all competitors used a simple design, with one or two common user goals as a call to action.

  • Searching flights
    Usually, this was a very simple one-page form, with users being brought to a different screen for more complicated actions and then brought back with the form filled. Useful elements I noticed were the ability to fill departure and arrival with the same action, and nearby or previously selected airports being highlighted.
  • Selecting flights
    The flight options in the most common cases seemed to be tiled, with only basic flight information shown with an option to expand for more information. Most operators gave the user three class options, often with a popular option highlighted. A useful element I noticed was the ability to switch to a different day, with the average price for that day shown.

1.2 - Online Survey

I created an online survey, using Survey Monkey, to get a more quantitative understanding of the context in which an airline app would be used.

* It has been a tough year for the travel industry. The pandemic has limited our abilities to travel, and it feels as though onboarding a plane has become a very distant memory. This has (at the time this survey was taken) most definitely influenced the outcome of this survey. 

Key findings

Airline apps are mainly used to:

  • Book a flight
  • Check-in
  • Check the status of the flight
  • COVID-19 updates

1.3 - User interviews & Usability testing

Four usability tests were conducted with airline competitors’ apps to learn the kinds of features users expected, the pain points they usually run into in the process, and what conventions they followed.

In A/B testing, format participants were asked to complete the same trip booking on two different apps – Budget Airline and Charter Airline.

 Key findings

  • The key findings are incorporated in the affinity diagram
Screenshot of usability test video
Screenshot of usability test video

2 Analysis

2.1 - Affinity Diagram

Sources of data

  • Strengths, weaknesses and conventional ways of data and workflow in Airline apps are taken from Competitive Benchmark
  • Goals and behaviors of users are gathered from Online Survey
  • Users positive interactions, pain points and suggestions are taken from notes made during Usability Tests
Unsorted notes affinity diagram
Affinity diagram categorised notes: User dislikes
Affinity diagram categorised notes: User likes
Affinity diagram categorised notes: User input
Affinity diagram categorised notes: Responsive save search information
Affinity diagram categorised notes: Search bar
Affinity diagram categorised notes: Confusing terminology
Affinity diagram categorised notes: Date overview
Affinity diagram categorised notes: Flight options overview
Affinity diagram categorised notes: Price transparancy
Affinity diagram categorised notes: Flight upgrades
Affinity diagram categorised notes: Pop-ups
Affinity diagram categorised notes: Interaction unclear
Affinity diagram categorised notes: UI
Affinity diagram categorised notes: App usage
Affinity diagram categorised notes: Price overview
Affinity diagram categorised notes: Interaction defaults
Affinity diagram categorised notes: Covid-19 updates
Affinity diagram categorised notes: General booking proces experience
Affinity diagram categorised notes: General overview
Affinity diagram categorised notes: Book flight start menu

2.2 - Customer Journey Map

The customer journey map corresponds (more or less) to the groupings from the affinity diagram. I have tried to capture the reality that some users may visit an airline app many times before completing their task. 

Userflow sketch
Customer journey map

Key findings

The analysis of all the research data uncovered a lot of pain points and room for improvement. To improve the user experience of the booking process I will be focusing on five aspects to improve:

  • Progress and overview
    During the flight booking process, users often seemed confused about where they were in the booking process and what action was expected from them. Users were not always able to tell when a selection is made and the app asks them to make a next (often similar) selection.
  • Date selection
    The usability test uncovered that a calendar should have a conventional layout and intuitive interactive response. The user should be able to work out the calendar within seconds. 
  • Flight comparison
    ‍In the research phase, users had trouble getting a good overview of what flights would suit their criteria best. Especially on a phone, the user has trouble navigating through the days to find for example the cheapest flights. 
  • Price transparency 
    Users would point out that the pricing was not transparent during the booking process. It was not clear from the beginning what was included in the price and what was not.
  • Fear of making mistakes
    Users have shown they feel like they can't change their minds. And if they do, the user doesn't want to go all the way back to the beginning of the process to fix or change their input.

3 Design

3.1 - User Flow

Before getting into the design per screen I created a user flow diagram to get a clear vision of the journey the user would make through my app to book a flight. I started by sketching a general high-level flow without too much detail. Afterward, I translated those sketches to a digital file using Miro. During the rest of the design process, I will make decisions that could affect the final flow diagram.

Userflow map

3.2 - Sketching

Building off of the user flow and the defined navigation I started to think about the layout and interactions on every screen. I started by creating rough sketches of every screen, along with some notes on what each screen should contain. At this point I wanted to validate (or invalidate) my ideas for screen layouts and interactions, the aesthetics were no priority. When the rough sketches were done, I first sketched the screens in a more detailed way before translating my screens to digital sketches. 

Prototype sketches
Low-fidelity prototype sketches

3.3 - Low-fidelity Prototype

I created a low-fidelity prototype from my first sketches using the app: Marvel. I wanted to test the flow, my concept, and users' mental models. I went on to carry out a quick user test with 4 participants. 

*Since this is a low-fidelity prototype not everything was clickable. Beforehand I expected this could be difficult for testing participants. 

Heat map test result
Heat map test result
Heat map test result
Heat map test result

Key findings

After analyzing the user test recordings and the clicks heatmap I concluded that four sections were difficult to navigate through for the participants. 

  • From 
    After participants selected the "From" search bar they would get a search bar screen which also showed: current location, recent locations, and location suggestions. In the low-fidelity test only the "search bar" was clickable. This result could therefore be interpreted both positively or negatively. 
  • Dates 
    After participants selected the "Dates" search bar they would get a calendar screen that showed a preselected date. In the low-fidelity test, only the "9" was clickable. Note to myself: for testing purposes, I should have made all the dates clickable. This made participants confused and stuck in the testing process. It also showed that this page really needs hierarchy and more complex interactive screen states to function properly. 
  • Passenger details
    After participants selected their flights they would get a passenger details screen that showed a form to fill out per passenger and a "Your trip summary" tab. In the low-fidelity test, only the "Title" was clickable first. Participants first thought was not to click on the "Title" field first. This page test results also showed that participants noticed and wanted to click on "Your trip summary".
  • Select seats
    After participants selected the "select seats" button they would get a seat selection screen that showed: selection explanation icons, tab selections per passenger, and the available seats. In the low-fidelity test, only "4F" was clickable. Note to myself: for testing purposes, I should have made all the seats clickable. This made participants confused and stuck in the testing process. It also showed that this page really needs hierarchy and more complex interactive screen states to function properly. It also shows that participants might overlook the separation between business class seating and economy class seating. 

3.4 - Medium-fidelity Prototype

In progress... I will keep you posted!

Merel Dassen 

Product UX Designer