case study:
Sky Blue Airlines
App design with
the UX Design Institute
Sky Blue Airlines is a mobile app concept I crafted as part of my UX Design Professional Diploma with the UX Design Institute. Through extensive research and ideation, I brought the idea to life with a clickable prototype, following the product design process. The aim was to pinpoint and tackle usability challenges commonly encountered in existing flight booking apps using various research techniques to empathise with users in order to create a smooth and enjoyable flight booking experience.
I've taken on all aspects of this project myself, covering everything from research to UX design, focusing on ensuring the product is user-friendly.
The problem:
Booking flights can be a frustrating experience. For the project I had to create a prototype which tackles the pain points and friction when booking a trip on a flight booking app.
The process:
The UX Design Process - from the UX Design Institute
01
Research
Competitive benchmarking
Online survey
Usability testing
//
For me to better understand the usability of airline apps, I reviewed and compared the usability of three popular flight booking apps - British Airways, easyJet and Kiwi, to identify what they are doing well and learn from what they are doing wrong.
I am using this method to:
-
Learn how best-in-class websites and apps solve the problems we are trying to solve
-
Understand the conventions we should follow
-
Highlight best practice that we should emulate
Here I found that BA app was very simple and clean. The journey after selecting flights during the entering details stage was very quick, with minimal clicks.
Kiwi, a flight aggregator app, was also very simple and clean. It had a lot of functions though, some useful which gave me food for thought, but a lot of them were just adding to confusion and giving too many options. There was a lot of upselling too during the entering details stages. The app seemed to me to be aimed at people who were very used to booking flights and so would like having these extra features to have more control over their choices.
The easyJet app had a simple interface, however this app had features which felt the most frustrating, with unclear pricing and upselling being the most frustrating part of the app.
Competitive benchmarking
Usability testing
//
I then conducted an online survey to better understand user behaviours, needs and goals. Gathering qualitative and some quantitive data allowed me to determine:
-
The goals of people that use airline apps and websites
-
What users are trying to achieve during their browsing sessions
-
See if there are any potential features users would like to see
-
If there are any pain points
-
How users are browsing airline pages
I had 10 responses, and feedback gathered showed that at least half of users did not enjoy the booking process, depending on the app or website, due to:
-
Apps / sites being confusing
-
Better visibility of prices and flights
-
Rising fees
-
Confusing baggage rules
-
Too many clicks
Online survey
Generally, do you enjoy booking flights?
"It’s long winded, usually has confusing rules about baggage and trying to charge you for extra."
Competitive benchmarking
Online survey
//
After the survey I moved on to conducting usability tests, where I tested the Kiwi and easyJets apps. I also watched back two videos of usability tests, taking detailed notes, for AerLingus and Eurowings. I then gathered evidence from three participants and four apps were tested.
I chose to have the Kiwi and easyJet apps tested with a user because from the results I got from the survey a lot of people mentioned they used aggregator apps first, and many people use easyJet with the hopes to save some money. I found that Kiwi - a flight aggregator app - had a lot of useful features that I wanted to test with a user, and I also wanted to understand the pain points from both apps, particularly easyJet, to gain some insight into how to build my own app with a better user journey.
The usability tests enabled me to observe how users interact with the apps, noting their mental models, behaviours, and pain points during the booking process. Each test began with an in-depth interview to understand the users' background, goals, previous booking experiences, and any usual pain points they encountered.
Findings and insights:
Having learnt from the previous analysis methods areas that started to look like frequent issues, I now found the following which came out of the usability testing. They again mirror the same issues:
-
There tended to be too much information on homepages and confusing information through the process
-
Confusing or misleading features, lacking in clarity
-
Confusion over costs of flights
-
Frustration over rising costs through app process
-
Lots of clicks to get through booking process
Using triangulation, these methods had given me a base for a well-rounded perspective in my design process, giving me comprehensive understanding of user needs, behaviours, and experiences to build my flight app with.
Usability testing
User notices other destinations when choosing seats, that it’s a 2 stop flight each way, says it wasn’t mentioned before -
“I’m done with this now... Out, finished.”
"What I clicked on made it look like it was direct"
User Test highlights
User problems
From the research phase I have discovered that most users have the following problems and pains:
-
Excessive and confusing information on homepages
-
Confusing baggage rules
-
Misleading or unclear features
-
Confusion over flight costs
-
Increasing fees
-
Frustration with rising costs during the booking process
-
Need for better visibility of prices and flights
-
Too many clicks to complete a booking
02
Analysis
Affinity diagram
Customer journey map
//
Once I collected all my data, I used an affinity diagram to organise the mostly qualitative data. I wrote out the key findings and observations on post it notes using Miro, and organised them into groups to clump and categorise data.
The groups that emerged were:
-
Aims
-
Behaviours
-
Homepage
-
Flight search
-
Calendar view
-
Flight selection
-
Journey through app
-
General forthcoming messaging
-
Pricing
-
App overview
-
Other needs for app
-
Unique features
"Yes, seeing the fare information there probably did influence me to choose it"
From these groups I could see the frequency and impact of particular issues, and what could be tackled in order of importance, priority and effectiveness in my designs.
The recurring themes that came up here were price pain points, which came up most frequently with upselling and lack of forthcoming information, including confusing baggage info, playing the biggest parts. Lack of visual clarity was also a big factor.
Affinity diagram
//
I used these findings to put together a customer journey map, visualising the overall customer experiences as users interacted with the products. Here I focused on positive points and pain points, the users' mental modals, their goals and behaviours.
The key pain points and most frequent issues I came across from the affinity diagram and customer journey map were:
-
Confusing interface, unclear hierarchy
-
Lack of clarity in pricing structure, availability of flights, baggage allowance
-
Constant upselling, fears of price increases
-
Too many clicks through process
-
Fears of losing progress
Across the findings it looked as though users were most unhappy during the entering dates, the fare selection and the add ons and entering details stages - areas where I wanted to focus on and differentiate my app from others. To ensure I could quickly validate my concept with users, I focused on designing a minimum viable product that included only the essential features of the booking process. Those features I wanted to focus on and improve upon based on the research and analysis were:
-
Clarity in prices
-
Baggage information clarity
-
Forthcoming information
-
Reducing the amount of clicks through the journey
-
All while focusing on a clear and simple hierarchy
Customer journey map
Calendar -
"I don't really understand the pricing, it seems to be changing"
03
Design
Flow diagram
Interaction design - sketches
Medium/high fidelity prototype
Annotations
//
To start off the design phase, I created a user flow diagram for the process of booking a flight, focusing on improving the most common use case by addressing the:
-
Clarity in prices
-
Baggage information clarity
-
Forthcoming information
-
Reducing the amount of clicks through the journey
-
All while focusing on a clear and simple hierarchy
To tackle these pain points, I built the the flow diagram by:
-
Having the user add in the size and number of bags on the homepage, at the adding of passengers stage - this will mean the user sees the true cost of the flight from the start of the process and will also reduce clicks at a later stage
-
Adding in smart default inputs where possible, for example inputting the user's nearest airport, to reduce clicks
-
The calendar state showing the departure and return dates, and the days between for a clear overview, for further clarity
-
A booking summary after selecting the flights, as well as an option to check the itinerary again after sign in, while inputting passenger information. This is so the user isn't nervous about continuing while not sure they made the right selections, avoiding the feeling or need to go back in the journey
-
The sign in process stating the user won't lose their progress, and an option to continue as guest to reduce the clicks if they wish
-
Only one point in the journey to upgrade their flight if they wish, using simple and clear information of their options to see what they are gaining, and no need to upgrade if they don't want to
-
Automatic allocation of seats to reduce clicks - taking out the seat selection stage
-
Using ApplePay at the end to reduce clicks and speed up the process
Flow diagram
Medium/high fidelity prototype
Annotations
//
From the user flow I then created low-fidelity sketches, the prototypes outlining a rough look and feel for the screens and interactions of my new flight booking app. These sketches allowed me to spot any potential problems early and allowed me to easily tweak them at this stage.
Interaction design - sketches
In the sketching process I then further tackled the pain points below. I also came across some areas I found I needed to tweak from the flow diagram stage:
-
Update: Putting the addition of passengers, baggage and fare type onto one state to reduce the number of clicks
-
Adding a pop up at this baggage input state to provide more information to help the user be aware of everything that is included from the start
-
On same state, provide clarity that the user can upgrade from economy at a later stage if they wish
-
Adding a favourites tab on the airport selection screens, as an alternative fast option if the smart default is not the airport the user needs
-
Highlighting the date at the flight selection stage, adding clear, comprehensive information and hierarchy
-
Adding in a progress indicator for the entering details stage to give the user an overview of what to expect
-
Chunking and adding in affordances throughout where I could
-
A final pop up after the booking is complete providing useful information and also an indictor that everything is booked and payment is successful
Flow diagram
Interaction design - sketches
Annotations
//
Once I was in a good place with my low-fidelity wireframes, I created a medium-fidelity prototype of my app in Figma. The prototype allowed users to test the app, giving me richer feedback on interactions. The prototype went through several rounds of user testing to validate and find flaws in my design. This included user tests on smaller sections of the app, to finesse and try to iron out particular pain points we came across in my designs.
Medium/high fidelity prototype
I found this stage particularly useful, as one of the ways I had planned to reduce the number of clicks in the add ons / entering details stage was to have all seats automatically allocated when purchasing tickets as they used to do, therefore taking out the seat selection stages for the outbound and return journeys.
All of my users did not like this as they've come to expect this function, and so wanted to be able to select their seats. I found that it was worth keeping the extra clicks so the users could pick their seats, but finding a way to streamline and reduce those clicks within the seat selection process by allocating the same seats on the return flight as on the outbound flight if possible. I explain the function with a tutorial overlay on the return seat selection screen.
Other useful details I took from these tests were to:
-
Add the prices of each leg of the flights in the flight summary
-
To be even more clear that on the flight selection screens that the baggage the user selected was included in the shown price for that flight
-
Other areas where I could improve the copy to become even more clear to the user, such as on the baggage information pop up
Once out in the world, through further user tests and feedback I will gain even more insights for new iterations of the app.
In my designs I made sure to:
-
Keep the UI very simple, reducing the clutter, I make sure to explain certain aspects, such as baggage allowance and sizing, the reason for taking particular details. To tackle the pain points coming from lack of hierarchy and not enough clarity in information and baggage options.
-
Made price increases a choice and very clear, making sure they are a true upgrade or a useful element that the user wants with adequate, to the point context, and nothing is being forced on them. This will ensure that user feels happy and in control during the process.
-
Reduced clicks in the upgrades and seat selection stages, by taking out unnecessary add ons such as insurance, car rentals, and streamlining the seat selection process. This way the user won't feel frustrated, like their time is wasted or start to feel lost with all the options.
-
The payment stage option starts off as Apple Pay to speed the payment up and reduce clicks here, with an option to pay by other means if the user wishes. Here the user can feel in control by making it a speedy process, or choose to pay in a way they feel is more secure, the added steps being a choice they want.
Annotations
Flow diagram
Interaction design - sketches
Medium/high fidelity prototype
//
Before I did my 'final' user test, I annotated the prototype of the app. If this app were to exist in the real world, this would be sent to developers to build, and once the built version is live, I would gather more insights to continuously update and improve the user experience of the app, using metrics and more user tests to observe usage in a real environment. I used feedback from my project evaluation to create the current version of the app to simulate my 'live' app, updating the app further, as for this project I can only really use my user testing.
04
Evaluation
Through the process of improving the user experience in my app, I found that there was a tricky balance with the app being a business, and trying to improve users experience with pricing and constant upselling. I believe I found the balance through being transparent, clear and not forceful. An example of this is allowing people to add their baggage at the start of the process so the price is clear from the beginning - however results from metrics would show where the app needs refining should it ever be used in the real world, along with any other user feedback I would get from the app through analytics tools, support tickets and more user testing.
From this new experience, and from the results I got from doing the research, I can now reflect on how to do each of these better with future projects, for example how to put together better survey questions and getting more useful answers out of people, what I'm really looking for when I do competitive benchmarking, how to get more out of my user tests. With more time I would have done a user test with better airline apps such as BA or Qatar Airways, to apply the further learnings from that towards my app. I will grow and develop a better understanding of UX Design on my own journey in this field.
