UX FLIGHT BOOKING PLATFORM
01 Research
Identifying the problem
Why is booking a flight not a delight?
Often online booking services can leave users feeling frustrated and overwhelmed with too much information on the page, too many pop-ups and unclear navigation. As a result, users will drop out of the booking process before the final ticket purchase. A great loss on both ends.
To get to the bottom of this problem and understand what frustrates users most I conducted an in-depth research with various UX research methodologies.
Approach
I identified high-level flow issues on hotel booking websites and thus painted a clear picture on industry conventions by using competitive benchmarking as my research method. Further I identified user painpoints, behaviours, moments of delights during booking process by conducting different qualitative and quantitative research such as Usability testing and Online Surveys.
01 Research
Identifying the problem
Why is booking a flight not a delight?
Often online booking services can leave users feeling frustrated and overwhelmed with too much information on the page, too many pop-ups and unclear navigation. As a result, users will drop out of the booking process before the final ticket purchase. A great loss on both ends.
To get to the bottom of this problem and understand what frustrates users most I conducted an in-depth research with various UX research methodologies.
Approach
I identified high-level flow issues on hotel booking websites and thus painted a clear picture on industry conventions by using competitive benchmarking as my research method. Further I identified user painpoints, behaviours, moments of delights during booking process by conducting different qualitative and quantitative research such as Usability testing and Online Surveys.
Competitive Benchmarking
I compared the booking process on 4 different websites and used heuristics principles to evaluate areas that could be improved.
![]()
I compared the booking process on 4 different websites and used heuristics principles to evaluate areas that could be improved.
Online Survey
![]()
I asked 25 people about their booking habits and gathered both qualitative and quantitative data about their behaviour.
Usability test
I conducted remote usability test sessions with in-depth interviews with 2 users to learn more about their goals, behaviours, painpoints and moments of delight.
![]()
Notetaking
![]()
![]()
![]()
I took notes from the interviews I conducted and
highlighted the key insights from the session: anything which will helped me make decisions about my design later on.
highlighted the key insights from the session: anything which will helped me make decisions about my design later on.
02 Analysis
Identifying the problem
Are there any patterns?
All this unstructured raw research data had to be transformed into valuable insights and conclusions so the problems could be identified and thus solutions could be designed. In order to do so, I used different techniques to define visible patterns in the raw research data.
Are there any patterns?
All this unstructured raw research data had to be transformed into valuable insights and conclusions so the problems could be identified and thus solutions could be designed. In order to do so, I used different techniques to define visible patterns in the raw research data.
Affinity Diagram
The first step of analysis was to create an affinity diagram to structure the gathered data. A fellow student and I were writing down all the relevant information sticky notes and then digitised it in Miro. I organised the large amounts of language data (ideas, opinions, issues) into clusters and groups based on their natural relationships. By doing so, I was able to identify meaningful patterns and draw important conclusions.
![]()
User Journey Map
Another technique I used to analyse the data was the visualisation of the user’s interactions showcased in a user journey map. This exercise helped me to step in the users shoes and see the product from the users perspective and thus see how user goals, behaviours, delights, mental models and painpoints change along each step of the booking process.
![]()
03 Design
Solving the problem(s)
Where to start?
Designing the new product based on all the findings had me start with a high-level flow, focusing on a primary use case. I then continued with sketching by hand the navigation and interactions in more detail. Only then I moved on to a medium fidelity prototype in Figma.
Where to start?
Designing the new product based on all the findings had me start with a high-level flow, focusing on a primary use case. I then continued with sketching by hand the navigation and interactions in more detail. Only then I moved on to a medium fidelity prototype in Figma.
User Flow
I created a user flow diagram with improved design ideas, mapping out every step the user takes - from entry point right through the final interaction.
![]()
Lo-fidelity Prototype
Before I started designing screens in Figma, I sketched out a lo-fi prototype on paper with all its interactions. This served me as an architectural blueprint and helped me outline specific areas and points and thus give a clear vision of the product’s structure.
Medium fidelity Prototype
I went on to design a medium fidelity prototype in Figma with all the necessary design assets and components integrated.
04 Design
For the Developers
Let’s do this
If developers are expected to code an HTML prototype straight from wireframes, then it’s important to give them as much information as possible. Certain product developments require higher fidelity with crisp typography, richer colors, and high-resolution images. However, this is where the UI Design team comes into play. For my product, only a medium fidelity was required and thus all my wireframes are based on my medium fidelity screens using FIGMA.
Let’s do this
If developers are expected to code an HTML prototype straight from wireframes, then it’s important to give them as much information as possible. Certain product developments require higher fidelity with crisp typography, richer colors, and high-resolution images. However, this is where the UI Design team comes into play. For my product, only a medium fidelity was required and thus all my wireframes are based on my medium fidelity screens using FIGMA.
Wireframes
In order to hand off the new design to developers, I created annotated wireframes that contain all the information needed. I specified component level instructions as well as the screen-level. Ready, set, go!
