UX Design Institute
Design an Airline mobile app
through a UX process
Challenge
Design a mobile App for an Airline company focusing on user needs and goals, following an accurate UX process, going through User research, design and building of a mid-fidelity prototype.
My role
-
Learn users goals and context through User research.
-
Understand positive features and pain points of existing Airline mobile apps through Usability Tests.
-
Design an efficient and user friendly flow of the app.
-
Build a mid-fidelity prototype that reflected the results of the previous steps.
Project time
1 year
Background
Challenges I encountered during the process
-
Learning new research techniques involving users.
-
Gathering results after completing the research process.
-
Deeply understand users' problems, create a user flow and design a solution.
-
Learning how to sketch and create a prototype of the solution
-
Creating a wireframe to communicate with developers
The process
The UX Design Institute is an excellent institution where students learn hands-on how to design great experiences for users.
I chose to design an Airline mobile app after researching and understanding users' behaviours and goals.
Research
Competitive benchmarking
I started the research process analysing and comparing three existing airline mobile apps and one travel aggregator app.
​
My goal was to understand and learn conventions and how user-related problems are faced.
Elements of Ryanair Home screen
Elements of American Airlines Home screen
Elements of Alitalia Home screen
Elements of Skyscanner Home screen
Online survey
My next step was to finally know more about users. I sent out an online survey to find out about goals and context of users of airline websites or apps.
From the survey questions I wanted to find out the following information:
-
See which website/app were used the most
and rough time frame of when users have used
them
-
Understand what tasks they were trying to complete and if
they were able to do it or not
-
Improvements users would like to see and possible changes they would prefer
-
What kind of devices they prefer to use to book a flight
​
Example of the outcome of question #4
Example of the outcome of question #5
Mobile Usability Test
This was my favourite part of the research process. Testing real apps with real users was very interesting and I learned how important is to be emphatic and open-minded.
It was challenging at first, but I quickly learned how to be efficient and, more importantly, how to make the users feel comfortable during the tests.
My goal was:
​
-
Observe the users’ behaviours during a booking experience.
-
Identify good and bad aspects of the user experience to help improve the usability of the mobile apps.
I interviewed three participants and I asked them to face two tasks during their booking process.
​
​
Snapshot of the Ryanair usability test
Snapshot of the Alitalia usability test
After completing the usability tests and taking notes for each of them,
I summarised the Goal, Behaviours and Context and identified from each test the Good features, Bad features and Expected features the users experienced.
Example of Goals, Behaviours and Context
Example of Good, Bad and Expected features
Affinity diagram
To gather and organise the insights of the user tests, I set up an affinity diagram. This would have given me a better understanding of the problems to solve.
Working with a team was exciting and challenging and I really enjoyed collaborating and getting to know other opinions.
​
The goals were:
-
Review the research data obtained through competitive benchmark, survey, usability tests and organise them creating an affinity diagram.
-
Work with a team to pinpoint users’ goals, behaviours, context, mental models, positive feedback and pain points, in order to improve the quality of the Airline mobile app.
​
Customer journey map
With a customer journey map I was able to gather together all the data, have a clear understanding of the problems to solve and build a strong base for the following design process.
My goals were:
-
Review the high-level groupings from the affinity diagram and define the different steps in the users’ journey.
-
Understand the users’ point of view and pinpoint the priorities that need to be fixed.
Customer journey map sketch on iPad
Customer journey map on Figma
What is the problem?
​
-
Home Screen: immediately, users' mental model was different from reality. The screen was too cluttered, too much useless info, and some of the users couldn't even find the booking button at first.
-
Add destinations and passengers: users were expecting the option "All Airports" when more airports are available to avoid any confusion and waste of time during the booking process.
-
Calendar: users were expecting to easily be able to book both outbound and inbound flights, but they got confused by the terminology used for outbound and inbound and they couldn't even understand how to book the return flight.
-
Price fares selection: users were expecting a clear breakdown of the fares, but they were quite unhappy about the way this was presented to them. Very unclear prices breakdown, very hard to compare the different fares, useless showing unavailable fares.
-
Stopovers: this was definitely the worst pinfall of the all design process. For the entire test, users believed to have booked a direct flight. Only at the very last step of the booking they realised there was a stopover. This created lot of frustration and some of the users wanted to leave the app and book somewhere else.
Design
Flow diagram
The next step was to define a high-level flow for the mobile app.
The diagram was focused on one flow, that was, one primary use case.
This helped me to understand how users flowed through the design
I sketched out the user flow representing each screen or state by a box. Each interaction, such as choosing a date
was represented by a circle.
​
My goals are:
-
Define the high-level booking flow for the mobile app.
-
Address all the issues highlighted in the customer journey map
-
Lay the groundwork on which I’ll build the designs in upcoming steps
Sketching out the solution
This was the core of the design process. I used sketching to design the solution to the problems users encountered.
​
The challenge was to get a final design that was nice, clear and easy. This process took a while and, after different attempts, I was happy with the result.
My goals were:
​
-
Build on the flow diagram previously created, to sketch the screens and screen states for users flowing through the mobile app
-
Address all the issues and user goals identified in the research and analysis
-
Use sketching as a tool for problem-solving
​
Home Screen and "Book a Flight" main screen
Outbound - Inbound calendar
Departure location - Arrival location
Complete "Book a flight" screen
Insert screen "Add children"
Fly out - Fly back screens
Insert Fare explanation and booking
Passengers details screen
Extra bags - bag info and confirmation -
complete screen
Select Outbound and Inbound seats
Flight Summary - Fare Info
# Home screen and main booking screen
The home screen and main booking screen are very simple and intuitive.
I focused on avoiding any clutter and useless features or information.
# Select location out and in
This simple layout will allows users to use a typical search bar or their location to find a town or airport to travel from and to.
The smart defaults Recent and Suggested will help users start a faster search.
Very important to use the option All Airports for a city like London, where we have multiple choices.
# Calendar out and in
The calendar has a very clean and simple layout reflecting the users' feedback
# Complete main booking screen
The complete main booking screen will allow users to also add minor passengers to the booking
# Fares comparison
Fares comparison was one of the main pain points users found during the usability tests.
With this design, I wanted to highlight the different fares and give a clear breakdown of times, duration and prices.
To select a fare, users will have to go through another screen with the explanation of the fare itself, so that any confusion is avoided.
# Passengers details
The design of the form to enter passenger details is very intuitive and allows users to
log-in if already have an account or to add their details as new users
# Select seats
The select seats screen is very simple and introduces a drop-down screen that shows a clear and detailed price breakdown
# Extra bags or services
This screen will allow users to add any extra bag or service.
As expressed by the users during the usability tests, the design is very clear and shows only the essential features.
To add a bag, users will go through another screen that will give any useful information that will avoid any confusion.
# Extra bags or services
The summary page gives users the chance to check the final details before the payment. Locations, times and duration are shown clearly and an info button gives the chance to double-check the booking.
A menu on the top of the screen gives users the chance to go back to the other sections of the booking in case any amendment is needed.
# Interactions
To make the mid-fidelity prototype as realistic as possible, I created an interactive prototype on Figma, accurately connecting each screen to obtain a high fidelity flow to be tested with users.
# Wireframe
The very final step is creating a wireframe with annotations to hand over to developers, where I included any extra details they will need to build the app.
Prototype
Conclusions and takeaways
Airline mobile apps are probably between the most used apps by people in general and at the beginning of the project I believed it would have been very hard to do something better or different.
I have to say, approaching the design through the UX process, made me understand the good things but above all the many mistakes and inaccuracies that also big companies did when building their apps.
Thanks to the research process, the following ones, design and prototyping, seemed much easier and more fluent to complete. All the elements I didn't even notice at the beginning looked obvious after the research process.
As UX designer, my main focus was to keep the user experience at the core of the process.
Sometimes, this was the challenging part too, trying to avoid self-referential design choices or skip any step with the risk of rushed solutions.
​
Working most of the time by myself was positive because I was able to take my time on aspects that I wanted to examine more in depth and the decision process was all on me.
At the same time though, I would love to redesign the same app with a team of people and discussing ideas, problem-solving solutions and of course having a drink together at the end!