Airtrack

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.

goals



Use of app to check-in and create boarding pass.



Use of aggregators to compare prices before booking on airline app.



Users spend more time checking prices than booking leading to low conversion rates.



Users aim to buy cheapest flights.

pain points



Filter options are largely unnoticeable on apps.



Fare types are confusing and explanations often add to the confusion.



Seat selection can look clunky and users are not willing to pay extra.



The abundance of details required when filling forms is frustrating.

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

step 1

With a good amount of data in hand, I grouped and organised the information in an affinity diagram. I categorised the data in the following categories: goals, behaviours, pain points, mental models and errors during testing. This way I managed to identify patterns that would lead me to step 2.

step 2

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.

High-Fidelity Prototype

style guide

Firstly I built a Design System to reflect the brand identity I created for the app. This Design System will allow me to re-use components and have a consistent design throughout.

first 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.

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.

AGS

Project Overview

Design process

Context