Improving the user experience of a flight booking web app

The brief
Fly UX is a case study I completed as part of my UX Diploma at the UX Design Institute (Glasgow Caledonian University) in 2022. 
The objective was to design, prototype and wireframe on paper a conceptual flight booking web app called FlyUX from homepage to payment screen. 
I used a user-centered approach to define the user’s needs and identify issues, constraints before doing any design work. I worked through each step of the design process, including research, analysis, design, and wireframing. 
1. Research
Competitive Benchmarking
I reviewed four web apps to gain some insights on how best to design my own web app. The objective was to identify what competitors are doing right, and learn from what they are doing wrong.

Online survey
I carried out an online survey to learn more about the goals and behaviors of potential customers. The data helped me make more informed design decisions later on, and gave me some practice analyzing survey data. 
Key survey findings :
       - Many pop-ups and intrusive ads that hinder the quality of the user experience;
       - Too many options to choose from. The simpler the better;
       - Prices and dates are the most important information sought for;
  In-depth interviews
I carried out 3 in-depth interviews and 2 comparative usability tests to gain rich insights directly from the user and identify potential patterns. These insights informed my design decisions, eventually helping me design better wireframes.
2. Analysis
Affinity Diagram
I reviewed all of the research done previously and created an affinity diagram in Miro to identify patterns, mental models, positive aspects and pain points. This work helped me with further analysis and design decisions in the prototyping and wireframing phases.

Step 1 : writing down all the information gathered through the research

Step 2 : identifying themes, mental models and patterns

Customer Journey Map
I built on the work done in the affinity diagram and organised it into a step-by-step view of the journey to show the users’ mood at each stage. I also noted their goals, behaviour, pain points, desired improvements and quotes at each step. I used the online Miro.
3. Design
User Flow
I created a high-level flow for the desktop website in Whimsical to map every step of the user flow through the design from the homepage to the payment screen. Each screen or state is represented by a box. Each interaction, such as choosing a date, is represented by a circle.
Interactions
I continued the design process and sketched rapidly the screens for the desktop booking app. Based on the user flow diagrams and the information gathered through the research, I first outlined the screens and screen states to visualize rapidly how many screens and states there would be. Then, I did rapid sketches on post-its to see how the main navigation and the main screens  would interact with each other.
Outline of the screens and screen states
Outline of the screens and screen states
Rapid sketches on post-its
Rapid sketches on post-its
Navigation
I started to draw the wireframes for the linear booking process on a whiteboard and small desktop templates with more details, including navigation and screen states. After several iterations of sketching out each step of the process, I came to this general layout:
     - Simplification of the flight booking process into 3 steps: 1. find flights; 2. my flight; and 3. checkout;
     - Display of the step-by-step process progress;
     - Minimalist homepage with essentials;
     - Calendar flex search;
     - Simplification of the flight details and fares;
     - Clear and visible indication if the flight is direct or connected;
     - Limited amount of traveler and payment information to type;
     - Total price in big and bold;
     - Clear call to make a payment;
Sketches on whiteboard
Sketches on whiteboard
Small desktop templates (1)
Small desktop templates (1)
Small desktop templates (2)
Small desktop templates (2)
Paper Wireframes
I drew detailed wireframes with each screen on a single sheet of paper to get a more comprehensive visualization. I incorporated 3D paper text boxes to unfold when clicking on certain buttons. 
Back to Top