Project Overview

UX/UI Designer
User research, Interaction design, Visual design, prototyping, testing

Brief

This project was part of my bootcamp with the UX Design Institute and the brief was pre-defined as:
Your client is a start-up airline. They’re looking to create an online experience that is fast, easy and intuitive: one that’s based on a deep understanding of their target users.
Design a new mobile app for your client, focusing specifically on the flight booking process.

Tools

Figma, Miro, Diagram.io, Reflector

Duration

12 weeks

Context

2020 was 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.

Now that vaccines are being rolled out across the globe, the prospect of travelling abroad has become alive once again. Companies like Skyscanner have reported that 55% of their consumers are planning a holiday within the second half of 2021.

With this in mind, it would be fair to say that consumers are looking forward to booking trips on airline apps again.

On another hand, having used many airline apps myself over the years, I came to realise that none of them would offer a similar booking experience. It would be easy to assume that the user has a simple goal in mind — find and book tickets! So how can the booking experience be so inconsistent? Being intrigued by this idea, I decided to dive into it.

Design Process

Desk research

I decided to kick off the research phase by looking into existing studies and gather data which would confirm or refute my assumptions.
I managed to uncover some interesting findings around user’s goals and pain points.

Competitive benchmark

Having established a bit more context from the desk research, I went on to carry out a competitor analysis with 4 different apps: EasyJet, British Airways, SouthWest Airline, Skyscanner.

I picked EasyJet and British Airways as they are amongst the most popular airlines in the UK. I also wanted to compare with them a popular operator overseas and an aggregator hence SouthWest and Skyscanner.

EasyJet: it offers a good balance between intuitive design and usability. It is visually pleasing and menus are well designed. However, once flights are selected, we can notice the focus on upselling extras with the abundance of upselling suggestions. The “Extras” screen cannot be skipped which is rather frustrating. A lot of steps were also required to register the passenger details.

SouthWest: the app seems to focus on usability rather than UI. The saturated colours aren’t necessarily appealing however it was easy to navigate through the app. It was the only app to offer a “sign in” page as landing page — this might appear unnecessary if most users use the app to browse prices? When selecting flights, it offers lots of different fares which I found rather confusing and long to read.

British Airways: The app is visually attractive. The ‘cheapest fares’ menu, to browse destinations and give users inspirations for future trips, seems handy and well presented. The 12-month calendar view for fares is very useful to compare prices. On another hand the date selection was confusing and once the flights have been selected there are an additional 4 menus to go through before getting to the checkout. It makes the process feels lengthy.

Skyscanner: The app focuses on browsing and this is reflected by the structure of the menus being quite different and giving the ability to change the searches easily. The interface is very intuitive and the “save” and “share” functions allow to personalise the experience which is not offered with airline apps.

User interviews & Usability Testing

The next step was to carry out user interviews to gain insights on how the participants would interact with airline apps. Following the interviews, the participants were also asked to participate in usability testing using existing apps. The testing consisted of two parts and 6 participants were recruited.

PART 1
In a A/B testing format participants were asked to complete the same trip booking on two different apps — EasyJet and Eurowings.

PART 2
I wanted to find out how users would feel about browsing holiday destinations directly on an airline app rather than aggregators. Based on the desk research, users do spend more time checking prices rather than booking but aggregators are more commonly used for that purpose. Therefore I asked the participants to complete a list of tasks within the browsing menus of the British Airways app.

Key findings

• Too much information or options on the Home screen would overwhelm the users and distract them from their main goal.
• Users aim to fill as little forms as possible and expect forms to have clear legends in the fields.
• While the users’ goal is to aim for the cheapest fares, they would not mind paying a little extra for better timings.
• All users had different expectations on how the flights should be listed i.e. by price or time of departure. However none of the apps offered filter options
• Fares — majority of users did not understand what the fare names implied, they would struggle to find info on the screen or would not bother reading the long description or even misunderstood the benefits
• Users preferred selecting bag allowances separately and would take time to read legends to find out what’s included but frustrated when legend was hard to find i.e. small font or greyed out.
• They would not pay extra for seats and would get easily confused with the lack of legends
• The browsing function on British Airways would be often missed or not seen as useful

Affinity Diagram

The whole booking process implies a lot of menus. In order to understand the directions I would need to take with my design, I arranged the data in categories that reflect each step a user would usually take during a booking process. Within the categories I incorporated user goals, behaviours, pain points, expectations and errors made during testing.

Persona

Now that I gathered and organised information from my research, I wanted to create a persona that could reflect the goals, needs and behaviours amongst the targeted audience. It helped me focus on tackling the most important problems — to address the major needs of the most important user groups. It is both fictional and realistic.

Please meet Alex! An IT consultant who enjoys travelling abroad a couple of times each year.

Problem Statement

While Alex enjoys planning trips abroad but booking flights can become the low point of his experience. He often ends up with unexpected or poorly explained charges during the checkout. The menus tend to offer too many information to read or options to choose from. And Alex is unlikely to pay for extras but feels as though they are forced upon him with certain apps.

Now that we understand Alex’s experience with airline apps, I can synthesise the findings with problem statements that will allow me to build solutions to his problems.

HOW MIGHT WE…

• Increase user’s confidence with their selection and avoid “bad surprises” before processing payments?
• Reduce the amount of information within menus and make selection easier to understand?
• Reduce the amount of upselling and speed up the booking process?

User Journey Map

We are now putting ourselves into Alex’s shoes and walk with him through a booking process. We are noting the following. A few opportunities arise from this process to improve experience:

• Screens should only offer options that are relevant to the users — otherwise they would feel overwhelmed on the get go. In this instance, the homepage should avoid displaying offers etc and focus on main functions
• Separate outbound/inbound selection and display “live price” to give user confidence with selections
• Offer “sort by” filters to give more control to the users but make it distinguishable — we noticed that most users would miss it during research
• Fare — offer concise legend OR remove the option completely as users aren’t likely to purchase
• Flight summary — this is a crucial step as it is the time where user can see whether their selection is correct and meet expectations — any legends hard to distinguish, unexpected charges or poorly explained charges would lead users to abort the process
• Extras to checkout — give more control to the users at this stage and speed up the process. They are eager to end the process so additional steps that may not be relevant and forced onto them would give a bad impression and bring down their confidence.

Feature prioritisation

Using the MOSCOW method, I have prioritised the key features for each step of the booking process. It was important for me not to get carried away by adding additional functions on the screens where the user goal was to have a simplified and faster experience. For instance from the research, all airline apps had a different approach on making the user select “extras” — majority would dedicate an entire screen for each extra and add long legends to read which lengthen the process. So the question is — are we able to merge some of the steps without overloading the screens with information?

Equally, one of our goal is to increase user’s confidence which usually takes a dip from the flight selection all the way to the “extras” selection. Therefore the challenge is now to offer features that mostly focuses on supporting their selection and add clarity on what they will end up with in their checkout.

User Flow

After defining the goals and deciding on the features to include, I went on to establish the information architecture of the app by using a User Flow. It helped me visualise the relationship between the content and examine the hierarchy.

Low-Fidelity Wireframes

With the key features and user flow defined , I started to capture my ideas by sketching low-fidelity screens using pen and paper. It enabled me to examine my ideas before moving onto digital wireframes.

Medium-Fidelity Prototype

Once I had a visual direction for the app layout, I started to add more details and precisions to the sketches by turning them into mid-fidelity wireframes. In these wireframes, I included elements that directly address users’ goals, needs, frustrations while incorporating common design patterns seen in other airline apps.

Homepage & Flight Search Form

As previously mentioned, my aim was to offer simplified menus that allow users to reach their goals without obstacles. Based on my research, I uncovered that users would use airline apps for three main reasons: book flights, check-in before travelling and create digital boarding passes. Consequently, I decided to display those three options only on the Homepage.

The Flight Search Form focuses on the key details required to browse flight options: departure & arrival airports, dates and amount of passengers. For each category, the user will be taken to separate menus to make their selection.

Date Selection

Majority of users would be looking to book the cheapest flights possible. As a result, I wanted to add price information early on in the booking process. While choosing dates, and whether the users have specific dates in mind or only intend to browse, I incorporated the flights average price for one passenger for each day. I chose to do so with a graph calendar view which gives visual support when looking at dates and associated prices.

Fare Selection

Fare options can arguably be the number one user pain point in the booking experience. They usually come with lengthy text of explanation or are badly prompted. While the intention is to offer packages that can benefit the users but they just end up confusing them more than anything else. For that reason, I limited the fare selection to Business Class and Economy Class. The users can select when adding the amount of passenger and a concise explanation given for each option.

Flight Selection

The research showed that users had different expectations on how the flight results should appear. I chose to display the flights by time of departure as a default option as users are usually willing to make a trade off between price and timings when making their selection. Having said that, it was also key to have a “Sort by” button predominantly placed on the screen so that users could re-arrange the results to their liking. Upon selection, a notification tab bar would animate at the bottom of the screen to confirm the selection. This feature is commonly found on e-commerce apps and provides confidence to the users when selecting items. However I noticed that it was barely used in airline apps.

Passenger Details Form

As mentioned before, users can be easily frustrated when forms are asking for too many details, and some of them can also look irrelevant. For those reasons, I kept the form as simple as possible and only asked for titles and names. The email address is required for the main booker in order to get a digital receipt. From this point on, I also incorporated a fixed tab bar at the bottom of the screen for the following reasons: it provides a “live price” to the users so they can keep track of their purchases. Users can expand the menu and edit their selections directly on there. Again a common feature in e-commerce which seems to fit the needs to the users in this context too.

Extras

In the booking process, this step is usually associated with annoying upsells, endless promotions and offers to scroll through. In short “Extras” doesn’t have a good reputation. Here, I kept the options simple: add your luggages and select your seats. These are the two extras users have an expectation to choose and pay for. Initially, I was a bit worried that it would be a lot to go through on one screen. However I did not want to split “extras” over two screens and users can skip it altogether if need be.

Trip Review & Checkout

During my research, I noticed that some participants struggled to review the trip details effectively due to the abundance of information to review on one screen. As a result, I condensed the details into sub-menus that can be expandable or collapsable. It helped with keeping the screen look more clean and tidy but most importantly, it doesn’t overwhelm the users with a huge amount of information to process at once. Within the sub-menus, users can edit their selections.

Usability Testing (Part 1)

With the first prototype ready, I went on to carry out moderated usability testing with 6 participants. The goal was for them complete a full flight booking. While the app incorporated design patterns that could be commonly found in other communication apps, I was curious see whether the new functions would offer comprehensive solutions to the challenges found during the research phase.

Key Findings

• Flight search form — all users managed to fill the form with ease. Initially, I was worried the graph calendar view would pose some problems, but I was quickly reassured by the positive feedback received and 100% success rate when users were asked to select their trip dates.
• Flight selection — more than half of the participants missed the “sort by” button when browsing flight results as they found it hard to distinguish. But more interestingly, while all users mentioned that having this button was handy, half of them wouldn’t have used it as they preferred browsing and comparing results. The notification tab bar was widely missed as the animation was too quick and users would not focus on the bottom of the screen after making a selection
• Extras — some participants were confused with the luggage selection. The two types of luggages did not seem particularly clear and the abundance of numbers on the screen did add to the confusion. On another hand, the seat selection was straight forward, although it was brought up to my attention that an option to upgrade to “Business Class” should be offered at that stage.
• Trip review & Payment — half of the users were interested in reading the terms & conditions, however there was no option to expand them. The trip details, condensed in sub-menus, were easily understood. In the payment screen, some users would have expected to have the ability to scan their card.

Style Guide

High-Fidelity Prototype (1st Iteration)

Flight Selection

Following the first round of testing, I decided to tweak the “Sort by” button design a little. The goal was to make it more distinguishable so users know it’s there but it shouldn’t become a focal point on the screen, as it is not a main function. As for the notification tab bar, I changed it to an overlay screen as it animates in and added a dark background around it, so the focus is drawn into it when it appears.

Extras

Names for the luggages options have been changed to “Standard 15kg” and “Heavy 24kg”. The aim was to suggest a “mental” load in the names so that it requires less effort from the users to distinguish the difference between the two, and help them make their choice quicker. The explanation given for “cabin bags” has been synthesised to reduce the amount of text to read and a “more info” link added instead. Under the “seat selection” menu, a button has been added for users to upgrade to “business class” from there and access the premium seats. The “Skip” button has been given a more predominant look to emphasise the idea that extras can be easily omitted.

Trip Review & Checkout

Based on the users’ feedback, the terms & conditions have now the option to be expanded. Additionally, a “scan your card” button has been incorporated in the payment menu for faster checkout

Usability Testing (Part 2)

I conducted a final round of usability testing to review the latest changes made. The sessions were unmoderated and I collected feedback from 16 participants. The goals were widely similar to the first round as I wanted the participants to test the menus involved on the booking process. However I was keen to learn whether the changes made would eliminate the issues encountered by the previous participants.

Key Findings

I was pleased to see that the changes made, on the back first round of testing, eliminated the issues faced by the previous participants. However a couple of other issues surfaced.

Colours & Accessibility — the colours chosen for CTA buttons presented some accessibility issues as white text on yellow or green backgrounds did not create enough contrast ratio. As a result, I added more shade to darken the colours and chose to opt for a dark font with yellow background. I also reduced the saturation and “flashiness” of those colours for a cleaner look.

Seat selection: when selecting seats, the aisles indicators, at the top, quickly come out of the screen as the users scroll down. It makes it harder to locate specific seats. To resolve this issue, I have moved the indicators closer to the seats and added them to each categories.

Final and Interactive Prototype

Takeaways

While designing all the screens individually, I found myself going back to several of the tools and living documents. This helped me come up with a solution that would add the most value to the application. I also found myself overcoming several challenges by trusting the process. Here are a few of my takeaways from this project:

• There are many great ideas, always select the one that will add the most value to your product and your user.
• Each step facilitates the next — trust the process.
• Don’t fall in love with your ideas — including those that aren’t your first.

Next Steps

Protecting our planet and reducing our carbon footprint should be at the forefront of airlines’ agendas. We have become increasingly aware of our impact in accelerating the global warming, but airline companies have their fair share of the blame. With this in mind, I would take the following next steps for the app

• Gamify the booking experience so that users can choose to book trips that reduce their CO2 emission
• Add features that promote ways airlines can reduce their carbon footprint
• Educate users on how they should book trips that reduce their CO2 emission