Flight Booking App

Flight Booking App

A case study on designing an intuitive air travel experience

A case study on designing an intuitive air travel experience

PROJECT OVERVIEW

PROJECT OVERVIEW

Design Challenge, Goals and Process Overview

Design Challenge, Goals and Process Overview

The flight booking app makes the booking process effortless and enjoyable. Users can quickly find flights, compare prices, and complete their bookings with ease. Through in-depth research and testing, I crafted an app that eliminates the hassle and enhances the overall experience, making travel planning simpler and more exciting.

Challenge

Challenge

The challenge is the frustrating and complex nature of many flight booking platforms. Cluttered interfaces, confusing navigation, and unclear pricing overwhelm users, often leading to abandoned bookings and dissatisfaction. The process requires a more intuitive, user-centered approach to improve overall usability.

The challenge is the frustrating and complex nature of many flight booking platforms. Cluttered interfaces, confusing navigation, and unclear pricing overwhelm users, often leading to abandoned bookings and dissatisfaction. The process requires a more intuitive, user-centered approach to improve overall usability.

Solution

Solution

My focus was on simplifying the booking process with a clean, intuitive interface. By conducting UX research, testing, and analysis, I aimed to identify key pain points and create the best possible experience. I wanted to streamline the flight search, price comparison, and payment steps, reducing friction and enhancing the overall user experience, making travel planning faster and more enjoyable.

My focus was on simplifying the booking process with a clean, intuitive interface. By conducting UX research, testing, and analysis, I aimed to identify key pain points and create the best possible experience. I wanted to streamline the flight search, price comparison, and payment steps, reducing friction and enhancing the overall user experience, making travel planning faster and more enjoyable.

Timeline

Timeline

October 2024 - February 2025

October 2024 - February 2025

Responsibilities

Responsibilities

UX Research

Visual Design

Product Design

Prototyping

UX Research

Visual Design

Product Design

Prototyping

Tools

Tools

Figma

FigJam

Google Workspace
Notion

Figma

FigJam

Google Workspace
Notion

The Process

The Process

1

1

Research

Research

Competitive Benchmarking

Online Survey

Usability Test

Competitive Benchmarking

Online Survey

Usability Test

2

2

Define

Define

Affinity Diagram

Customer Journey Map

User Flow

Affinity Diagram

Customer Journey Map

User Flow

3

3

Ideation

Ideation

Low Fidelity

High Fidelity

Prototype

Low Fidelity

High Fidelity

Prototype

4

4

Final Steps

Final Steps

Handoff

Final Thoughts

Handoff

Final Thoughts

RESEARCH

RESEARCH

Competitive Benchmarking

Competitive Benchmarking

Conducting competitive benchmarking was crucial to understand how existing flight booking apps approach key user tasks and identify both strengths and weaknesses in their designs. By analyzing competitor platforms, I was able to uncover design patterns, user flow efficiencies, and common pain points, which helped inform decisions on how to improve the user experience. This research provided valuable insights into industry standards and highlighted areas where my design could stand out, ensuring a more intuitive, user-friendly solution.

Here are some key insights I gained from the benchmarking process:

Here are some key insights I gained from the benchmarking process:

Strenghts

Strenghts

  • Simple, clean design with intuitive navigation

  • Prominent "book flight" function

  • Minimalistic, intuitive search with clear error states

  • Saved search results, highlighted dates, and

    easy reset

  • Clear visual hierarchy for key fields

  • Easy flight selection with price comparison

  • Clear flight details (price, date, times, airlines)

  • Neatly presented flight cards and clear fare display

  • Strong visual hierarchy in booking summary

  • Clear fare conditions and cost display

  • Simple, clean design with intuitive navigation

  • Prominent "book flight" function

  • Minimalistic, intuitive search with clear error states

  • Saved search results, highlighted dates, and

    easy reset

  • Clear visual hierarchy for key fields

  • Easy flight selection with price comparison

  • Clear flight details (price, date, times, airlines)

  • Neatly presented flight cards and clear fare display

  • Strong visual hierarchy in booking summary

  • Clear fare conditions and cost display

Pain Points

Pain Points

  • Limited user customization options

  • Overwhelming amount of information on

    some screens

  • Confusing flight class distinctions

  • Filters and sorting could be better organized

  • Difficulty in deselecting options, disrupting flow

  • Inconsistent contrast and section separation

  • Lack of progress indicator during booking

  • No clear option to edit previous selections

    easily

  • Lack of intuitive navigation for complex pages

  • Limited user customization options

  • Overwhelming amount of information on

    some screens

  • Confusing flight class distinctions

  • Filters and sorting could be better organized

  • Difficulty in deselecting options, disrupting flow

  • Inconsistent contrast and section separation

  • Lack of progress indicator during booking

  • No clear option to edit previous selections

    easily

  • Lack of intuitive navigation for complex pages

RESEARCH

RESEARCH

Online Survey

Online Survey

To gather insights on user needs and behaviors, I created an online survey focused on flight booking experiences. I defined clear research goals, designed the survey using Google Forms, and distributed it through personal networks. The results helped shape key design decisions in my case study.

The survey revealed the following insights:

The survey revealed the following insights:

Insights

Insights

  • Prioritize a consistent interface across devices and languages

  • Design with accessibility and clarity for all age groups

  • Optimize for high-traffic periods, especially summer

  • Highlight price, non-stop options, and baggage info early in the flow

  • Simplify tasks to reduce user friction and improve completion rates

  • Improve mobile usability, as users lean toward websites

  • Focus on price-checking and info discovery in early booking steps

  • Prioritize a consistent interface across devices and languages

  • Design with accessibility and clarity for all age groups

  • Optimize for high-traffic periods, especially summer

  • Highlight price, non-stop options, and baggage info early in the flow

  • Simplify tasks to reduce user friction and improve completion rates

  • Improve mobile usability, as users lean toward websites

  • Focus on price-checking and info discovery in early booking steps

RESEARCH

RESEARCH

Usability Test

Usability Test

To better understand how users interact with existing flight booking platforms, I conducted a comparative usability test using the Austrian Airlines app and the Ryanair app. Testing two contrasting apps allowed me to observe how different design approaches impact usability, especially in terms of navigation, task completion, and user satisfaction. It also provided valuable insights into user expectations, common frustrations, and mental models.

Here are some insights I learned from the usability test

Here are some insights I learned from the usability test

Key Points

Key Points

  • Price prioritization: Emphasize easy price comparison and access

  • Sorting: Include a simple price sorting feature

  • Guest access: Allow guest booking without registration

  • Navigation confusion: Ensure clear, distinct buttons to avoid confusion

  • Price details: Display accurate prices with no misleading information

  • Booking summary: Highlight key details (e.g., passengers, price) for clarity

  • Currency option: Make currency selection easily accessible

  • Price comparison: Simplify price comparison and make it intuitive

  • Information overload: Keep screens clean and concise, focusing on key details

  • Price prioritization: Emphasize easy price comparison and access

  • Sorting: Include a simple price sorting feature

  • Guest access: Allow guest booking without registration

  • Navigation confusion: Ensure clear, distinct buttons to avoid confusion

  • Price details: Display accurate prices with no misleading information

  • Booking summary: Highlight key details (e.g., passengers, price) for clarity

  • Currency option: Make currency selection easily accessible

  • Price comparison: Simplify price comparison and make it intuitive

  • Information overload: Keep screens clean and concise, focusing on key details

UX UI Takeaways

UX UI Takeaways

  • Focus on clarity and simplicity throughout the app

  • Make core features like price comparison, sorting, and booking easy to find and intuitive

  • Reduce confusion by minimizing redundant or unclear buttons and labels

  • Ensure a seamless, guest-friendly booking process with simple navigation

  • Provide users with clear, concise information without overwhelming them with too much content at once

  • Focus on clarity and simplicity throughout the app

  • Make core features like price comparison, sorting, and booking easy to find and intuitive

  • Reduce confusion by minimizing redundant or unclear buttons and labels

  • Ensure a seamless, guest-friendly booking process with simple navigation

  • Provide users with clear, concise information without overwhelming them with too much content at once

DEFINE

DEFINE

After conducting competitive benchmarking, an online survey, usability testing, and note-taking, I created an affinity diagram to organize both user pain points and positive design elements. I grouped the insights into key themes, which helped me identify crucial areas for improvement and effective UX features. This diagram not only highlights opportunities for refinement but also provides valuable guidance for enhancing the overall flight booking app experience.

DEFINE

DEFINE

Customer Journey Map

Customer Journey Map

The next step in the design process was creating a customer journey map to better understand how users navigate the flight booking app from start to finish. This map helped to highlight key moments of both positive experiences and pain points throughout the user journey. By mapping out each step, I was able to visualize users’ goals, behaviors, and mental models, as well as identify areas where their emotions fluctuate. The journey map also provided a clear overview of effective design features and areas in need of improvement. Incorporating an emotion graph and user quotes further enriched the map, helping to pinpoint the strengths and weaknesses in the app’s flow and guiding the next phase of design refinement.

Significant Findings

Significant Findings

The journey map revealed key UX issues, including overwhelming information, cluttered interfaces, and confusion around return/one-way flights. Users struggled with unclear fare details, the absence of a non-stop flight indicator, and poor overall clarity. These pain points highlight the need for a more streamlined, intuitive design to improve user experience and ensure clearer, more accessible information.

The journey map revealed key UX issues, including overwhelming information, cluttered interfaces, and confusion around return/one-way flights. Users struggled with unclear fare details, the absence of a non-stop flight indicator, and poor overall clarity. These pain points highlight the need for a more streamlined, intuitive design to improve user experience and ensure clearer, more accessible information.

DEFINE

DEFINE

User Flow

User Flow

To begin shaping a smoother and more intuitive booking experience, I created a detailed flow diagram that maps out the entire flight booking process - from the homepage to confirmation. This step was essential in translating insights from my affinity diagram and customer journey map into a structured, solution-focused design.

By outlining each screen state and user interaction along the ideal, frustration-free path, I was able to identify opportunities to reduce friction, enhance clarity, and improve overall usability. The flow includes key stages like flight search, selection, passenger details, add-ons, payment, and confirmation - ensuring that every interaction is intentional and aligned with user expectations.


This process allowed me to tackle UX challenges step by step, focusing on functionality and logic before moving into visual design. The result is a user-centered flow that lays the groundwork for an efficient and enjoyable flight booking experience.

To begin shaping a smoother and more intuitive booking experience, I created a detailed flow diagram that maps out the entire flight booking process - from the homepage to confirmation. This step was essential in translating insights from my affinity diagram and customer journey map into a structured, solution-focused design.

By outlining each screen state and user interaction along the ideal, frustration-free path, I was able to identify opportunities to reduce friction, enhance clarity, and improve overall usability. The flow includes key stages like flight search, selection, passenger details, add-ons, payment, and confirmation - ensuring that every interaction is intentional and aligned with user expectations.


This process allowed me to tackle UX challenges step by step, focusing on functionality and logic before moving into visual design. The result is a user-centered flow that lays the groundwork for an efficient and enjoyable flight booking experience.

IDEATION

IDEATION

Low Fidelity

Low Fidelity

After completing the Define stage - guided by insights from the affinity diagram, customer journey map, and user flow - I began bringing ideas to life through low-fidelity sketches. This phase allowed me to explore layout concepts, test structure, and translate user needs into tangible interface solutions. Working in low fidelity helped me stay focused on usability and functionality without getting distracted by visual details.


The main goals of this sketching phase were to:

After completing the Define stage - guided by insights from the affinity diagram, customer journey map, and user flow - I began bringing ideas to life through low-fidelity sketches. This phase allowed me to explore layout concepts, test structure, and translate user needs into tangible interface solutions. Working in low fidelity helped me stay focused on usability and functionality without getting distracted by visual details.


The main goals of this sketching phase were to:

  • Simplify the booking process with clear navigation

  • Highlight key features like price comparison and a clear fare breakdown

  • Reduce information overload and improve content hierarchy

  • Make core actions (search, select, book) intuitive and accessible

  • Ensure a smooth, step-by-step flow from search to confirmation

  • Simplify the booking process with clear navigation

  • Highlight key features like price comparison and a clear fare breakdown

  • Reduce information overload and improve content hierarchy

  • Make core actions (search, select, book) intuitive and accessible

  • Ensure a smooth, step-by-step flow from search to confirmation

These early sketches laid the groundwork for iterating and refining the user interface in the next stage of the design process.

These early sketches laid the groundwork for iterating and refining the user interface in the next stage of the design process.

Alongside my low-fidelity sketches, I created a flow with annotations to clearly outline each screen’s functionality and logic - ensuring both developers and stakeholders can easily understand the structure and purpose behind the user experience.

IDEATION

IDEATION

High Fidelity

High Fidelity

Refining the low-fidelity sketches into a high-fidelity prototype, the focus was on creating a seamless and intuitive flight booking experience. The design aims to simplify navigation and streamline the process, ensuring that users can easily compare prices, complete core actions, and navigate the journey from search to confirmation with minimal friction. Key features like clear fare breakdowns, a logical content hierarchy, and accessible options are prioritized to avoid overwhelming the user. The result is a smooth, step-by-step flow that empowers users to make informed decisions while keeping the experience clean, efficient, and user-friendly.

Flight Info Entry

Flight Info Entry

The homepage was designed to make the flight booking process as intuitive and seamless as possible from the very first interaction.

The homepage was designed to make the flight booking process as intuitive and seamless as possible from the very first interaction.

  • Flight search placed front and center for immediate user engagement

  • Prominent, easy-to-use input fields for destination, departure, dates and passengers

  • Toggle option for round-trip and one-way to offer booking flexibility

  • City search, calendar, and passenger selection implemented as bottom sheets for better focus and smoother interaction

  • Bottom sheet components reduce screen clutter and keep the user in context

  • Clean, minimal layout to reduce cognitive load and guide users effortlessly

  • Designed to streamline the first step of booking and eliminate friction early in the flow

  • Flight search placed front and center for immediate user engagement

  • Prominent, easy-to-use input fields for destination, departure, dates and passengers

  • Toggle option for round-trip and one-way to offer booking flexibility

  • City search, calendar, and passenger selection implemented as bottom sheets for better focus and smoother interaction

  • Bottom sheet components reduce screen clutter and keep the user in context

  • Clean, minimal layout to reduce cognitive load and guide users effortlessly

  • Designed to streamline the first step of booking and eliminate friction early in the flow

Explore & Choose Flights

Explore & Choose Flights

To improve the experience of browsing and comparing flight options, I designed the results screen to provide users with clarity, flexibility, and control during a critical decision-making phase.

To improve the experience of browsing and comparing flight options, I designed the results screen to provide users with clarity, flexibility, and control during a critical decision-making phase.

  • Clear flight cards with key info at a glance

  • Expandable cards for detailed flight breakdown

  • Sticky progress bar to show booking stage

  • Sort and filter options for personalized results

  • Currency changer for transparent pricing

  • Editable date and flight input directly from results

  • Clean, minimal UI with friendly visual touches

  • Clear flight cards with key info at a glance

  • Expandable cards for detailed flight breakdown

  • Sticky progress bar to show booking stage

  • Sort and filter options for personalized results

  • Currency changer for transparent pricing

  • Editable date and flight input directly from results

  • Clean, minimal UI with friendly visual touches

Fare Selection & Booking Overview

Fare Selection & Booking Overview

To reduce user confusion and improve clarity around fare selection and pricing, I designed a streamlined interface that makes comparing and selecting fares intuitive, while ensuring the booking summary is transparent and editable.

To reduce user confusion and improve clarity around fare selection and pricing, I designed a streamlined interface that makes comparing and selecting fares intuitive, while ensuring the booking summary is transparent and editable.

  • Bottom sheet for fare selection to maintain context

  • Clear category switch (between Economy, Business, First) for quick comparison

  • Cards with key benefits, large price display for clarity

  • Prominent "Select this Fare" CTA for decisive action

  • Expandable cards for detailed fare breakdown

  • Editable outbound and return info in booking summary

  • Clear, concise display of total price and number of passengers

  • Compact bottom sheet for price recap without overwhelming UI that opens up for detailed information

  • Bottom sheet for fare selection to maintain context

  • Clear category switch (between Economy, Business, First) for quick comparison

  • Cards with key benefits, large price display for clarity

  • Prominent "Select this Fare" CTA for decisive action

  • Expandable cards for detailed fare breakdown

  • Editable outbound and return info in booking summary

  • Clear, concise display of total price and number of passengers

  • Compact bottom sheet for price recap without overwhelming UI that opens up for detailed information

Passenger Information Step

Passenger Information Step

This part of the journey focuses on simplifying the input of passenger details, aiming to reduce friction and cognitive load for a smoother, more intuitive experience.

This part of the journey focuses on simplifying the input of passenger details, aiming to reduce friction and cognitive load for a smoother, more intuitive experience.

  • Structured passenger cards with grouped input fields

  • Consistent field design for clarity and ease of use

  • Minimal UI to avoid distractions and keep focus on the task

  • "Clear all" button to quickly reset mistakes

  • Dedicated booking contact section to separate key info

  • Structured passenger cards with grouped input fields

  • Consistent field design for clarity and ease of use

  • Minimal UI to avoid distractions and keep focus on the task

  • "Clear all" button to quickly reset mistakes

  • Dedicated booking contact section to separate key info

Add-On Features

Add-On Features

I designed the add-ons section to feel optional yet inviting - encouraging users to explore extra services without adding complexity to the booking flow.

I designed the add-ons section to feel optional yet inviting - encouraging users to explore extra services without adding complexity to the booking flow.

  • Visual Add-on Cards with Image, Title, and Short Description

  • Large Arrow CTA for Quick Interaction

  • Playful Seat Selection Experience

  • Clear Layout Avoids Overwhelm and Supports Quick Decisions

  • Consistent Design for All Add-on Options (Bags, Insurance, etc.)

  • Visual Add-on Cards with Image, Title, and Short Description

  • Large Arrow CTA for Quick Interaction

  • Playful Seat Selection Experience

  • Clear Layout Avoids Overwhelm and Supports Quick Decisions

  • Consistent Design for All Add-on Options (Bags, Insurance, etc.)

Final Step: Payment & Confirmation

Final Step: Payment & Confirmation

A smooth, trustworthy checkout experience is crucial, as this is where many users abandon the process if it feels unclear or insecure. This stage was designed to reduce hesitation, build trust, and ensure clarity during the final step.

A smooth, trustworthy checkout experience is crucial, as this is where many users abandon the process if it feels unclear or insecure. This stage was designed to reduce hesitation, build trust, and ensure clarity during the final step.

  • Clear currency dropdown for price transparency

  • Payment methods with familiar logos for quick recognition

  • Security icons to build user trust and credibility

  • Clean, minimal layout to reduce distraction

  • Clear call-to-action for final confirmation

  • Confirmation screen with booking summary, payment info, and clear success feedback

  • Clear currency dropdown for price transparency

  • Payment methods with familiar logos for quick recognition

  • Security icons to build user trust and credibility

  • Clean, minimal layout to reduce distraction

  • Clear call-to-action for final confirmation

  • Confirmation screen with booking summary, payment info, and clear success feedback

FINAL STEPS

FINAL STEPS

Handoff

Handoff

Coming from a software engineering background, I understand how valuable clear annotations are during the handoff stage. Providing detailed guidance - like how error messages should appear, what input fields are for, and the exact function of each button - not only speeds up development but also reduces unnecessary back-and-forth. That’s why I included thorough annotations in my final prototype, ensuring a smoother transition from design to implementation.

Here’s a glimpse at some of the design annotations I created:

Here’s a glimpse at some of the design annotations I created:

FINAL STEPS

FINAL STEPS

Final Thoughts

Final Thoughts

Designing and creating this app was a journey filled with valuable lessons at every step. From research and affinity mapping to prototyping and handoff, I realized that UX is a constantly evolving process, with each phase building on the last. This project really highlighted the importance of a user-centered approach - paying attention to the small details is what ultimately creates a seamless, enjoyable experience. By focusing on the users needs, I was able to create a flight booking app that doesn’t just work, but works better. It’s a reminder that each phase of the design process, no matter how small, plays a big role in making something users actually want to use.

Designing and creating this app was a journey filled with valuable lessons at every step. From research and affinity mapping to prototyping and handoff, I realized that UX is a constantly evolving process, with each phase building on the last. This project really highlighted the importance of a user-centered approach - paying attention to the small details is what ultimately creates a seamless, enjoyable experience. By focusing on the users needs, I was able to create a flight booking app that doesn’t just work, but works better. It’s a reminder that each phase of the design process, no matter how small, plays a big role in making something users actually want to use.

Appreciate the scroll 💫

Contact me

alecpureza@hotmail.com

alecpureza@hotmail.com

alecpureza@hotmail.com