Online Survey
Marcello Cancemi
Lead Front End and UX Developer
BarbonAir.com
Case study as part of my
professional diploma in UX Design
BarbonAir.com - A user friendly website to book your flights
In this project, I assumed the responsibilities of a UX Researcher, UX Designer, and UI Designer. The project spanned a duration of 6 months, commencing in May 2023.
Problem
In the course of my research focused on flight booking websites, I identified that users were encountering significant obstacles while progressing through the booking process. Among these obstacles, the most prominent ones include:
An excessive number of stages in the booking process.
Inadequate visual layout decisions.
Inappropriate color selections.
Too much information displayed at once
Solution
At the end of this project, I designed a high-fidelity prototype to address the identified issues. This prototype incorporated the following key elements:
A streamlined booking process with a minimal number of steps.
A clear and well-defined visual hierarchy and layout structure.
Only relevant information shown at one time
Team
1 UX designer
My Role
UX design
UI design
UX research
Usability Test facilitator
Timeline
Overall: 6+ months
Discovery & Research: 4+ weeks
Design & testing: 5+ months
Design Process
1. Research
During the research phase of the project, I conducted usability tests and documented these interviews. This approach helped me gaining insights into user objectives and potential pain points when utilising flight booking websites. The websites under examination included Aer Lingus, Eurowings, Emirates Airlines, and British Airways.
While the booking experience was generally straightforward on each website, there were certainly areas where improvements could be made.
Key findings:
The booking process is excessively time-consuming due to too many unnecessary steps
The clarity of CTA (Call to Action) buttons can be compromised because of colour choices
An excessive amount of information on specific pages can lead to user confusion
At times, users already have a specific flight in mind
Users just want to proceed to book a flight
Usability Testing
Usability Testing & Note Taking
Participant 1 took part in a usability test that I conducted.
Participants 2 & 3 were prerecorded as part of my UXDI course.
Usability tests were conducted on the websites shown above
Usability tests were conducted on the websites shown above
2. Define Problem
After the research phase of the project, equipped with a comprehensive set of notes, it was time to articulate and define the problem.
This process involved the creation of an affinity diagram and a customer journey map. Visualising my research findings on these diagrams enabled me to cross-reference and pinpoint the issues that users were encountering.
Key Takeaways :
Strong visual cues are very important
Information architecture is crucial to user understanding
Users have limited tolerance for distractions such as pop-ups and advertisements
Users frequently desire the option to bypass certain steps later in the process.
Affinity Diagram
View my Miro board here
Customer Journey Map
Customer Journey Map
Research Analysis Summary :
Through my research, I gained a comprehensive understanding of user needs and potential sources of frustration during the booking process. As part of my prototype design, I took into account the following considerations:
The homepage must feature a clear and accessible booking interface to cater to user needs and streamline the booking process, eliminating distractions such as pop-ups and large banner ads.
CTAs must be clear and obvious: Prominent Call to Action (CTA) buttons are essential to guide users, encourage their actions, and enhance conversion rates. Utilizing big, brightly contrasting colors for these CTAs can be highly effective.
Progressive Disclosure: Gradual information presentation is beneficial for reducing user overwhelm and improving their understanding of the content.
Make the next step obvious: Providing clear indications of the next step ensures a smooth user flow and minimizes cognitive load.
Avoid unnecessary steps: Removing unnecessary steps streamlines the process and reduces user frustration and the likelihood of abandonment.
Wireframe
3. Design
Incorporating insights from my research and analysis of user needs and frustrations during flight booking, the design process placed a strong emphasis on efficiency and user satisfaction.
With a homepage featuring a prominent booking interface, clear CTAs, progressive disclosure, and intuitive next steps, each design decision aimed to streamline the process and diminish user frustration, ensuring a seamless flight booking experience.
Flow Diagram
Flow Diagram
The flow diagram served as a valuable tool in the design process, enabling focused and precise decision-making for the flight booking interface.
Sketch and Interaction
Sketching the interactions:
My sketches played a vital role in visualising the interactions within the flight booking process, translating abstract ideas into real representations, these design concepts provided a clear layout for the user interface and its functionalities, helping to show the details and ensure the final design met the desired goals.
4. Prototype
Developing the prototype in Figma provided an opportunity for me to demonstrate the skills I had acquired throughout the course. It also enabled me to test, validate, and identify areas for improvement in the design decisions I had made.
Trip details:
From: London
To: Dubai (Press P to populate)
2 Adults Travelling
Departing 28/10/2023
Returning 31/10/2023
Add 23kg for Passenger 1 both ways
Seats from London - B8 and C9
Seats from Dubai - D22 and E23
Annotation & Handoff
This was the final stage of the course projects, enabling me to refine my ability to describe the interactions and functionalities of each page through design annotations.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.