An approach to simple and stress-free air travel booking
Overview
Project Duration
6 months
My role
Design a new airline website and validate a solution to provide a better and hassle-free experience to the users.
The process
Research
Analysis
Design
Build
Test
The challenge
My fictitious client is a start-up airline. 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 industry is packed with airline websites designed poorly. As a result, users find the process daunting, worry about making mistakes and busy with ads.
One of the challenges is to create a website that is familiar to our users without the hustle, but serves the needs of our start-up.
​
I will focus specifically on the flight booking process: how users search for and select flights online.
Competitive Benchmarking
Transavia
I started by visiting different airline websites and identified specific aspects I would focus on for my benchmarking:
​
​
Homepage, flight search and select, class selection, payment details.
For each area, I identified established conventions, things which the website did well which could be emulated, and things not done so well to be avoided.
​
This gave me experience in being able to identify key design principles and patterns, e.g. perceivabillity and visual hierarchy
Survey
I started by making notes about what it was we wanted to learn about users of airline websites, their intentions, behaviors mental models, positive interactions and any pain points whilst using the software.
Created a survey which collected structured data responses from multi-choice questions using a lycard scale.
As well as open-ended questions, which allowed for descriptive qualitative responses.
​
​
Then compiled the responses into a notebook, creating loose categories to group the interpretive replies into, and creating quantitative output.
Did you experience any of the following issues on the
airline websites?
Survey Insight 1
Vast majority prefer fewer ads / extra services
Survey Insight 2
Users often find the payment process and navigation confusing
Survey Insight 3
A significant amount of users indicated it took a “Little more time” than they expected to complete their task
Survey Insight 4
The majority answered Skyscanner is their favourite airline website
Notetaking
Taking detailed contextual notes on relevant usability test sessions.
At first, I started by making generalised notes, then grouping the insights based on the goals and behaviours of users, and contexts of use of the product, as well as any positive aspects we could adopt in our case.
​The goal was to condense the notes to contain only important information to translate into actionable research outcomes.​
​
e.g. flight selection page alignment is confusing or too cluttered, and how the product fitted with the user’s mental models
User Interview & Usability test
Compiled an in-depth Interview & Usability test script based on questions which applied to the context of use of airline websites.
e.g. When did you last book a trip? How many travelers? Where did you view the website?
Studied two different airline websites (Transavia, KLM) to empathise further with our users and learn more about established conventions, the booking process etc
​
​
Created tasks for participants to learn more about how they use the software & what are their goals, emotions and behaviours and mental models.
During this process, I implemented some additional tasks in order to research multiple user goals :
e.g. “checking offers” which was a popular answer in the survey, or “multiple destinations”.
Usability test clip 1
Hover to play
Usability test clip 2
Hover to play
Affinity Diagram
​
Wrote insights gained via usability testing, survey, competitive benchmarking and note-taking on sticky notes.
Put them all up on Miro’s digital board discussed with my colleague the significance of the insights.
​
​
Began natural grouping process, and gave each group a name, something descriptive and meaningful, e.g. ‘homepage’ ‘flight search function’, ‘flight selection’.
​
Identified most important aspects/workflows that need improvement. Or what the software is doing well that doesn’t need to changed.
​
​
Customer Journey Map
Based on the affinity diagram groupings and insights I attempted to visualise on paper the customers' experience as they interact with the website.
I mapped out the steps based on the natural flow and user interaction with the software,
e.g. homepage, flight search, select a flight etc.
​
Draw the customers experience through the journey and translated research data into a structured document.
Structure is loosely based on the groups from the affinity diagram.
User flow diagram
Attempted to get a better understanding of the user flow by mapping out the sequence of screens and screen states that the user must navigate to achieve their goal and complete the flight booking.
​
Used different icons to represent different aspects of the interaction,
e.g. actions taken
by the user in oval shapes, screen states represented by rectangles.
Included annotations which document the feedback the system provides to the user after each action.
Rapid Paper Prototyping
​
Based on the user flow diagram I created, I started sketching screens and screen states, focusing on the identified pain points and incorporating the best solutions identified in the competitive benchmarking stage.
​
Using space on paper was challenging mainly due to lack of drawing experience, and I struggled in the beginning with incorporating micro interactions.
​
​
My goal was to make the process smooth and hassle free for the users and, for this reason, micro interactions and information architecture were a key element.
I used the rapid paper prototyping method to outline the steps in the user flow and validate a variety of layouts. It was the most suitable approach to understanding if our solution works and be able to iterate rapidly.
Medium Fidelity Prototyping
Once the sketches had been finished, I created a medium fidelity prototype in Figma.
Contained simulated interactive functionality.
e.g. selecting input fields, choosing departing airports, selecting the number of passengers travelling, in order to test the main interactions in the fastest and cost effective way.
​
​
Taking into consideration the business perspective, I incorporated selling points like “offers”, “destination”, “cars and hotels” but kept them out of the users' main journey to complete their task to minimise distractions. Also, I gave the user the option to add additional services but only when they might need them.
Wireframes
I then began working on my wireframes. In which I tried to define how the system behaves, how it responds to actions, communicates results and how it fulfils user’s intentions.
Indicated detailed feedback, error messages or constraints to help the user avoid mistakes.
​
Specified the rules for every control or input field to provide a detailed specification of the product for potential developers.
​
Survey Insight 2
Users often find the payment process and navigation confusing
Survey Insight 3
Usability Test
In order to validate our solution, we need to test it with actual users. For that purpose, I designed an usability test script based on my prototype, where I also incorporated tasks to test certain interactions, information architecture, visual hierarchy, language, etc...
​
Insight 1
Slider was unfamiliar and a bit confusing to the user when picking luggage
Insight 2
She prefers the headline “Feb 13” to be on top and more clear, so she knows where she is and reduce errors
Insight 3
He struggled to find “applies also for inbound flight” control and searches on the top right of the screen
Insight 4
“I am always looking for an overview of prices.I don’t want to search day by day to find the best deal”
Iterations and learnings
Based on our users' feedback, I moved on with refining my designs to make them more consistent intuitive and perceivable to the user.
e.g. Removing the slider and introduced a simpler stepper control instead. Enhanced titles and improved the visual hierarchy to help users identify important controls and essential information easier.
Overall, no major usability issues were uncovered, but further testing will be necessary after, together with the UI designer, we iterate the website's UI design.
View the high-fidelity prototype created in collaboration with the UI designer Markos Provelengios and me