Diploma in UX Design, UX Design Institute & Glasgow Caledonian University, 2021
Fly UX is a responsive, medium-fidelity desktop prototype of an airline website that I designed as part of the diploma in UX Design course ran by the UX Design Institute and accredited by the Glasgow Caledonian University.
For the purpose of this project the client is a start-up airline called Fly UX. They’re looking to create an online experience that is fast, easy, and intuitive: one that’s based on a deep understanding of their target users.
The task is to design a new website for Fly UX, focussing specifically on the flight booking process: how users search for, find and select flights online. The end goal is to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes.
Research: Competitive Benchmarking, Online Survey, Depth-Interviews & Usability Testing
Analysis: Affinity Diagram & Customer Journey Map
UX Design: Flow Diagram, Sketching, Low-Fidelity, Prototype, Wireframes
Results from 58 people surveyed
When did you last visit an airline or flight comparison website?
What type of website did you visit?
4+ weeks 90%
1-4 weeks 10%
Airline Website 77%
Aggregator Website 23%
What device did you use?
Were you able to complete your task on the website?
Why did you visit the website that day?
Most common responses:
"Book flights for a trip"
"Compare flight prices"
"Refund for a cancelled flight"
"Check prices for extra baggage"
Did the website / app meet your expectations that day?
Much better than expected 2.5%
Better than expected 12.5%
As expected 77.5%
Less than expected 5%
Much less than expected 2.5%
What is important to you when booking a flight?
(Choose more than 1)
Date / Time of Year 55%
Arrival / Departure Time 35%
Travel Duration 5%
Additional Services 0%
The infographics above showcase the results and data gathered from 58 people surveyed online. The primary aim of the online survey was to learn more about the goals of people that use airline websites, what they are trying to do, whether anything is preventing them from doing it and what other features they would like to see.
Usability Tests: Research
Male, works as a freelance videographer
Uses laptop & phone to access internet
Mostly accesses internet at home
Airline Travel Experience:
Travel phone apps: Ryan Air & Aer Lingus
Typically travels for leisure
Usually flies twice a year in an average year
Book flights through airline websites online
Uses aggregator websites to search & compare prices
Good value prices are important when booking a flight - "because they fluctuate quite a bit"
Overview of Task 1: Air France
"Quite straightforward for the most part"
"It all felt pretty clean"
Expected to see months where it displayed years on the calendar window
Would like to see prices for adjoining dates on the fares page without clicking into them
Overview of Task 2: Qatar Airways
The process - "pretty straight-forward once you got a grasp of what was in front of you”
Didn't like the load screen because there was a lot of information and only 1 or 2 seconds to read it
Understood the promotional countdown on the home screen is to encourage people to avail of deals, but found it more distracting than anything else
I carried out in-depth interviews and usability tests as part of the research process. The main objectives were to learn about the goals, context of use and behaviours of people using airline websites. For a comparative test, the users completed the tasks on two different airline websites. I chose Air France and Qatar Airways for the purpose of this research.
The objective of the affinity diagram was to review the research, make notes on post-its and group the post-it notes based on relevance in a collaborative environment. During this stage of the project Ireland was in lock-down due to Covid-19. I created and worked on this affinity diagram online using Miro. The final high-level groupings can be viewed in more detail here.
Customer Journey Map
The customer journey map defines the high-level steps of searching for and booking a flight on an airline website, based on the groupings of the affinity diagram. For each step I included the relevant goals, context and behaviour of the user. I noted the positive feedback and the problems encountered. Finally, I assessed the overall experience of each step, positive or negative. As you can see, in the initial search window users found the airport selection to be a positive experience while they experienced some frustrations with the date picker. Similarly, users engaged well with the list of flight options but once it came to selecting a fare, they began to encounter problems.
The flow diagram is the first stage of the design process, where I began to develop solutions for the issues uncovered in the research phase. This particular flow follows one primary use case from the home screen up to and including the seat selection. Each section of the website that the user moves through is represented by a different shade of grey.
I have used sketching as an iterative design process many times in the past for designing logos, posters, brochures, shopfronts and websites. It was really great to revisit the techniques of sketching with advice from the UXDI team. It's a fast and effective way to generate and test concepts developed from the research stage of the project. Here, I used a combination of drawing, photocopying, cut and paste to speed up the process.
Usability Tests: Product Testing
Female, works as a dietician
Mainly uses phone to access the internet
Mostly accesses internet at home
Airline Travel Experience:
Typically travels for leisure purposes
Usually flies three times a year in an average year
Always books flights through airline websites online
Price & arrival times are important when booking flights.
Overview of Task:
Likes that there was minimal information on each page making it straight forward to move through
Likes that you can choose "all airports" for searching flight options
Likes that the flight options can be filtered by time and by price
Expected to see baggage options, car rental and hotel booking as part of the booking process
Frustrated by a bug in the prototype whereby the page scrolled back up to the top unexpectedly
Prototyping & Validation
I created a medium fidelity prototype of the desktop website using Adobe XD. The prototype design is based on the research gathered in the affinity diagram and customer journey map, and the concepts developed in the flow diagram and sketches. To refine the design and details of the website for the wireframes, I conducted usability tests with the desktop prototype. The objectives of the usability tests were to trial and examine the high-level flow, screen layouts, text and basic interactions.
The wireframes define the rules and content for the home screen, flight selection, passenger information form and seat selection. It features stills from the medium fidelity prototype and all the necessary detail a developer would need to build the website accurately.