FlyUX Flight Booking App
Simplifying flight bookings with an easy and straightforward approach.
Overview
As part of my Diploma in UX Design from the UX Design Institute, I was required to carry out a complete UX process, from conducting user research to creating prototypes and wireframes that could be handed to developers.
Fly UX is a start up airline and they are looking to create an online booking experience that is fast, intuitive and easy. Using great design to give their product a competitive advantage.
Role & Responsibilities
UX Diploma Student | UXDI
User Research, Wireframing, Interaction Design, Visual Design, Prototyping & Testing
Client
Duration
Jul 2019 - Dec 2019
The Problem & Goal
Booking a flight on an airline website sounds like a fairly simple and easy task. But for many people, the experience of using an airline website is too complicated and daunting. At some stages of the booking process even we would have felt some degree of frustration in the past for some reason. Sometimes we realise it, sometimes we don’t. It depends on how much that issue is blocking us from achieving our goal.
My goal is to Improve the experience of booking a flight, so that FlyUX can grow to be a successful business in a competitive market.
Online Survey
I conducted a user survey to collect information and data points about users' needs and factors that influence their decision. The key objectives of this survey was to learn more about the goals of people that use airline websites and apps - what are they trying to do, what (if anything) is preventing them from doing it, which factor influences their decision the most, what else would they like to be able to do on airline websites and apps. I devised 9 questions before using SurveyMonkey to finalise the survey.
Findings of the survey
- 90% of respondents prefer Desktop/Laptop for booking flights.
- The majority of the users often compare different airlines before booking a flight.
- Price was the most important factor when booking a flight.
- Respondents rarely buy other products/services while booking flight tickets.
- Respondents usually pack less in order to avoid an extra baggage fee.
Competitive Benchmark
For this research method, I reviewed four airline websites and benchmarked them to see what they are doing well that I can emulate when it comes to designing my own airline website. The key objectives were
- To learn how best-in-class websites solve the problem we are trying to solve.
- To understand the conventions we should follow
- To highlight best practice that we should emulate
Depth Interviews
I also conducted depth interviews to get a deeper insight to their general approach to booking flights online, digging out any pain points or how things might be done better. Also to learn more about the context of use of people that use airline websites -what are they trying to do, who are they with, where are they, what devices are they using and so on.
Depth interviews gather data based on the user’s past experiences with a product. This means that their answers are based on memories of how good or bad a product or service was. In this instance, the questions revolve around the last time they booked a flight or visited an airline website and how the experience was. Depth interviews are also recorded so a consent form and screener are required, also I created a script and list of objectives.
Usability Testing
I used the usability test sessions to conduct a comparative test. I had the user complete tasks on two different airline websites. This allowed me to see how well or badly different airlines tried to solve the same problem. I also used this opportunity to conduct interviews at the beginning of the session to gain further insights into the users' experiences.
I created the following documents to conduct the test smoothly. Recruitment screener, consent form, test objective list & a test script. These documents would have several key uses. Firstly the screener would help me understand the type of user I was looking for and the consent form allows me to use their data and meet GDPR guidelines. Then the objective list and script would help keep a structure to the tests and also define the purpose for testing.
Affinity Diagram
In this session, I reviewed all of the research I conducted previously. Took notes during this review and then used those notes to create an affinity diagram which represents my analysis of what I’ve learned so far.
Myself and a partner reviewed the research and wrote these observations on post-it notes and placed them on a blank wall. From there we divided the post-its into groups based on common themes or relationships. We then drew borders around each group and gave them relevant names. The affinity diagram session allowed me to sort through a large volume of data and get to the root of the findings made in my research.
Customer Journey Map
Firstly, I made a rough sketch of the customer journey map on paper. Then used the rough sketch to create a customer journey map using Figma. It helped to define the high level steps that corresponded to the high level groupings in my affinity diagram. It also captured the reality that many users will visit the website many times before making a booking.
I documented the goals, behaviours and pain points of a user for each step of their journey of booking a flight. For each step, I documented the goals of the users at that point. And whether there were any behaviours that the website was not facilitating. I assessed whether the experience was positive or negative for each step.
Flow Diagram
My main objective was to fix all the issues I’ve uncovered during my research and which were highlighted on the customer journey map. In this session, I defined a high level flow for the desktop website.
I first sketched out the rough general flow on a piece of paper, going back and forth until I was happy with the iteration. I then translated my sketches to digital format using Figma.
Low-Fidelity Wireframes
Before I start to design screens, I have to step back and consider how I want the website to be structured and how I want users to ‘flow’ through it.
Here I sketched the individual screens for the website with minimum information that the user requires at each stage of the process. These sketches will be converted into an interactive prototype later.
High-Fidelity Wireframes
I want to add more details to each page before I create a visual design and prototypes. This is high-level design. Defining these extra details will help the developers to build the product accurately. I need to make sure the wireframes contain all the necessary detail a developer would need to build the application precisely.
There are different navigation styles to choose from but not all are appropriate for the type of website I am creating and it also depends how much information I have to navigate. The objective here was to choose a nav style and test whether or not it would work for a flight booking application.
High-Fidelity Prototype
Next I created a high-fidelity prototype for the Fly UX flight booking process. We’ve already defined much of the solution with your flow diagrams and sketches. We are now adding more detail in the form of interactivity to test the high level flow, the screen layouts, text, and basic interactions. Again, I used Figma to create this high-fidelity prototype.
The process was relatively straight forward as I had defined each screen states in detail during the previous session.
Learnings and Outcomes
As this was my first comprehensive UX project the learning curve was steep but enjoyable, and I learnt a lot from the process:
- We are not the target audience – we are not designing for ourselves but for the end-users.
- We need to empathise as much as we can with the people we are designing for to provide great experiences.
- Usability Testing was one of the most critical skill that I developed during this course and I look forward to conducting more sessions in the future.
- I learned new ways to use the information, and transform them into an interactive prototype.
- The process is no linear. Iteration is key to innovation. Research, design, prototype, validate and then start again.
Other Projects
EXADS Website Redesign
StartWith - Designer's Essential
Let's Connect
Get in touch via email or LinkedIn, and let’s discuss how I can help you.
