✈️

Desktop Airline Case Study

Timeframe
6 months (Jan - Jun 2022) / Part-time
My role
User Research
UX
UI
Tools
SurveyMonkey
Zoom
Miro
Diagrams.net
Figma
Figjam
Cooperation
Team of one
Outcome
Prototype, wireframe and annotation
Platform
Desktop
Cover
1.png
 
 
 
This is a 6-month project I did to complete the Professional Diploma in UX Design course from UX Design Institute.
The brief is to create a fast, easy and intuitive flight booking experience for a start-up airline's new website.
The tasks include user research, analysis, design, prototyping, and wireframing.
 
🚀🚀🚀I follow this UX process model to design a research-based prototype and detailed annotation.

Research

Online survey
Competitive benchmarking
In-depth interview & Usability test

Define

Affinity diagram
Customer journey map

Design

User flow diagram
Wireframe sketch

Prototype & Validation

notion image
 

 
 
✍🏽
ONLINE SURVEY
Since the flight booking process involves different steps and tasks, I started by conducting an online survey to get to know which aspects of the process satisfy or bother the users the most.
 
notion image
 

Here are the data from my survey.

 
notion image
<Read my full survey and detailed report here>
 
 
🗓️
COMPETITIVE BENCHMARKING
In the next step, I did competitive benchmarking to learn best practices and heuristic mistakes related to the online respondents' feedback. Specifically, I concentrated on:
the homepage structure
the elements and their positions on the flight search box
the flight info presentation and the number of steps until the booking is complete
the distracting and confusing elements throughout the booking process
 
I summarized the findings in a table to apply to my wireframe and prototype during the design stage.
 
notion image
<View full Competitive Benchmarking here>
 
 
🗣
IN-DEPTH INTERVIEW AND USABILITY TEST
From the two interviews and usability test videos provided by UXDI, I learned about the users' preferences and struggles; and how to conduct in-depth interviews and usability tests.
 
notion image
notion image
<View my notes on the Usability Tests here>
 
I conducted in-depth interviews and usability tests with two users to evaluate their behaviors, mental models, and feelings during each stage of the flight booking journey.
What surprised me most during this process was how much presumption users have about the websites. Moreover, they spent very little time on the sites and only concentrated on what they had in mind.
notion image
notion image
 

 
 
📎
AFFINITY DIAGRAM
I organized all research data into groups and phases.
notion image
notion image
<View the full Affinity Diagram process here>
 
 
📌
CUSTOMER JOURNEY MAP
I created a customer journey map to determine the users' emotions throughout the booking process. From this map, it is clear that users struggle the most during while facing fare choices and many add-on options in the middle of the process. This is where they are likely to get frustrated and give up.
This map also helped me organize their mental models and preferences. Indeed, people make their way through the booking process with fixed ideas of what it should be like and get confused/unhappy when the elements are not where they think they usually are.
 
notion image
<View full Customer Journey Map here>
 
 

I found out from the data analysis that there are three major pain points users face during their online booking process:

 
On the homepage, the inconvenient language/location settings, the overwhelming ads, and the unclear CTA delay the flight searching phase.
When considering the fare options, the unorganized and abundant information and the unnecessary elements on the screen cause users to misunderstand and overlook information such as the flight duration and total price. As a result, the process becomes more time-consuming and frustrating.
Before getting to the payment page, users are annoyed and exhausted by the unskippable add-ons (hotels, cars, insurance). They also have to restart the process if they want to change their options at this phase of the process.

With these findings, I started designing the solution.

 

 
 
📍
FLOW DIAGRAM
I created one happy case linear Flow Diagram but added some decision-making steps to make the flow more realistic. After receiving feedback from the course mentor, I edited my diagram to make it more general (by deleting information such as specific locations and dates) but still detailed enough to represent every step of the booking process.
notion image
 
notion image
 
<View full Flow Diagram here>
 
 
📝
WIREFRAME
I sketched all steps in the booking process and iterated twice to delete all unnecessary elements on the screen and reduce the number of steps in the process. I also started to edit content (word choice, popup messages, CTAs...) to make everything brief and clear for the users.
 
notion image
notion image
<View full Wireframe here>
 

 
 
💡
HIGH-FIDELITY PROTOTYPE
Creating a High-fidelity Prototype, I focused on the minimal interaction at each step of the booking process. I practiced maintaining visual hierarchy and information grouping while adding colors and pictures to the prototype.
 
 
 
📩
ANNOTATION
The final deliverable is annotated wireframes. After receiving feedback from UXDI mentor, I adjusted the rules for text input fields and deleted repetitive explanations from the annotation.
 
notion image
notion image
<View full Annotated Wireframe here>
 

 
This is my very first UX case study and I have learnt a lot during this 6-month project.
 
📌Questions before research
If I could redo the research process, I would write down the specific questions to which I want answers. Without determining the issues I wanted to tackle through all the research methods, I had difficulty keeping my research from being dispersed and deciding on meaningful data during the analysis phase.
🧏‍♀️The insights from Usability Test Doing as few as four usability tests can still give me a great understanding of how users think, navigate and make decisions to reach their goals. The most surprising finding for me is how little people pay attention to factors that are not what they are searching for on the screen. Moreover, due to mental models, users often cannot see elements on the screen no matter how dominant and seemingly obvious they are.
🎨The importance of sketching This simple and quick-to-iterate process helped me visualize, organize and modify my ideas on what each screen would look like and fit into the whole user flow. The sketch also facilitated the prototype and wireframe phases of this project.
🛠The annotation structure and delivery process I had to put myself in the developers’ shoes to write a concise annotation. I’ve learned through this process how much detail I should deliver and how the same written explanation can sometimes mean different things to different people. Understanding the importance of communication in this phase, I asked my developer friend to read my annotation and made it brief and without ambiguity.
🎯The continuous feedback and iteration
Finally, I have learned that it’s important and helpful to receive constant feedback at each step of the process. With the feedback, I can modify and elaborate the work quickly and in the right direction.