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.
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.
User Research, Interaction Design, Visual Design, Prototyping, Testing
Figma, Miro, Maze, Marvel, Diagram.io, Reflector
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.
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).
Nearly all competitors used a simple design, with one or two common user goals as a call to action.
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.
Airline apps are mainly used to:
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.
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
Note: Due to Covid-19 and time restrictions I conducted this affinity diagram process solo using Miro.
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.
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?
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.
How might I help users find the flights that suit their criteria best?
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?
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.
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.
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.
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.
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.
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.
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".
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.
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.
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).
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.
- Test participant 4
- Test participant 6
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%.
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.