Air Pegasus
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 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.
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. Realistic copy was written for a more accurate flow.
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
I detailed the information a developer would need to build the product accurately, with focus on the functionality of how the design works.
Test, test, test
Simple usability tests were conducted at various stages of the design and 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 I've addressed:
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
Conducting usability tests on new iterations of the prototype with the same user might make it less effective as the user would have already learnt how to use the app. Testing the prototype with new users would allow me to better pick up on what's not working well.
Designing and creating the prototype was a steep learning curve as there was a lot of technical software knowledge, design principles, and best practices to be learnt with Figma. Throughout the process, I spent days watching YouTube tutorials and made endless google searches to find troubleshooting solutions. I'm proud of the end result, and look forward to learning more in my next project.