UX Research

Brief

Design a website for 'Fly UX'. Focus on how users search, find, book and pay for for flights on desktop.

Deliverables

(i) Design and build a clickable prototype
(ii) Create a detailed set of wireframes

Research Methods

  • Online Survey
  • Competitive Benchmarking
  • Usability Tests and In-Depth Interviews

Research Goals

  • Identify travel goals of the user
  • Investigate how easy is it for someone to purchase a ticket online, find desired dates and prices during the booking process
  • Highlight issues that cause friction
  • Examine how the experience conforms to the users' expectations

Context:
Fly UX is a fictitious airline start-up company. I completed this project for my Professional Diploma from Glasgow Caledonian University, through UX Design Institute.

I was responsible for all UX research and design which focused on the usability of the product. In a real world project this research would be handed over to UI designers and then developers.

Research

1. Online Survey
I conducted an online survey to better understand users behaviours, needs and goals. Gathering quantitive and qualitative data allowed me to gain insights into the user goals, behaviours and contexts, highlight features users liked and identify areas of friction.

Patterns-UX-Survey

2. Competitive Benchmark
I examined the usability of 4 travel focused websites and mobile apps - AerLingus, RyanAir, Emirates and Booking.com to learn how these popular websites solve the goals of users.

Doing this helped me understand best practises and the conventions the Fly UX site should emulate.

Patterns-CompetitiveBenchmark-1
Patterns-UX-CompetitiveBenchmark-2

3. Usability Tests and In-Depth Interviews 
I conducted my own review of the two airline websites before I compiled the In-Depth Interview, Usability Test Research Objectives, Tasks and Script. In total 3 people participated.

The In-Depth interview provided insights to the users goals, prior experience of travel websites and their frustrations when it came to booking flights.

The Usability Tests allowed me to observe the users interacting with the websites and note their mental models, behaviour and the pain points the experienced.

Patterns-UserTest+Interview

Research Insights

  • Visual clutter (pop-ups, extras, adverts) caused frustration for users
  • Some features were confusing as they were not explained properly
  • Clearer cost structures are needed
  • The booking process is complex and can be hard to follow, especially at later stages, during seat and baggage selection

Data Analysis

Thematic Analysis: Affinity Diagram
Research findings were presented to a group for analysis. Observations were written on post-it notes, findings were clustered into groups to form an affinity diagram and identify key insights.

Patterns-UX-Affinty-Diagram

Data Analysis Insights

  • The process needs to be kept simple and easy to follow
  • Only important or relevant information should be displayed to users
  • Frustration and mistrust is caused by lack of explanations, feeling pressure to book
  • Price breakdown should be clear for flights, seats and baggage
  • Users will use aggregator websites to find cheapest options
  • Credit card fees applied per person on a booking is a big pain point

Mapping

Journey Map
Based on the findings, insights and results I created a journey map depicting a users goals, behaviour, context and pain points.

Patterns-UX-Journey-Map

Interaction Design

(1) Flow Diagram
I created a user flow diagram to map every step a user would take to achieve the main goal of booking a flight on the website, starting at the homepage and finishing at the checkout stage. I kept referring to the research findings as I tried to make the flow as simple and addressed the pain points that had been highlighted.

 

Patterns-UX-Flow-Diagram

(2) Sketching Wireframes
Using the flow diagram I moved on to developing what the wireframe layouts, after a few sketching attempts I had figured out a rough outline of the look and feel.

Patterns-UX-Sketches

(3) Medium-Fidelity Prototype
Using InVision I translated my sketches into a medium-fidelity prototype to represent the booking and checking out process, looking at steps for selecting flight, date, seat and baggage and the final checkout process.

View InVision Prototype

Patterns-Mid-Fidelity-Prototype

Handover

The final stage of UX research process is to produce high quality wireframes as part of handover documentation for developers. All pages, components, states and interactions are annotated to avoid any guess work.

Patterns-UX-Wireframe-Annotations

Professional Diploma in UX Design

University Accredited Qualification in UX Design.

SCQF credit rated by Glasgow Caledonian University,

European Qualifications Network Scottish Credit and Qualifications Network

KayMcKeon-UX-Certficate