Case Study · UX Design Institute Diploma
FlyUX:
Designing a Better Airline App Experience
A full UX design project completed as part of the UX Design Institute professional diploma — from competitive benchmarking and usability testing through to affinity diagrams, customer journey mapping, user flows, and a high-fidelity prototype of an airline booking app.
FlyUX — airline booking app prototype
01. Project Overview
A diploma project that followed the full UX process from scratch
FlyUX is the capstone project of my UX Design Institute Professional Diploma. The brief was to design a mobile airline booking app, but the real work was in the process: no skipping steps, no assumptions, no jumping straight to design.
Every decision in the final prototype is grounded in research. I benchmarked four real airline apps, ran moderated usability tests with real participants, synthesised findings into an affinity diagram, mapped the full customer journey, designed user flows, and built the wireframes and prototype from there.
The process taught me that the most valuable design work often happens before you open Figma.
Complete wireframe overview
02. The Challenge
Airline apps are notoriously frustrating — and for good reason
Booking a flight should be simple. In practice, most airline apps make it harder than it needs to be: confusing fare structures, aggressive upsell flows, unclear seat selection, and layouts that create anxiety rather than confidence. The challenge was to identify exactly where and why things break down, and then design something that genuinely works better.
Fare Confusion
Fare options and pricing logic are rarely explained clearly. Users struggle to understand what they're actually getting, leading to hesitation, drop-off, and post-booking regret.
Upgrade Prompt Overload
Too many upsell screens interrupt the booking flow. Users lose track of where they are in the process and feel pressured rather than helped.
Unclear Layover Selection
When multiple flight options are available, the differences between connections and layovers are poorly communicated, making it difficult to compare options confidently.
Seat Selection Ambiguity
Seat maps often fail to convey the real differences between seat types. Users aren't sure what they're paying for, or whether a seat is actually worth the upgrade.
03. Competitive Benchmarking
Understanding the landscape before designing anything
I started by analysing four major airline apps in detail: Ryanair, EasyJet, British Airways, and All Airlines. For each one, I reviewed the full booking flow, noting what worked well and where the experience broke down. The goal was to find patterns, not to copy a favourite.
Ryanair
What worked
- Clear, fast home screen with direct search access
- Flight calendar view makes date flexibility easy to compare
- Bag and seat options visible early in the flow
What didn't
- Aggressive upsell screens on nearly every step
- Fare bundle differences poorly explained
- Seat map lacks context for what each zone actually means
EasyJet
What worked
- Clean visual hierarchy on search and results screens
- Flight details expanded clearly on tap
- Check-in flow is well structured and step-counted
What didn't
- Fare comparison table is text-heavy and hard to scan
- Progress indicator disappears mid-flow
- Extras screens feel disconnected from the booking context
British Airways
What worked
- Premium tone established from the first screen
- Cabin class comparison is well presented
- Booking confirmation is detailed and reassuring
What didn't
- App feels slow and over-designed for simple tasks
- Seat selection interface is dated and unclear
- Too many steps to complete a basic one-way booking
All Airlines
What worked
- Aggregator model gives users a broad view of options
- Price comparison across carriers is a genuine differentiator
- Filter system is one of the more intuitive in the category
What didn't
- Handoff to third-party booking breaks the experience
- Inconsistent UI across different airline flows
- Trust is harder to establish without a direct booking relationship
Key Benchmarking Takeaways
Users felt more confident when they could see exactly where they were in the booking flow. Apps that hid or removed the progress indicator caused anxiety.
Every app offered seat upgrades and extras. The ones that explained the value clearly converted better and frustrated users less.
No app handled fare explanation well. Users consistently couldn't tell what was included at each price tier without reading the fine print.
Clear pricing, readable confirmation screens, and a calm visual tone all contributed to users feeling safe handing over payment details.
04. Usability Testing
Watching real people struggle reveals what assumptions miss
I ran moderated usability tests with two participants using real airline apps: Aer Lingus and Eurowings. Each session followed the same structured script, with participants asked to complete a flight booking while thinking aloud. I observed, took detailed notes, and resisted the urge to help.
App tested: Aer Lingus
- Struggled to understand the difference between fare bundles: "I don't know what Plus means exactly"
- Got lost after the seat selection screen — wasn't sure if she had completed the booking or not
- Found the extras screen ("Priority boarding? Again?") repetitive and exhausting
- Appreciated the calendar price view: "Oh that's useful, I can see the cheapest day"
- Hesitated at payment: wanted to review the full cost before entering card details
App tested: Eurowings
- Missed the connection time on a layover flight: "Where does it tell me how long I have between flights?"
- Confused by the seat map: didn't understand why some seats were greyed out vs. locked behind payment
- Expected a progress bar but had to guess how many steps were left
- Appreciated direct flight results appearing first: "Good, I don't want to faff around with connections"
- Felt the final summary page was rushed: too much information compressed into one screen
Common Patterns Across Both Tests
Both participants hesitated at fare selection and couldn't quickly understand what each tier included. They defaulted to choosing the cheapest option by default, regardless of what it included.
When users couldn't see where they were in the flow, they second-guessed every tap. A clear, persistent step indicator was something both participants instinctively looked for.
Repeated upsell screens made both users feel targeted rather than helped. The pattern eroded trust in the app and made the experience feel manipulative.
Neither participant felt fully confident about what they had or hadn't booked until the very end of the flow — and even then, they wanted to go back and check.
05. Affinity Diagram
Turning raw notes into design-ready insights
After both usability tests, I typed up all my observations as individual notes and ran a KJ method affinity session to group and cluster them. The goal: get out of "observer mode" and into "insight mode" — finding the themes and tensions that would actually shape the design.
Affinity diagram — KJ method, post usability testing
Main Clusters Identified
Pricing & Fare Clarity
Multiple observations around users not understanding what they were paying for. Fare labels like "Standard" or "Plus" meant nothing without context. Needed plain-language explanations and visual hierarchy.
Navigation & Flow Confidence
Users lost confidence when they couldn't track their progress. Notes clustered around missing step indicators, ambiguous back navigation, and uncertainty about what action came next.
Trust & Transparency
Observations about users feeling manipulated by upsell patterns, unclear seat availability, and a fear of making an irreversible mistake. Trust is built through honesty, not design tricks.
06. Customer Journey Map
Mapping the full experience, not just the app screens
The customer journey map brought together everything from the research phase into a single view: the stages a user moves through from first intent to post-booking, what they feel at each step, what questions they have, and where the biggest design opportunities lie.
Customer journey map — from search intent to post-booking
07. User Flow & Design Strategy
From insights to architecture
With the research synthesised, I mapped out the user flow for the full booking journey: from opening the app to receiving a booking confirmation. Every screen, every decision point, every branching path. This became the blueprint for the wireframes.
User flow diagram — scroll to explore the full journey
User enters origin, destination, and travel dates. Clear fare calendar view shows price variations by date.
Results shown with direct flights first. Fare tiers presented with plain-language descriptions and a clear comparison of what each includes.
Streamlined passenger form with smart defaults. No unnecessary fields, no upsell interruption at this stage.
Seat map with clear visual distinction between seat types. Extras offered once, contextually, not as a repeated gauntlet.
Full order summary before payment. No hidden fees, no last-minute surprises. Payment screen is calm and focused.
Booking confirmed with all key details clearly visible. Option to add to wallet or calendar immediately.
08. Wireframes
Structure first, style second
With the user flow confirmed, I moved into wireframing. Every layout decision is traceable back to a research finding. Screens were reviewed, iterated on, and tested before moving to prototype.
Complete wireframe set — all screens in the booking flow
09. Final Screens & Prototype
High-fidelity screens coming soon
The final UI screens and interactive prototype are in preparation and will be added here shortly. This section will show the complete high-fidelity design across all booking flow screens.
10. What I Learned
The research is the design
This project changed how I think about UX work. The time I spent benchmarking, watching users struggle, and mapping every emotion in the journey didn't feel like "research before the real work" — it was the work. Every screen in the final prototype is better because of what I learned before I started drawing.
Research grounds decisions
Every layout choice, every label, every step in the flow has a reason. I can trace it back to something a test participant said or a pattern I spotted in benchmarking.
Users don't read, they scan and guess
Watching real users navigate airline apps taught me more about information hierarchy than any textbook. People skip things, assume things, and backtrack more than designers expect.
Clarity beats cleverness
The best UX decisions in this project were the simplest ones: better labels, fewer steps, a persistent progress indicator. The biggest improvements came from removing friction, not adding features.