FlyUX Airline Website

This project was undertaken as part of my Professional diploma in UX design through the UX Design Institute. The project involved redesigning the online flight booking experience for a new service named FlyUX. The entire UX process was undertaken, from thorough user research all the way through to the handover of high-fidelity screens for implementation.

User Research

The first stage of the project was to conduct user research to uncover the user's needs, goals and pain points regarding the online flight booking process. This involved running several different research activities;

  • User survey - 30 participants were surveyed to gather qualitative & quantitative data on people's behaviours and experiences with the flight booking process.
  • Usability Testing - 3 usability tests, where participants were given the task of booking flights on existing airline websites. The user's feelings, behaviours and pain points were revealed during this activity.
  • Depth interviews - 3 participants were interviewed to understand their previous experiences with online flight booking.
  • Competitor analysis - A UX audit was conducted on several competitor airlines' online flight booking processes. Some flight aggregator websites were also audited as part of this.

Research Triangulation

With the user research completed, a lot of raw data needed to be sorted out. So the next step was to use the triangulation method to abstract themes from the data. This triangulation was done through the UX technique of affinity diagramming. It's pretty simple; I created a Miro board and put each notable piece of feedback, quote, observation and survey result from the user research onto a separate sticky note on the board. Next, I started grouping related sticky notes together. When I was happy with the groupings of stickies, the final step was to label each group based on the content of its sticky notes. Some of the main themes included;

  • Frustration with airlines continuously trying to sell extra add-ons throughout the process.
  • Confusion about the airlines' policies around baggage allowances and difficulty knowing where to find this information.
  • The airline forced the user to log in/sign up to proceed with the booking.
  • Long loading times when searching for flights, some airlines more than others.
  • Confusion when trying to find the correct prices for flights, along with inconsistencies in prices.
  • Users struggling to navigate through the flow correctly. It proved difficult if a user wanted to go backwards or forward a step. Some airlines also had poor back button support.

Fly UX affinity diagram

Journey Mapping

Following the user research data triangulation, the next step was to journey map the flight booking process. This gave an excellent visualisation of the different stages in the flight booking process. It also highlighted the stages where the primary user pain points were. Generally, people's flight booking experiences started off positively, with excitement about their upcoming trip. But the experience became somewhat frustrating as they continued through the flow. Eventually, when people made it to the end of the booking process, they often expressed a sense of 'relief'.

Fly UX - Journey Map

User Flows

Creating user flows was the next step in the process. They were designed to show all possible paths (both 'required' and 'optional' paths) in the flight booking process that a user can go through. It also included the various actions that they could take along the way. User flows help identify the possible screens required in the design. They also highlight what actions will be necessary to enable the user to continue through the flow and any extra context the user might need to help them along. The journey map was referred to during the creation of the user flow. It helped me understand whether the new flow solves user problems/pain points identified throughout the user journey. The user flow went through a few iterations before I ultimately settled on a new, efficient flow that adequately solved the user's needs.

Fly UX User Flow

Early Sketch Wireframing

Next up, I did some rough early design ideation on pen and paper. This was done to generate quick, diverse ideas with a low level of refinement. The goal was to solve the primary user goals & pain points that were highlighted in the journey mapping. The user flow diagram was also used to identify what screens would be required, along with what actions & other content those screens might need. Eventually, these ideas were refined to a point where they adequately met the identified user needs for all the different elements of the flow.

A few early sketches from the ideation phase of the project;

Final Designs & Prototype

I then started working in Sketch to transform the sketched designs into higher fidelity screens. This took a bit of work to land on a set of designs for the entire end-to-end flow that I was happy with. I had to thoroughly think through things like the different component states and edge cases that could arise. Next, I created a prototype of the whole flow in Framer to demonstrate how the solution would work as a whole.

Final Developer Handover

The final part of the project was to create a handover PDF for hypothetical developers to implement. This included detailed instructions for developers to consider if they were implementing the designs. I've learned over the last few years that all the fine little details count during this. You don't want to leave anything to chance. Developers will sometimes overlook design details if they're not defined explicitly.

Prototype Video