Fly UX
Desktop Website
Student Project
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.
Challenge
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.
Overview
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.
My Role:
Research: Competitive Benchmarking, Online Survey, Depth-Interviews & Usability Testing
Analysis: Affinity Diagram & Customer Journey Map
UX Design: Flow Diagram, Sketching, Low-Fidelity, Prototype, Wireframes
Research
Online Survey
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?
Smartphone 52%
Desktop/Laptop 30%
Tablet 8%
Combination 10%
Yes 84%
No 16%
Why did you visit the website that day?
Most common responses:
"Book flights for a trip"
"Compare flight prices"
"Check-in online"
"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%
Price 90%
Destination 60%
Travel Duration 5%
Additional Services 0%
Quantitative Resarch
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
Background Information:
-
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
Positive Notes:
-
"Quite straightforward for the most part"
-
"It all felt pretty clean"
Negative Notes:
-
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
Positive Notes:
-
The process - "pretty straight-forward once you got a grasp of what was in front of you”
Negative Notes:
-
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
Qualitative Resarch
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.
Analysis
Affinity Diagram
Research Analysis
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
Research Results
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.
UX Design
Flow Diagram
User Flow
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.
Sketching
Screen Layouts
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.
Final Result
Medium-Fidelity Prototype
Usability Tests: Product Testing
Background Information:
-
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:
Positive Notes:
-
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
Negative Notes:
-
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.
Wireframes
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.