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. 

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

​

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