FLY-UX

Research  Analyse  Ideate  Design  Prototype  Wireframe
Screenflow  Surveymonkey  Sketch  Illustrator  Photoshop  Invision  Figma

Case Study

This case study is a part of a UX course where I will be concentrating on the flight booking process for a hypothetical airline company named 'Fly-UX'. The objective is to design an online booking platform that fulfills all user requirements and effectively address any pain points i discover during the research phase.


Research

Usability Test


I conducted usability tests on the following websites: EasyJet and Virgin Atlantic. I recorded the tests using ScreenFlow, which allows me to capture participants' faces and screens to observe their reactions and behavior during the test.

The test involved participants completing a booking on each website based on hypothetical events, aiming to discover users' experiences and engagement on the two different sites. The information and data collected from the test will help determine what works and what to avoid during the ideation phase of the project.

Preparation prior to the tests included: recruitment screener, consent form and a test script.

Click on the image above to view the usability test script.

🫣 User disliked the necessity to navigate through each add-on option during the booking process.

😡 The 'Refine Search' button was not easily visible to users on the page. It needs to be more prominent so that users do not have to restart the process every time they need to change the information.

😊 "Everything was smooth and easy to understand."

🤔 "Some of the pages felt cluttered with information. A cleaner look would make them easier to understand."

🤔 "It might be a good idea to allow users to enter multiple dates so we can compare prices for each date in one go, rather than having to search multiple times."

😕 "I did not really understand some of the terms used on the website, such as 'Flexifare,' and there was no explanation available."

👍 "Having all the flight summaries on one page/section is good because it makes it easier to double-check and confirm everything during the process before continuing each step."

The usability tests have brought to my attention that many of the booking processes on existing airline websites already feature straightforward designs, and users did not particularly encounter any functional difficulties navigating through them.

However, users who do not intend to select add-ons during the booking process are required to go through each option, adding unnecessary steps. This was a nuisance for the users who never intended to select any add-ons, even if they are offered. (Are there efficient ways to skip these steps without affecting the users who are interested in these add-ons and without impacting the business side?)

Another problem was that some pages were too cluttered with information, requiring users to take extra time to find and understand the necessary details before continuing with their task. Pages that were too cluttered seemed overwhelming for the users and may have slowed down the process of completing their tasks even if the booking process is straightforward, all the noise around was distracting.

In-Depth Interview

In-depth interviews helped to understand the users beyond the testing, understanding their needs, and can anticipate their behavior; including their occupation, age, tech-savviness, preferred operating system (Windows/Android or Apple), how often they use their computer or smartphone, and any past troubles they have had booking flights online etc.

This helped broaden the understanding of the users needs, ability and mental model.

The small pool-sample of volunteers for the interview was not substantial enough, having a broader range of user samples would help the product to be more inclusive to all types of users, regardless of age, ability, and circumstances.

Click here to view the in-depth interview script

Online Survey

I used an online survey to effectively gather quantitative data, which provided insights into the goals of people who use airline websites or apps. The survey was created with open and closed ended questions as well as multiple choice questions on Survey Monkey and shared through via social media platforms.


Click on the image above to view results of the survey.


Things I identified through the survey:
56.25% of the users are price-sensitive, and it is one of the most important factors for choosing a website/airline to book with.
18.75% said that a smooth, friendly booking process is the most important factor for them.
The majority of users prefer using a desktop to book flights rather than on their phones or tablet.
49% of users take 20-30 minutes to book a flight online  
25% of users spent more than an hour to complete their booking.
18.75% said that finding the desired time and date is the most important factor when choosing a website/airline.
94.1% of users were able to complete all the task they wanted to do.

Suggestions from users:
"It would be really helpful to compare flight details rather than having to do multiple searches to find alternatives''
"Automatically add flight date and time to calendar when booking is. complete"
"no hidden costs, showing the full potential cost during the early booking process"

Pain Points:
During the booking process, a user was unable to undo or change the selected seats and was informed that they would be charged for changing the seats before completing the booking. There was no back or undo button to go back a step, so the user had to refresh the page and start all over again.
User had to book tickets for themsevles and a friend, but after completing the booking, they were not given an option to send the boarding pass separately and on the app, I had to log in on both devices so they could each have access to their boarding pass. There was no feature to easily share the boarding pass via email or through the smartphone app.

Competitive Benchmarking

I benchmarked four competitive websites to gain insights into their booking processes and identify the similarities and conventions they all share. The participants in my usability test found that most of the booking sites had straightforward, issue-free features that functioned as a standard. Therefore, it is better to understand what is currently working and emulate the features which are working well rather than reinvent the wheel and risk failure, time, and resources.

Main focuses:
•Homepage - What comes up first and what the user see when they visit the page
•Booking process - The search task and process the user has to take to complete before proceeding
•Result page - Layout and composition that convey a response to users information needs
•Add-On page - How does each site offer additional add-ons to the booking
•Payment Page - How do the competitors ask for payment details and in which format


Click on the image above to view the competitive benchmarking pages.

Final Thoughts on research:

• Conventions the websites uses:
- The search feature is the first thing on a homepage
- All deals and offers are on the homepage, but some are more intrusive than others.
- Progress bar to visualise the progression of task during the booking process
- Additional add-ons are near the end of the booking process
- Similar payment formats

• Majority of users are price sensitive and having the cheaper tickets will dictate whether your platform will be chosen over others. Users are willing to endure pain points to save money.
(However, this should not be an excuse to provide a poor user experience within your product, as it can also result in lost revenue)

• Users find it annoying to go through each add-on at the end of the booking process if they never had any intention of selecting them initially.
(It just adds extra steps for users. Will minimizing offers and upselling affect the business negatively, or will it provide a better flow for users without changing the business outcomes?)

• Users found that some of the airline pages were too cluttered with information.
(What are the click rates on these offers to determine if they justify distracting users from their main goal)

• Users like the clear flight summary on 'EasyJet's' site, which provides a constant overview throughout the booking process.

• Users want the option to go back and edit the booking without starting the process all over again.

• Users prefer a user-friendly checkout process with no hidden costs which comes as a surprise at the checkout page.

• Out of the websites I reviewed and tested, I favor the 'Trainline' website more as it best meets the user needs identified during my research. Despite having as much content and offers displayed on the page as other websites, the composition of the homepage does not feel overly crowded like some of the other websites i reviewed.
(Even though the site is designed to book train tickets and not flight tickets, the booking principles and process are still the same.)


Analysis

Click on the image above to view all the note taking from the research.

Affinity Diagram

I worked on the diagram alone so, I tried to look at the data from different stakeholder perspectives. There are a lot of post-its that are not just about the customer journey, they are also suggestions, instructions, and even potential business opportunities.  I have a development background and have always been involved in planning sites, therefore, I know that this would be the only opportunity to have colleagues from different departments working together.I am happy with the result and was able to produce a Customer Journey Map from the Affinity Diagram.

To define the problem, I had to gather all my findings and notes to organise them all. At first, I physically began to writedown all the notes onto sticky notes and stick them up on a wall, but it was getting too much so I had to switch todoing it online. I used Miro to create sticky notes of all the findings and group them into appropriate categories. I muchprefer the online method as it looked a lot neater and was easier to group.I decided to categorise the sticky notes into different screens on the app - eg. homepage, results page, search page- as this was how I structured my usability test, and how the usability test I watched was. I then colour coded the stickynotes so that it represents what notes are negative, positive, behaviour and goals.Doing an affinity diagram was a great way to get a clearer structure of what my research helped me to achieve.Grouping them chronologically would be useful when it comes to sketching each screen, as I can look back to thisdiagram and find the right category.

Click on the image above to view the Affinity Diagram process

User Journey Map

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

I then moved on to creating a customer journey map by using the affinity diagram. It was now time to analyse deeperinto how the user experience was throughout the usability test. I created a graph to visually show how the experiencewent up and down and analysed their goals, behaviour, context and mental model.What I found quite interesting was how the experience was average or below average. It shows a rollercoaster ofemotions felt by the users - something that starts of pleasant, gets disrupted in the middle, and only gets betteronce the booking is made. The most unpleasant part of the journey was the add-ons page, due to users findingit disrupting or difficult to skip past. Add-ons can be useful for some users as they can provide extra packages toenhance their stay, the majority from my research didn’t find the extra step pleasant. There are definitely many areasof improvement on hotel apps, and creating this customer journey map once again made these improvements moreapparent for me to work on.

Click on the image above to view Customer Journey Map

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

Design

Flow Diagram

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

The first step of designing is to create a flow diagram. This is to creat ea clear structure of each screen state andwhat will happen on each screen. From the onboarding page, to the payment page. I first made a draft on paper, andclarified this structure on Figma. Apart from what the different pages will be, I also looked at any technical features,mental models, as well as the user action. This was the perfect way to visually present the flow of my app and to takenote of any features I want to include.

Click on the image above to view the full Flow Diagram

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

Define Navigation

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

Click on the image above to view the full Flow Diagram

Interaction Design

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

Click on the image above to view the full Flow Diagram

Mid-Fidelity Design & Prototype

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.

Click on the image above to interact with the prototype

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.


Wireframing

Wireframe

I conducted usability tests on the following websites: EasyJet and Virgin Atlantic. I recorded the tests using a program called ScreenFlow, which allows me to capture participants' faces and screens to observe their reactions and behavior during the test.

The test involved participants completing a booking on each website based on hypothetical events, aiming to discover users' experiences and engagement on the two different sites. The information/data collected will help determine what works and what to avoid during the ideation phase of the project.


Click on the image above to view the usability test script.

I conducted usability tests on the following websites: EasyJet and Virgin Atlantic. I recorded the tests using a program called ScreenFlow, which allows me to capture participants' faces and screens to observe their reactions and behavior during the test.

The test involved participants completing a booking on each website based on hypothetical events, aiming to discover users' experiences and engagement on the two different sites. The information/data collected will help determine what works and what to avoid during the ideation phase of the project.


UI

HIgh Fedility Design

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

Running an affinity diagram session allowed me to sort through the data and insights collected through my research. Myself and a partner reviewed the research and made notes relevant to the users experience, pain points, mental models and contextual information. We wrote these notes on post-its and placed them on a blank wall. From there we divided the post-its into groups and subgroups 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.