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:

  1. An excessive number of stages in the booking process.

  2. Inadequate visual layout decisions.

  3. Inappropriate color selections.

  4. 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:

  1. A streamlined booking process with a minimal number of steps.

  2. A clear and well-defined visual hierarchy and layout structure.

  3. 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
BarbonAir.com

Online Survey

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

BarbonAir.com

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

BarbonAir.com

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
BarbonAir.com

View my Miro board here

Customer Journey Map
BarbonAir.com

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.

BarbonAir.com

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.

BarbonAir.com

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.

BarbonAir.com

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.

BarbonAir.com

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

BarbonAir.com

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.