Air X | UX Design

This is a project I worked on during my studies at the UX Design Institute (March 2021 - January 2022). The aim of this project was to familiarize myself with every step of the UX design process and study best practices and design principles.

BRIEF
This project was 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, Maze, Marvel, Diagram.io, Reflector

AirX_Banner_MerelDassen

Process Summary

My initial approach was to understand similar digital flight booking products and, most importantly, observe how real people use them. I discovered many points of friction and opportunities for improvement. I defined and articulated the problems and gave structure to a large volume of raw data. This served me as a framework to design effective flows and interactions, which later guided me to implement and test the solution.

User Research

Competitive Analysis

To find any conventions and common problems to avoid, I researched different competitors in the flight booking industry. With each their own business goals and target groups. Four different apps were analyzed: KLM (big Dutch airline), Transavia (charter airline), WIZZ Air (budget airline) and Skyscanner (airline overview website).

Questions

  • What is standard and familiar?
  • What are they doing right and what are they doing wrong?
  • How are they solving the same problem?

Assumptions

  • Each airline app has "booking a flight" as its main call to action.
  • An airline app has limited options compared to an airline website

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 to the filled form. Useful elements I noticed are 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 is the ability to switch to a different day, with the average price for that day shown.

Online Survey

I created an online survey, using Survey Monkey, and send it to friends and family who have experience booking flights. I got 12 respondents in total. The goal was to get a more quantitative understanding of the context in which an airline app would be used.

Note: At the time this survey was conducted the Covid-19 pandemic limited our abilities to travel. This has 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

User Interviews & Usability Testing

To learn about the kinds of features users expected, the pain points they usually run into in the flight booking process, and what conventions they followed I conducted 4 usability tests with airline competitors’ apps.

In A/B testing format, participants were asked to complete the same trip booking on two different apps – WIZZ Air and Transavia. 

Note: Due to Covid-19 restrictions these usability tests were conducted remotely. 

Key findings

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

Analysis

Affinity Diagram

To drill down and organize the unstructured data that I had gathered, I decided to analyze all my findings by creating an affinity diagram. 

Sources of data

  • Strengths, weaknesses and conventional ways of data in Airline apps are taken from Competitive Benchmark
  • Goals and behavior of users are gathered from Online Survey
  • Users positive interactions, pain points and suggestions are taken from notes made during Usability Tests

Note: Due to Covid-19 and time restrictions I conducted this affinity diagram process solo using Miro. 

AffinityDiagram18_MerelDassen
AffinityDiagram20_MerelDassen
AffinityDiagram19_MerelDassen
AffinityDiagram17_MerelDassen
AffinityDiagram16_MerelDassen
AffinityDiagram15_MerelDassen
AffinityDiagram9_MerelDassen
AffinityDiagram14_MerelDassen
AffinityDiagram13_MerelDassen
AffinityDiagram12_MerelDassen
AffinityDiagram11_MerelDassen
AffinityDiagram10_MerelDassen
AffinityDiagram7_MerelDassen
AffinityDiagram8_MerelDassen
AffinityDiagram1_MerelDassen
AffinityDiagram6_MerelDassen
AffinityDiagram5_MerelDassen
AffinityDiagram3_MerelDassen
AffinityDiagram2_MerelDassen
AffinityDiagram4_MerelDassen

Customer Journey Map

To even further funnel my data I created a customer journey map using Miro. Since this case study is focused on the "booking a flight" process I tried to capture the ‘ideal’ user journey free from frustration. I also took into account that some users may visit an airline app many times before completing their task.

Userflow sketch

Challenge

The analysis of all my research data uncovered a lot of pain points and room for improvement. I broke the problems down into five key objectives and began to work on them in parallel. These "how might I" questions drove my exploration and experimentation for the design process. 

Progress and overview

How might I help users get a better overview of their progress during the booking process? 

ProgressAndOverview_CB_MerelDassen
DateSelection_CB_MerelDassen

Date selection

How might I allow users to easily select their travel dates in a calendar? The user should be able to work out the calendar within seconds. 

Flight comparison

How might I help users find the flights that suit their criteria best?   

FlightComparison_CB_MerelDassen
PriceTransparancy_CB_MerelDassen

Price transparency

How might I make the pricing during the booking process more transparent for the user? 

Fear of making mistakes

How might I take away the user's feeling that they cannot change their minds during the booking process?  

FearOfMakingMistakes_CB_MerelDassen

Design

User Flow

Before getting into designing I created a user flow diagram to get a clear vision of the journey the user would make through my app. I started by sketching a general high-level flow without too much detail. Afterward, I translated those sketches to a digital file using Miro. Later in the design process, I made decisions that affected the final flow diagram.

Exploring design treatments & UX solutions

Building of the user flow I explored a variety of design treatments and UX solutions by creating rough sketches. At this point, I wanted to validate (or invalidate) my ideas for screen layouts and interactions. The aesthetics were no priority. 

IMG_1992
IMG_1993
IMG_1990
IMG_1991

Iterating & Validating Assumptions

I generated a broad range of ideas and turned the sketches into flows and prototypes. In several rounds, I tested the prototypes, observed users interacting with them, and listened to their likes and dislikes. 

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 using Marvel. 

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

From 

After participants selected the "From" text field they got directed to 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.

Heat map test result
Heat map test result

Dates 

After participants selected the "Dates" text field they got directed to a calendar screen that showed a pre-selected date. In the low-fidelity test, only the "9" was clickable. This made participants confused and they got stuck in the testing process. This made me realize that for testing purposes, I should have given a more detailed task description beforehand. The test 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 got directed to a passenger details screen that showed a form to fill out. In the low-fidelity test, the "Title" needed to be filled in first before other text fields could be clicked. Participants expected that the form could be filled in random order. This page test results also showed that participants noticed and wanted to click on "Your trip summary".

Heat map test result
Heat map test result

Select seats

After participants selected the "select seats" button they got directed to 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. The results made me realize that for testing purposes, I again should have given a more detailed task description beforehand. 

Medium-fidelity Prototype 1

I created a medium-fidelity prototype in Figma based on my low-fidelity prototype and user test results. For rapid testing purposes, I used components from the Material.io design system. After creating the prototype I conducted a usability test with 9 participants using Maze.  

The average time spent on screens in this usability test was 3.2 seconds. Which is good.

The average misclick rate in this usability test was 9%. After analyzing the test results, taking into consideration that not everything in this prototype was clickable, I concluded that mainly two sections in the flow still needed improvement.

Mid-FidelityPrototype_PassengerDetails_FigmaFlow_MerelDassen
MeFiPrototype_Heatmap1_MerelDassen
MeFiPrototype_Heatmap6_MerelDassen
MeFiPrototype_Heatmap5_MerelDassen

Passenger details - How to start?

After participants selected their flights they were directed to the "Passenger details" page. On this prototype page, "title" needed to be clicked first, before participants could fill in any other part of the form. I already expected this would be an issue in this test. In the final prototype, I will adjust this. The test results also show that the participants noticed the return arrow button and the flight summary tab, but in this prototype, this was not clickable. 

Passenger details - Title selection

The average time spent on this screen was 9.48 seconds. This shows that it was not clear enough for the user which action was expected of them. The test results also show that users expected they could return to the form overview by clicking on the grey area. Which is a good thing.

Passenger details - How to continue?

In the prototype, the passenger information for the second passenger "John Doe" was already pre-filled. Testing participants only needed to fill in the details of the first passenger "Jane Doe". This test result shows that participants were confused about how to continue after the final text field when "Jane Doe" was filled in. I will think about how to make the form interactions/states better for prototype purposes (specifics will later be added in the annotations).

Frame-4-2
Mid-FidelityPrototype_SelectSeats_FigmaFlow_MerelDassen
MeFiPrototype_Heatmap2_MerelDassen
MeFiPrototype_Heatmap3_MerelDassen

Select seats - Overview

After selecting the seats for the outbound flight the user gets directed to the select seats overview page. This test result shows that some test participants might have thought they completed the full seat selection already. Since they clicked on the non-active "Confirm details button". I will think about shortcut possibilities or other changes to make the seat selection process faster and more clear. 

Select seats - Seats per passenger

This test result shows that the test participants expected that they could toggle between "Jane Doe" and John Doe". Which is a good thing. But it also shows that they had a hard time figuring out and understanding the screen layout and expected actions. The average time spend on this page was 22.07s  The results also show that they might not have noticed the automatic toggle switch between passengers after selecting the first passenger seat. 

"Logical structure. The only problem is that after filling in Jane Doe it is hard to find the continuation for John Doe."

- Test participant 4

"I miss a top bar with the steps of the booking process (so you know what the intention is and where you are in the process)."

- Test participant 6

Medium-fidelity Prototype 2

After analyzing the test results I made some iterations in my prototype. To validate my iterations I conducted another usability test with 4 participants using Maze.  

The average time spent on screens in this usability test was 2.1 seconds. The average misclick rate in this usability test was 8.3%.

Prototype

Handover Document

AirX_wireframe_MerelDassen

What I would do differently 

Better specify the target group

During the process, I had a rough idea of who I was designing this fictive app for. If I had to redo the project I would make the target group more specific and think about fictive business goals as well.

Dive deeper into UX writing

Looking back I would have done more research about UX writing for airline apps. 

Merel Dassen 

Product UX Designer