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.
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.
UI Design & UX Research
Sketch, CS Suite
April 2020 July 2020
02. Research Analysis
x1 Affinity diagram
x1 Customer journey
Style guide & Ui kit
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.
02 Usability tests
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.
02 Research Analysis
~ 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
Using the findings from my research, I created a customer flowchart aimed at mitigating some of the issues that I had discovered.
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.
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.
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
~ 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.
~ 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