Select Page

UX Diploma

UX Design Institute & Caledonian University Glasgow

The main aim of this 6-months project was to identify the best practices for airlines websites and to create an ideal booking platform.

Main tools:

  • Survey Monkey
  • Screenflow
  • Sketch
  • inVision Studio
  • Affinity Design
  • Affinity Publisher

Research

Usability tests

For the usability tests I decided to focus on the websites of the main low-cost companies, because of their aim to cater to the widest possible demographic. This phase of the research was necessary to zero in on the critical aspect of the booking experience. I created a test script that would provide a defined roadmap for the test, while allowing for the additional inputs and spontaneous findings of the test subjects to develop freely. This phase of the research focused primarily on the execution of the main tasks a user would complete on an airline site, such as planning a journey, checking the prices, changing details on the booking and completing the purchase.

Depth interviews

The depth interviews focused on the habits of both leisure and business travellers. The aim of this phase was to understand what would be considered an expected service, what are the booking and traveling patterns and the identification of critical aspects of the travellers’ experience.

Online survey

I created a short online anonymous survey to allow for a wider collection of raw data. I included both quantitative and qualitative questions, and tried to reach the widest possible demographic

Competitive benchmark

In order to have a wider understanding of the standard services offered by the main competitors, I analysed the websites for two budget and two full-service airlines.

As expected, the differences in the respective business models were immediately evident: the low-cost companies’ websites were cluttered with ads for extra services, to the point that the user would be forced to scroll through multiple pages of advertisement in order to complete the booking. On the other hand, full-service airlines would not use a modern, user-friendly interface, making it less practical to choose a flight and follow through with the booking.

Analysis

During the analysis of the collected data, I decided to focus on the development of a desktop version of the website, as most subjects displayed an inclination to book flights from their laptops.

Affinity diagram

I reviewed all the collected results with a colleague, in order to ensure a fresh, multifaceted perspective. We spent a few hours reorganising all the gathered insights and finally came up with a comprehensive affinity diagram. Most negative emotions and doubts were related to the way the interface is structured and especially forced steps in the booking process, while the positive ones come from elements the users are most familiar with (date picker with the classic calendar, color coding, quick airport search).

Customer journey map

I structured all the previous information in a comprehensive overview that takes into consideration every step of the booking process. The main issues would be connected to the fare choice, whose selection is not always clear, and the extra services, that are often scattered through multiple steps and pages, greatly slowing down the process.

Flow diagram

In this step I sought a solution for each major problem encountered during the previous steps. I arranged to dedicate a page to the fare selection for each passenger, and to concentrate all the extra services in a single page, allowing the user to either select the desired ones or ignore them altogether.

Design & Prototyping

Define navigation

Making all navigation options visible at every step of the process can cause confusion and sometimes involuntary errors, so I only left the service, language and log-in options during the booking process. The user will always have the chance to go back to the previous step. During the payment only a stepper with the payment process will be shown.

Interaction design

These are some low fidelity sketches outlining the whole booking process.

Medium fidelity prototype

This is the result of more tests and validations. At this level, I could verify the effectiveness of the prototype with people less familiar with the project, analysing which aspects were working and which needed to be refined.

Wireframe

This document is thought as a handover for developers, giving them all the information needed to code the website and, hopefully, avoiding them a lot of rework.