Air Pegasus
UX
UI
Research
Analysis
Prototyping
Branding
Animation
Triangulation was done by implementing a combination of qualitative and quantitative methods to enhance the credibility of my research. Since this is my first (fictional) UX project, I based my target audience on myself—a millennial who frequently flies between Asia and Australia, to facilitate the research.
Competitor benchmarking
I analysed three competitor airline apps to gain insights into their features and solutions.
Strengths to emulate
Present only essential information with collapsible details
Clear visual hierarchy
Break booking steps into organised screens
Auto-fill user data
Currency-switching
Continuous cost display
Key conventions
Bottom navigation bar
Universal icons
Price comparison panel for alternate dates
Features should align with user goals—e.g., showing deals suits undecided users but may clutter the home page for others
Features to avoid
Bringing up browser within the app
Excessive scrolling and distracting promotions that disrupt the booking flow
Online survey
I created an online survey using Google Forms and sent it via WhatsApp to 14 participants who have used a flight booking app/website within the last year.
Key findings
Half of users were using the apps/websites to book flights, half were researching on flights.
92.9% of users were able to complete their task easily. 7.1% were able to complete their task with difficulty. None were unable to complete their task.
The top 3 most important things to users are the comparison of flight dates and times, clear prices, and comprehensive search filters.
Usability testing
Next, I watched some moderated usability test videos conducted by UXDI where two users had to perform tasks for two airline apps (Aer Lingus & Eurowings).
I also conducted an in-person moderated usability test with two airline apps of my choice (Scoot & Qantas) using Zoom.
Key findings
Pain points:
Not remembering users' previous search
Fare selection interaction not matching user's mental model
Unclear transition from departing flight to returning flight selection
Unclear fare details
Unclear flight transfer information
Insufficient prompts for task progression
Good points:
Dates of the week are pinned at the top of calendar
Fare type information shown as concise points with option to expand to view more details
Saved recent flight searches
User suggestions:
Add clear flight transfer indicators
Add currency change feature
Pain points:
App brought up browser during flight search
Pop-up disclaimers
Too much information shown on fare details
Mandatory checkbox step for insurance
Good points:
Intuitive home page
Smart default currency adjustment
Clear fare type naming
Clear icons
Affinity mapping
All of the research gathered earlier were reviewed, and clear groupings were established to summarise key themes.
Customer journey map
Using the affinity diagram groupings as a starting point, I mapped out the steps in the user journey.
Based on the map, I discovered that users are most frustrated during the flight comparison and selection step.
A recurring theme surfaced:
Displaying unnecessary information and lacking critical details cause frustration, which increases user drop-off rate.
Flow diagram
I took the customer journey map I developed and attempted to define the average user's ideal booking flow for my app, along with alternate paths.
Sketches
I reviewed my flow diagram and sketched all relevant screen states — from the homepage up to the booking confirmation.
Wireframing,
UI design,
Prototyping
Referring to the flow diagram and screen sketches, I built wireframes for each screen using Figma.
It developed into a high-fidelity interactive prototype with transitions and animations.
I applied branding to the app by determining the logo, colours and fonts used.
Annotations
Detailed hand-off notes for developers were made so they can build the product accurately, with focus on the functionality of how the design works.
The biggest pain point, along with other issues, was addressed:
A streamlined interface featuring a progressive disclosure approach, which reduces user friction and therefore increases conversion rate.
Flight search — Before
Flight search — After
Flight selection — Before
Flight selection — After
Add-Ons — Before
Add-Ons — After
Flight Summary — Before
Flight Summary — After
Test, test, test
Usability tests were conducted at various stages of the prototype building process. This was to ensure that the screens and interactions made sense, and to fix any crucial mistakes before they trickle into more components of the prototype.
Some of the feedback from usability tests:
In flight selection screens, make the entire flight card tappable rather than just the blue part
Add transitions to make it more obvious when user has selected departing flight and will select returning flight next (which I've then proceeded to add to the entire prototype)
Additional suggestions to look into:
Refine the progress indicator to include labels to explain what the steps are
Interact with the prototype below ↓
Next steps
Further usability tests will be conducted to validate the prototype. By analysing user interactions and gathering insights into their behaviour while using the app, I can iteratively refine the interface.
Learnings
This project validated the value of progressive disclosure in the new design, as less confusion was observed in users when navigating the various steps. It minimised the amount of mistakes made from being overloaded with information within each screen.
Task completion success rate
95%
Time taken to complete task was