Let's Book a flight for the Holidays!

Research

To comprehend the online booking process and identify potential industry standards, various techniques were employed: Competitive benchmarking, an online survey, note-taking, and usability tests.
Competitive Benchmarking
To understand the booking process steps and Identify industry standards for booking a flight.

Online Survey
To understand user booking preferencesand identify general user constraints when booking.

Usability test
To observe how users interact with an airline website and understand first-hand user behaviors when booking flights online

Research Key Findings

  • Users tend to be familiar with a booking area on landing pages
  • A consistent sequence is followed by all airlines: departing and arriving airports, date selection, passenger selection, and 'search flight' CTA.

  • The calendar is a common, and understandable pattern within the booking process
  • The ticket fare sections could be a place that creates tension among participants
  • Nearly half appreciated having a price overview, with some finding fare ticket descriptions challenging.

Analysis

I implemented two analysis strategies to structure the data gathered in the research phase

Organizing The Information Collected And Identifying Categories. (Affinity Diagram)

This method proved instrumental in understanding the booking process on an airline website and visualizing the structured flow between its stages.

The analysis unfolded in four steps:
  1. Extracting all observations (placing meaningful notes on post-its)
  2. Clustering into significant categories/groups
  3. Creating subgroups for a granular division of information
  4. Organizing final groups into the booking process steps

We Can Define Now The Phases Within The Booking Process

This analysis helped to identify phases that might need close attention since the user seems emotionally demotivated and frustrated in the booking process.

Flight results
It might be confusing to the user due the high quantity of information offered

Flight ticket selection
It might be overwhelming since the are a lot of options to check, and something complicated language confuses the user.
This analysis follows also the booking phases found on the affinitive diagram. However, after a deeper understanding of the process, I realized that the booking process starts before arriving at the website. This phase I named 'awareness'.

So, With Which Situations Are Users Struggling The Most?

  • Users occasionally get confused when selecting a ticket fare
  • Ticket fare descriptions prove ambiguous and challenging for some users to understand
  • Users find selecting a round trip confusing when choosing two tickets, often struggling to differentiate between departure and return tickets
  • Lack of contrast in some CTAs may lead to user confusion.

What Are they Used To?

  • Users are accustomed to being automatically guided step-by-step from entering the departing airport to clicking the 'Search flight' CTA on the landing page
  • The preference for selecting dates is primarily through clicking, although providing the option to manually input dates remains familiar and appreciated
  • The visual affordance of clicking rectangular buttons is universally recognized and expected
  • Lack of contrast in some CTAs may lead to user confusion.

Design

The design phase kicks off by delving into a sequence of steps to be executed by the user in the ideal path within the booking process—the happy path. This exploration evolves from an abstract flow diagram to a low-fidelity prototype.

The concepts presented here align with many of the findings accumulated during the research and analysis phase. This includes emphasizing the initial steps of the booking process, seamlessly guiding the user from one step to the next, presenting ticket fares with prices, and information easy to understand, and incorporating a dedicated page for booking summaries.

How Does it Looks to Book a Flight Online?

1. Home page
2. Date selection
3. Flight Result
4. Ticket Fares
5. Booking Summary
  1. The landing page displays the main features and categories that the user common found on airlines website.
  2. The calendar is a common standard for airlines. It is suggested to make it as ‘click and select’ feature
  3. The flight result page includes suggestions from the research phase, e.g. flight price comparison
  4. Ticket fares are suggested to be clear to understand and with the minimum information.
  5. The flight result page includes suggestions from the research phase, e.g. flight price comparison

Ok, let's start building a prototype based on what we know!

To initiate the flight booking process on an airline website. It has enabled me to gain a detailed visualization of the elements and considerations when designing my airline website.

It made me think more about the design decisions that take place when designing each website screen and how the user might interact with them.

1. The Landing Page

Booking section
One of the most important areas is the booking section, No. 4. It follows the standards in the research and analysis phases:
  • The search bar highlights the input word
  • The translated word is easy to identify and has the function of listening to its pronunciation
  • The results show synonyms from the searched word (adjectives, verbs, adverbs, nouns) when possible
  • The result for a verb offers the option to see its grammar conjugation as it is now offered by leo.org

2. Selecting the Travel Dates (The Calendar feature)

Since the users are familiar with the calendar feature, I decided to focus the attention on this activity while making it a pop-up window, and fading out the background slightly.Further, users can select dates by picking the numbers on the calendar, an activity that is also common for the users.

3. Flight Results

Since this is a step that might confuse users for its high quantity of input, I decided to split the information and reorganize it carefully in the page, in this way, the user might find it easier to understand.
  1. A clear summary of data previously selected
  2. Based on the research and analysis data, clear price flight results with prices
  3. The results show synonyms from the searched word (adjectives, verbs, adverbs, nouns) when possible

4. Ticket Fare Selection

Based on one of the main pain points found in the analysis phase, the ticket fare selection offers the necessary information to inform the user about the fares.

5. Booking Summary

This section is carefully simplified with the main information the user needs to understand the flight selection. Apart from other secondary information, this section provides the user with the following key information:
  1. Where ‘from’ and ‘to’ the travel is
  2. Travel Dates
  3. Passengers
  4. Ticket Fares
  5. Total amount to pay

Mid-Fidelity Mockup

01. Landing Page

Visually clear layouted, the landing page intends to guide intuitive the user through the booking process.

The booking area is easy to indentify and it includes the standards subsections noted in the analysis phase;
  • Departing / Arriving airport
  • Date Selection
  • Passenger Selection
  • ‘Search Flight’ CTA

2. Selecting the dates (The Calendar feature)

Provides clarity for picking and selecting the travel dates. It is a real-size section with accurate visual elements like buttons, drop-down menus, and input fields.

The calendar section intentionally stands alone against a dimmed background, inviting a focused and serene date-selection experience. This design minimizes distractions and reduces cognitive load, easing the decision-making process and fostering a sense of calm.

3. Flight Results

This screen follows the visual guidance of the low-fidelity mockup and places all the elements in the ideal place within the screen.It keeps provide visual hierarchy, this main elements stay recognizable and easy to use for the user.

4. Booking Summary

Carefully simplified with the necessary information and layout with generous space between elements to guarantee readability. Keep the main elements suggested before in the low-fidelity proposal:

From Abstract to Functional

The evolution of each screen designed for the prototype, ensures that the proposed idea maintains its core elements and incorporates essential user interface elements to bring it to fruition.

High Fidelity Mock-up

The high-fidelity resolution of this web mockup helped me to visualize the online booking website in a realistic and interactive way, making the concept tangible.

Conclusion

The airline case study aimed to deepen my understanding of user experience and uncover the specific steps users take when purchasing a flight online. The research laid the foundation for building the case study, and the analysis stage highlighted key pain points crucial for redesigning an airline website.

Prototyping was implemented to translate assumptions and analyses into an interactive mock-up, capturing user observations, comments, and challenges during the online booking process. The feedback obtained proved valuable and can be integrated into a finalized mid-fidelity prototype, to be tested with a larger user base in the next phase.
Overall, I consider this experience a comprehensive practice that immersed me in a real-world scenario, allowing me to apply my research, analysis, and design skills. It pushed me to delve deeper into analysis techniques, adapt to new learning methods, and communicate effectively with users beyond my social circle.

While I am content with the results, I wish to extend testing to a broader user audience and conduct in-person usability tests. Interviewing a stakeholder from an airline or extreme users would have added more perspectives and enriched the research further.
Please take a look to the interactive prototype
Next Project -->

Steff Fotografien Web

UX / UI Design

Button to go to the top of the website