PROJECT OVERVIEW
Design a new flight booking app that simplifies how users search, find, and select flights online. The focus is on creating an intuitive, frictionless experience that improves efficiency and user satisfaction.
RESPONSIBILITIES
UX Research
Research Analysis
Wireframing
Prototyping
TOOLS
Figma
Photoshop
Mockup App
Zoom
TIMELINE
6 Months
This project involves designing a clickable prototype that can be tested with users, along with a detailed set of wireframes to guide development.
Challenges
Users often struggle with complex flight search interfaces and overwhelming options.
Existing airline apps can have cluttered layouts and poor usability, making booking frustrating.
The goal is to streamline the booking process, ensuring clear navigation and a smooth user journey.
Deliverables
High-fidelity clickable prototype for usability testing
Wireframes covering key screens and interactions
A seamless user flow for flight selection and booking
Before designing the Celestia Airlines app, I conducted research to understand how users search, find, and book flights online. The goal was to identify common usability challenges, industry best practices, and opportunities for improvement. This phase involved:
Competitive Benchmarking – Analyzing top airline booking platforms to evaluate strengths and weaknesses.
Note-Taking – Documenting key insights, pain points, and standout features from user experiences.
Usability Testing – Gathering real user feedback to validate assumptions and refine the booking flow.
By synthesizing these findings, I was able to create a user-centric design strategy that improves clarity, efficiency, and ease of use throughout the booking process.
1.1 Competitive Benchmarking
Enter flight details process
Things to Improve / Do Better / Avoid
Reduce clutter on the homepage – Some competitors overload users with promotions and unnecessary information.
Improve contrast and CTA visibility – Certain booking forms had low contrast and confusing button placements, leading to user frustration.
Ensure a smooth, intuitive navigation experience – Some platforms had sluggish scrolling or unintuitive interactions that slowed down the booking process.
Things to Emulate
Prioritize a simple, focused homepage – The best platforms make the flight search component the main focus.
Use intelligent date selectors – Some airlines highlight the cheapest fare dates, making booking decisions easier.
Ensure transparency in pricing & fees – Clear pricing breakdowns and promo tags help users trust the platform.
Use structured forms for passenger details – Well-organized input fields reduce booking errors and make the process smoother.
Competitive Benchmarking Summary
The analysis revealed that most airline booking platforms struggle with usability issues, such as cluttered layouts, poor navigation, and unclear CTAs. Celestia Airlines can stand out by focusing on a clean, intuitive, and visually structured booking experience while ensuring transparent pricing and seamless navigation.
1.2 Usability Testing
To evaluate common usability challenges in flight booking apps, I conducted remote usability testing on two airline apps: Cebu Pacific and Philippine Airlines. The participant was assigned one task per app to assess how easily they could navigate the booking process. The goal was to observe user interactions, identify friction points, and gather insights to inform the design of Celestia Airlines’ booking experience.
Screenshot taken from the Usability testing session
1.3 Note Taking
To capture valuable insights from usability testing, I conducted structured note-taking while observing participants interact with flight booking platforms. The goal was to document user behaviors, pain points, and positive interactions to inform Celestia Airlines’ design decisions.
Note taken from Participant #1 doing task
Pain Points & Frustrations
Date Selection Confusion – Participants struggled with unclear departure/return date selection and unintuitive calendar interactions.
Fare Benefits Misunderstood – Users were confused about fare options (e.g., Saver vs. Plus) and had difficulty comparing benefits.
Navigation Issues – Some users had trouble finding key actions like “Book a Flight” or assumed the booking process had more steps.
Unexpected Stopovers – Users were surprised when flights included layovers, expecting clearer indicators upfront.
Overloaded Interface – Crowded homepages and excessive options caused hesitation and cognitive overload.
Positive Interactions & What Worked Well
Clear Price Visibility – Participants appreciated when pricing details were transparent and easy to scan.
Recent Searches Feature – Users found it helpful when previous searches were saved, reducing the need for re-entry.
Seat Selection Clarity – A structured seat selection process was well received, with users valuing flexibility in choosing their seats.
Insights & Next Steps
The booking process should be simplified, ensuring a clear step-by-step flow.
Fare options need better explanations, possibly with tooltips or visual comparisons.
Improved UI hierarchy can help declutter the homepage while keeping key actions easily accessible.
Highlighting layovers upfront will prevent surprises and help users make informed decisions.
By synthesizing these notes, I was able to refine the user flow and interaction design, ensuring that Celestia Airlines provides a smooth, frustration-free booking experience.
After gathering research insights, the next step was to analyze patterns, behaviors, and pain points to inform the design process. This involved organizing findings into an Affinity Diagram to categorize key themes and creating a Customer Journey Map to visualize user interactions, frustrations, and opportunities for improvement. These analyses helped shape a more user-centered approach to the Celestia Airlines booking experience.
2.1 Affinity Diagram
Key Findings
Prioritization
Photos taken from the affinity diagram session
Key Findings
The insights were categorized into six major usability issues:
- Comprehensibility Issues – Users found parts of the app unclear and misleading, leading to confusion in navigation and task completion.
- Information Accessibility Issues – Users struggled to compare flight benefits due to a lack of clear, side-by-side comparisons.
- Information Architecture Issues – Overcomplicated structure made it difficult for users to locate important details.
- Feature Usability Issues – Some essential features were either missing or difficult to use, impacting task efficiency.
- Navigation Issues – Users faced challenges moving between screens, often getting lost or struggling to find key options.
- User Familiarity & Recommendations – Users expected common flight booking conventions that were either missing or inconsistent.
Prioritization
- Important & Urgent (Do Immediately) – Issues that significantly impacted usability, such as comprehension, navigation, and feature usability problems.
- Important but Not Urgent (Schedule Fixes) – Structural problems like information architecture and accessibility, which required more time to refine.
- Not Important but Urgent (Delegate) – Minor recommendations that could be adjusted over time.
- Not Important & Not Urgent – Low-impact issues that didn’t require immediate action.
This process helped in determining which problems to address first, ensuring the most critical usability barriers were resolved early.
2.2 Customer Journey Map
Screenshot of customer journey map
Key Findings
This journey map outlines the key stages users go through when booking a flight using the app, from planning a trip to seat selection. It highlights uers’ goals, behaviors, mental models, and pain points at each stage
- Early stages (Planning & Homepage): Users struggled with cluttered UI and had difficulty locating key features. They expected fare options to be visible on the homepage.
- Middle stages (Airport Selection, Date Selection, and Flight Results): Users encountered issues with navigation and information clarity, particularly in fare comparison and calendar selection. They expected a smoother transition between selecting departure and return flights.
- Final stages (Flight Details & Seat Selection): Users were confused by the fare benefit differences and seat selection legend, leading to frustration. Lack of clear indicators for stopovers also impacted decision-making.
Insights & Next Steps
Key takeaways suggest improving UI clarity, information accessibility, and feature usability to reduce confusion and enhance the booking experience.
After analyzing key usability issues, the Design phase focuses on improving the flight booking experience through intuitive user flows, refined interactions, and a more user-friendly interface. This section presents the Flow Diagram, Interaction Design, and Prototype, highlighting the enhancements aimed at addressing user pain points while optimizing navigation and decision-making.
3.1 Flow Diagram
Sketch of the flow diagram
Digital version of the flow diagram
Before creating the digital version of the flow diagram, I began with hand-drawn sketches to quickly iterate on different flow structures. This allowed me to map out the key interactions and decision points efficiently.
The final user flow visualizes the step-by-step process users take within the app, covering essential stages such as searching for flights, selecting dates, choosing flight options, entering passenger details, and completing payment. It also includes decision points for optional add-ons and seat selection. Mapping out this flow helped identify pain points and opportunities for improvement, such as reducing redundant steps and improving clarity in fare selections.
3.2 Interaction Design
Screenshot of interaction design sketch
Based on the flow diagram and insights gathered from the analysis phase, the interaction design defines how users navigate through the booking process. Each screen state is mapped out, ensuring a seamless transition from the homepage to payment. This approach helps in visualizing user actions, potential pain points, and necessary optimizations for an intuitive experience.
The interaction design showcases:
A step-by-step progression through the booking journey.
Key user interactions, such as searching for flights, selecting seats, and making payments.
Clear and structured screen layouts to improve usability and engagement.
3.3 Prototype
Screenshot of prototype
The prototype serves as a medium-fidelity representation of the final design, aimed at showcasing the refined user experience. It integrates all insights gathered during the usability testing and analysis phase to create a more seamless and intuitive booking flow.
Key Features & Improvements
Addressed every pain point identified in usability and analysis.
Improved navigation, making it clearer and more intuitive.
Added clear indicators for stopovers, language selection, and currency preferences to enhance clarity for international users.
Prototype Format & Tools Used
This medium-fidelity prototype was created using Figma. It visually represents the entire booking process while ensuring a balance between structure and usability.
Usability Testing & Feedback
An initial usability test was conducted with my wife, who found the flow to be concise and straightforward. While further user testing could provide additional insights, the current version successfully presents a coherent and well-structured booking experience.
4. Final Outcome
After six months of learning and applying UI/UX principles, I designed a solution that effectively addresses the pain points identified during the research and usability testing phases. Through this project, I realized the importance of user research before design. By analyzing data from research, I was able to make informed design decisions and create a user-centered solution.
What's next
