
Voyagair
Flight app

Overview
As part of my work for the Professional Diploma in UX Design from the UX Design Institute, I had the challenge of re-designing a flight booking website.
​
Problem
The aim of this project was to identify usability issues on current flight booking websites and see if we could improve upon them. Through initial user research, we noticed that many people found flight websites to be overly cluttered. And unclear regarding re-booking and refund policies, in this current climate. The goal of this project was to design a modern and user-friendly travel website and app.

My Role
UI Design & UX Research
​
Tools
Sketch, CS Suite
& InVision
​
Timeline
April 2020 July 2020

01. Research
-
User interviews
-
Online surveys
-
Competitor analysis
02. Research Analysis​
-
User personas
-
x1 Affinity diagram
-
x1 Customer journey
​
03. Design
-
Wireframes
-
Style guide & Ui kit
-
User tests
Process
01
Research
​
Research goals
​
-
Understanding the key user goals and needs.
-
To identify common user behaviours in navigating airline websites and user preferences when booking a flight.
-
To uncover any common pain points within the existing user journey and how we could improve upon on this.
​
Remote interviews
06 Travelers
02 Usability tests
Online survey
10 Questions
40 Responses
Competitor analysis
06 Airline websites
06 Airline apps
02 Travel booking apps


Initial research findings
​​
-
Users would prefer a reduced number of steps to book their flight.
-
Users wanted to see a clear and straight forward wording regarding refunds and re-booking due to the current climate.
-
Users often preferred to check out as a guest rather than creating an account.
-
Irrelevant adverts for destinations other than the holiday the user was going on was distracting on the eye and the users very rarely looked into them further.
-
Users preferred key buttons on bright colours to act as a call to action to direct them to the next steps of the booking process.
​
​
​

Industry Research


02 Research Analysis
User Personas
​
​
​
~ Considering the users goals, motivations and preferred channels.
​
​
​
~ Building fictional profiles based on the website's intended users & previous user interviews.
​
​
~ Thinking about their current frustrations

​
I created a customer journey map to chart the user's feelings and frustrations whilst navigating an airline website.

​
To highlight the user's mental models, goals, behaviours & frustrations
02 Research Analysis
Customer Journey Map
​
​
​
-
Users generally preferred a visual drop-down calendar than typing in dates.
-
Users would prefer greater flexibility in selecting flights so that they could easily change dates and view cheaper flights if needed.
-
Users preferred a very simple visual representation on baggage allowance options with no additional information on extra web pages to read through.
-
Users would prefer the option of a secure place to save and retrieve previous booking details in order to speed up their booking process.
​
02 Research Analysis
Insights
​
Using the findings from my research, I created a customer flowchart aimed at mitigating some of the issues that I had discovered.
​
03 Design
Flow diagram
​

03 Design
Wireframes & Prototyping
​
From here, I sketched out each screen state focussing on the new site's navigation and overall layout. I then created a desktop prototype on Figma and from this marked up notes (see examples below) within the site's wireframes ready to hand over to the developers.
​



On click of chevron, users will be able to select different currencies from a small dropdown menu.'
'See side note for simple animation of the graphics.'
On hover, highlight selected date with red circle.

03 Design
Look & Feel
​
After feeling confident about the basic user journey through wireframing and a basic prototype I worked a clean colour palette to use throughout the site. Playing with the idea of some fun, animated graphic shapes across the page.
​

03 Design
App design
​

I kept the design of the app simple, in order to keep a focus on the user's steps to booking a flight.


Keeping the design and layout of the different screens relatively uncluttered in order to have a clear and easy user flow throughout.


Conclusion & key learnings
​
Lessons learnt:
~ I learnt not to make my own assumptions, and in order to prevent this, keep continuously testing to fully understand the user and their ongoing needs.
~ Consider the user and their pain points when making any decisions.
​
Next steps:
​
~ Following the recent developments this year, I feel it would be beneficial to further research the user's desire for social distancing onboard and in terms of flight booking. To consider the demand for seat allocation and middle seat blocking, in order to keep the app and desktop relevant and respond to the customer's needs.
​
BACK TO TOP