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.
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.
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;
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.
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.
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.
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.
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.
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;
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.
This project was my very first UX design project and I learned some key lessons, notably :
1. The importance of the user research to understand the user profile and the pain points;
2. The importance of following the step-by step UX design process and not skipping any step. The more we know and understand about the user and the context, the better;
3. Think about what the user wants or doesn’t want and not what I think would be best;
4. Design is not just about pretty visuals. It is so much more than that.