FLIGHT BOOKING
Project Overview
Design Institute Case Study:
Review a website or mobile app for your client, focusing specifically on the flight booking process: how users search for and select flights online. Improve on existing practices.
Project Time: Concept prototypes 2-3 weeks
Role: Lead UX Designer
Tools: Figma, Jira, Zoom, Slack, Screenflow, WCAG, Adobe CC
Research
Identifying the Problem:
I used the triangulation method to gather my research. By using different methods of gather research it increases confidence in research data and provides a clearer understanding of the problem.
-
Online Surveys
-
Usability Testing
-
Competitive Benchmarking
Online Survey
I created an online survey to gain insights as to how people book their holidays and which factors are deal breakers when it comes to booking online. I was able to identify :
-
The most important factor is price, followed by travel dates and baggage limitations.
-
90% of people prefer to book their flights online.
-
70% of people prefer to book direct with the airline
Competitive Benchmarking
By assessing competitors websites, I identified areas aligning with the users 'mental models' and areas I could enhance to provide a smoother flow. A few common issues were :
-
Too many repetitive prompts.
-
Overcrowding the screen with ad's - navigation is not always clear.
-
Too many clicks to complete tasks.
Analysis
-
Affinity Diagram
-
Customer Journey Map
-
User Flow
Affinity Diagram
I analysed all research collected and created an affinity diagram. I did collaborate on this project as I believe everyone identifies something different from research findings.
This method allowed to add structure to my research findings and identify the most common user interactions:
-
Users would like simplified baggage options.
-
Lack of direction and prompts on how to progress when user is stuck, also no visible back button to return to previous page.
-
Repetitive prompts are annoying and cluttered homepages are resulting in users missing important information.
Customer Journey Map
From my affinity diagram, I created a customer journey map to tell the story of users experience across all booking journeys and bring the research information together into one easy readable document, as you can see users are most unhappy when it comes to flight selection and baggage options, then again at optional extras.
Flow Diagram
The Customer Journey Map highlighted each stage the user goes through during the flight booking process, this helped to visualise where a screen sits within the structure, when and how the user would reach it. To create my user flow, I identified the best case /happy case user flow (I understand this flow would expand to include other user paths).
My goal is to reduce the amount of pages to make the booking progress smoother and more efficient for the user.
Design
I was aware of the areas that didn't work for users around selecting flights and baggage options, lack of prompts for helping user progress with their booking if they were unsure what was next and over cluttered homages.
I paid particular attention to simplify these options to give the user a smoother flow. I reused elements across the pages, keeping the format consistent as this promotes recognition and consistency for the user.
Creating and designing screens, bringing the project to life and solving user problems is definitely the stage I love most as a designer.
Usability Testing
By observing people use competitors to book a flight, a few issues kept occurring:
-
The baggage & economy options were confusing users.
-
No prompting or help is offered if the user is 'stuck'.
-
Users are missing important information due to information overload.
Prototype
-
Figma
-
Adobe Suite
Reflection
The usability tests really gave me an insight to how differently people use websites and encounter different problems, I was surprised at how many issues users had whilst using leading websites. It demonstrated that bad design affects every user no matter their expertise or familiarity with the technology in question. This reinforces the importance of UX research and the whole UX process, excellent communication with your client, users and team which will ensure you are all on the same page and will make for a more successful design.
I transferred my sketches / ideas to digital format using Figma. As I created the wireframes, I refined the design and made changes to enhance the design and experience for the user. I made a high fidelity prototype adding UI elements bringing my design to life. I chose a colour pallet based on the company logo keeping a branding identity throughout the website.
I created a progress bar to inform users of each step and how close they were to finishing their booking, added a back button option top left of each page and simplified baggage and flight options.
This was where I really felt at home, I loved learning the Figma software and creating a functional design.