​
FLY UX
​
Case study developed as part of a UX Design Diploma from Glasgow
Caledonian University, run by the UX Design Institute.
The aim of the project was to identify positive or negative areas of flight booking
apps, and apply the research to create a prototype and wireframes that offer a solution.
​
​
​
​
​
AIM
Identify problems within airline apps and design the solution
ROLE
Sole researcher
and designer
TOOLS
XD, Sketch, Zoom,
Reflector, InDesign
THE PROCESS
1. RESEARCH
1.1 COMPETITIVE BENCHMARKING
Firstly, I reviewed the four most downloaded airline apps on the UK Apple app store to discover:
• How best-in-class apps solve user problems
• The conventions that should be followed when designing a new app
• The best practices to emulate
• Any problems that can be improved on
​
1.2 ONLINE SURVEY
Next, an online survey was conducted via SurveyMonkey to understand more about the primary goals of airline customers - what are they trying to do? What (if anything) is preventing them from doing so? And what else would they like to be able to do on an airline app.
The survey was completed by 53 people and both qualitative and quantitative data was collected.
​
​
​
​
1.3 interviews and usability TESTS
To understand more about the goals, behaviours, pain points and mental models of users, in-depth interviews and usability tests were reviewed across two airline apps (Aer Lingus and Eurowings).
Detailed notes were taken on everything relevant to the current user experience and presented in a scannable, structured document with highlighted points for improvement.
​
“I don’t remember it saying anywhere that this was a 2-stop flight. I’m done with this now.”
​
​
​
“There's nothing here to say what the options give you. Would be good if there was information underneath prices”
​
​
​
To gather further insights into the flight booking process, next I created a test script and conducted my own interviews and usability tests. Reflector was used to mirror participants phones to the screen, and the sessions were recorded via Zoom.
Users were asked to complete two similar tasks using the AirFrance and British Airways mobile apps, and detailed notes were taken.
​
​
“It's giving me the price for, I presume one adult and one kid, although it doesn't actually say here.."
​
​
​
“If I'm booking and paying in pounds, I'd want the cost in pounds, rather than dollars"
​
​
​
2. ANALYSIS
Through the research methods highlighted above, large amounts of raw quantitive and qualitative data were acquired. To better understand the problems that a new airline app should be solving for users, this data needed to be analysed.
​
​
2.1 AFFINITY DIAGRAM
To begin to structure the data, I conducted a small Affinity Diagram session. ​Data compiled from all previous research methods was reviewed, and observations regarding user goals, pain points, mental models and context were jotted down onto post-it notes.
​
These observations were then discussed and arranged into groups that made sense to us.
Each group was given a logical name, which in this case reflected the user journey - from the homepage through to registering to book flights.
​
2.2 Customer journey map
This Affinity Diagram was used as a basis for creating a Customer Journey Map.
Here, high level steps of the customer journey were defined, and a score given to each based upon users emotions and feedback. This resulted a document that gives a more structured overview of how users feel as they work their way through the booking process of competitor mobile apps.
​
The analysis of the Affinity Diagram and construction of the Customer Journey Map led to the conclusion that areas slowing down users the most lie within the 'Homepage' and 'Results' steps of the booking process. In particular, users were frustrated by:
​
-
Too many options being presented on the homepage
-
Unclear pricing - is price displayed for one person or entire booking party?
-
Uncertainty over the differences in fare options
-
Hidden stopovers that are not obvious on initial results page
-
App displaying flight times that are not available
​
​
​
3. DESign
3.1 FLOW DIAGRAM
Next, I defined a high level flow for the new airline app, addressing issues highlighted in the customer journey map and affinity diagram.
​
The diagram covers the users experience on the homepage through to registering to book flights. Each screen/screen state is represented by a box, and each interaction by a circle.
3.2 DefinING Navigation
The next step in my design process was to define a navigation style that I thought would best accommodate users flow through the app. I reviewed my earlier benchmarking document to see what I could learn from best-in-class airlines, and decided on bottom tabbed navigation.
​
​
​
​
​
​
​
​
​
​
​
​
Most-use-cases will be displayed in the tab, alongside a hamburger button placed on the bottom right (in easy reach of the users thumb) which can be tapped for more options.
At this stage, very rough screens were sketched and annotated before work started on a medium-fidelity prototype.
4. BUILD
4.1 Medium-FIDELITY PROTOTYPE
With the help of my rough screen sketches and annotations above, I used Adobe XD to digitalise the designs and create a working medium-fidelity prototype.
​
Once all interactions were working correctly, the next step was to add UI elements to the design, which can be explored below.
The prototype contains enough detail and interactivity to test the high level flow, screen layouts, and basic interactions.
​
​
​
​
​
​
4.3 WIREFRAMES
Alongside the prototype above, detailed wireframes were created to define and communicate the details that would be necessary for developers to build the product accurately.
​
These annotations specify the controls, rules and feedback for each screen and screen state.
​Now that a working prototype has been created, the next step in the design process would be to validate the product with real users. To do this, usability tests would again be conducted using the working prototype, and further improvements continuously made to ensure a great user experience and successful app!
​
​
