UX Case Study
Fly UX
Designing a user-centred airline experience
This study focuses on Fly UX, a start-up airline provider that aims to create an online experience that is fast, easy and intuitive; one that is also based on a deep understanding of their target users.
Project Outline
Background
The Fly UX case study was created as part of my diploma in UX Design with the UX design Institute. The main aim was to demonstrate the UX process for a fictitious airline website.
Role
UX/ UI Designer (Independent)
Timeframe
December 2020 - June 2021
Tools
Figma
Miro
Loom
Project Overview
During my user research on airline websites, I discovered that although consumers may use a smartphone or tablet to conduct general research on flight costs and destinations, they prefer to finish the last booking step on a desktop computer because it provides them with a wider field of vision, enabling them to see all the essential and crucial information they require for their reservation. Even for those users that made it to the end of the booking procedure, some of those users still lacked faith in the system and left feeling confused and overwhelmed.
How might we improve users' confidence when booking flights on a website without them feeling doubtful and irritated? I tried to solve this problem by focusing on optimising the flight booking process.
Goal
The goal of this project is to create an intuitive and streamlined user interface for Fly UX's flight booking process.
The design focuses on meeting the users needs, specifically in the following areas:
-
How user search for flights online
-
How users find flights online
-
How users select flights online
Methodology
In order to design the solution that is easy to use, learn and remember, I applied an evidence-based methodology that involved end-users throughout the design process. This approach is known as 'user-centred design' - it focuses on understanding the needs and goals of the end-users and designing a solution that meets those needs.
To do this I will go through the design process which involves research and analysis, defining the user problem to designing the user journey, wireframing and putting together a prototype.
1. Research
During the research phase, I explored the users' needs and pain-points. Additionally, I conducted research on the competition within the market.
The primary form of research utilised for this case study was qualitative research. This approach allowed for more in-depth and nuanced responses from participants, resulting in a comprehensive understanding of users' goals.
To gain insight I have used the following research methods:
-
Competitive Benchmarking
-
Online Survey
-
Usability Testing
1.1 Competitive Benchmark
I used four direct and indirect competitors to identify industry best practices and areas of improvements for the flight booking process. The direct competitors were EasyJet, Wizz Air and Emirates Airline. The indirect competitor being Booking.com (primarily a hotel booking site).
From each of these booking sites, I looked into the following key areas:
-
Homepage
-
Search and select functionality
-
Search input functionality
I collected the data by collecting screenshots of these competitor websites, and through colour coding, I pin-pointed the positives, negatives and neutral aspects of their booking systems. Through this exercise, I was able to determine which best practices and conventions I should emulate for the prototype.
View Competitive Benchmark PDF for full research.
1.2 Online Survey
I collected primary data from 40 users across various industries to understand their goals and preferences when using an airline website.
For the online survey, II used both open-ended and closed-ended questions to gather qualitative and quantitative data.
1.3 Usability Testing
I used remote usability testing to conduct a comparative test research into the flight booking process. I compared two different airline websites to see how well different airlines solved the same problem.
The participants were given the task of booking a flight on two different airline websites (EasyJet and Wizz Air). I observed their interaction via Zoom and recorded for later analysis. This method allowed me to observe the users' behaviour when they were interacting with the websites and helped me identify usability issues.
I also used this opportunity to conduct and interview the users before and after the testing, which allowed me to further understand the user's experience in booking flights and also gain insights.
"This is quite nice, it gives you a nice breakdown"
"I am completely confused!"
Please note: Usability test videos are unavailable for public viewing due to user privacy.
Note-taking for usability test
Notes were taken from the recordings and depth interviews that I conducted for research from the participants of the usability test to uncover as much as possible about the following:
-
What is the preferred device to book their flights
-
What are the goals the user is trying to achieve when booking a flight
-
When booking a flight, what are the physical and social environments
When note taking, I highlighted the positive, negative and neutral feedback. This allowed me to make structured highlights of critical moments that I observed and it made it easy to identify the most important takeaways from my notes at a glance.
"I prefer using a desktop for a bigger view"
"This is where they get you!"
"Wish the search button stood out more"
I find note-taking is an effective way to capture unexpected insights during usability testing and depth interviews, as it may be missed when watching a recording or forgotten if and when required at a later time in the design process.
The insights gained from the user interviews informed where my area of focus should be for future design decisions.
2. Analysis
UX analysis involved collaborating with cross-functional teams to integrate data insights into the product design process. This helps ensure that the end product meets the needs and expectations of the users.
2.1 Affinity Diagrams
I ran an affinity diagram session to organise the data I gathered during my research.
Prior to running the session, I shared all my research data with a team mate who would participate with me to deconstruct the research data for the affinity diagram session. Giving them the data early on ensured that they also had a good understanding of the research output.
In the session we both reviewed all the data and made key notes of relevant user experience, pain-points, mental models and context. Using Miro, an online collaboration tool, I had prepared on the notes on digital post-its and laid out on a blank workboard. To bring structure to this data we then organised all the post-it notes into natural groupings based on common themes and relationships and gave each group relevant names.
The affinity diagram exercise allowed me to collaborate and sort through large volumes of data quickly and efficiently. By grouping related ideas together I was able to identify important themes and patterns in my research which helped me focus and create meaningful conclusions.
2.2 Customer Journey Mapping
Having organised all the data from the affinity diagram session, the next step was to use this data to create a Customer Journey map.
This map visualises what the customer experience is as the users interacted with the booking process. It also includes important steps outside of the website interactions that makes up for the whole user experience.
This helps identify pain points and opportunities for improvement which allowed for informed design decisions.
3. Define
3.1 Research Findings
After conducting thorough research on the users needs, preferences and behaviours, the following key findings were identified:
Holistic User Experience
The user's experience does not just begin and end within the booking process of the website. There are goals and behaviours that exist prior to booking a flight and after.
-
Desktops are the preferred device for booking flights as they offer a large field of view with all the necessary content. Mobile devices are preferred for booking flight options
-
Users found the homepage cluttered and distracting with many moving objects and bold banners
-
When selecting dates, a calendar component is easier for users to select dates rather than typing
-
All booking systems have similar number of steps to complete the booking process.
Navigation and Visibility Issues
When selecting flights, users found difficulty in finding clear information regarding stop-overs for long haul flights. Often the information proved to be either lacking in clarity or excessive, therefor resulting in users feeling uncertain of the overall booking process. Furthermore, some users expressed that in the real world they would not persist till the end in order to book a flight with that particular website and would leave.
Confusions with optional add-ons
Quite frequently, observational research showed users would often get confused and expressed frustration when presented with the optional add-ons that popped up straight after they select a flight. This resulted in many users feeling overwhelmed as they have lost their trail in the process and would make the user think twice about what step they should be taking next.
Many users felt that the optional add-on did not add any value as this is something they did not require or it is an action they would like to do at a later time.
Furthermore, two-thirds of participants in the usability testing expressed difficulties in understanding the phrasing used for the add-ons, thus the confusion and frustration.
3.2 Fly UX Design Goals
Following my findings and analysis, I formed a set of goals for Fly UX in order to create an intuitive, optimised and streamlined flight booking process.
Design strategy
-
Create a simple and intuitive interface for flight search and selection
-
Streamline the booking process by having the add-ons as a separate step (not part of the flight selection)
-
Follow industry conventions for the flight search functionality
-
Provide clear and concise flight search information to help users make informed decisions
-
Allow users to view a summary of their selections so they know what they are paying for
4. Design
During the design phase, I used the design strategy that I defined based on my research findings to create the user flows, sketches, prototype and wireframes. My aim was to address the pain points and follow the industry standards according to my research so that it can greatly impact user satisfaction and the overall user experience.
4.1 User Flow
My first objective in the design phase was to create a comprehensive customer journey map detailing the entire flight booking experience from start to finish.
The goal is to develop user flows that are intuitive and seamless for users to navigate at every stage of the process. However, various difficulties were encountered whilst designing, including accurately predicting user behaviour and ensuring balancing simplicity in the process and not adding too many possible paths that a user may take.
After many iterations I was happy and confident to move the design forward with the user flow I had crafted.
4.2 Sketches and Interaction Design
UI sketches are essential for validating user flows and visualising the user experience. In order to ensure the user flow is easy to navigate I also sketched out key screens which evolved into low-fidelity paper prototype including interactive elements for every touchpoint. This enabled me to validate my navigational concept for the user journey.
Once I felt confident with the user flow and the interaction design I annotated the intended use for the screens and functionality for the interactions and states. This will aid with the high-fidelity design and build of the website.
5. Prototype
Crafting hi-fidelity mock-ups and assembling prototypes is the most enjoyable and rewarding part of the design process. It provides a strong visualisation of the design and creates an understanding of the look and feel of the final product. It's deeply gratifying seeing the product come to life with all the colours and added functionality.
Please note for the purpose of this case study the user journey is covered from the homepage to the seat selection page. The Fly UX prototype excludes the payment process and any possible upselling extras,
5.1 Handover Documentation
For this exercise, I created a wireframe document that contained all the necessary details to accurately build the Fly UX website and a supplementary guide for the prototype.
The main goal of this document is to provide developers with sufficient details off all the screens and it's intended uses. Interactive components also has it's functionality described in the wireframes. By doing this we can avoid any confusion and ambiguity in the development process.
Summary
The Importance of Streamlining in Web Design
Simplifying and streamlining in web design is all about focusing on the essentials and removing any unnecessary elements that might distract of confuse users. By streamlining a design, users can easily flow through a website without feeling overwhelmed or frustrated.
In the case of Fly UX, a simplified design allows users to efficiently search and book their flights with confidence. Research showed that the optional seating and baggage package pop-up that would come up whilst trying to decipher a flight option, caused the user a lot of confusion and unnecessary disruption in the booking process. As a solution, I removed the seating and baggage package pop-up from the flight selection page and added in the seat and bag selection as two separate steps after the user has selected their desired flight(s). Users can now view the relevant information and navigate through each step with ease.
This streamlined approach offers several benefit for the user experience. Firstly, it allows users to focus on one step at a time rather than being overwhelmed by all the options at once. Secondly, it reduces confusion by presenting the information in a clear and concise manner.
Reflection
Reflection on solo Project for Fly UX
As the sole contributor to this project, I enjoyed that this project allowed me to have complete creative control and explore my design-decisions without compromise. However, I face a number of challenges that presented growth opportunities.
The most significant drawback to this research is the limited sample size, which is not a true representation of airline website users. Aside limited sample size, covid may have also impacted the results I received for that time and therefore also not a true representation of users as we would get pre and post-covid in a normal situation. If given the time and resources, I would have like to expand the scope of the research participants to better reflect the majority and to understand their experiences with accuracy.
Additionally, during the research phase I think I lacked the foresight to ask insightful questions with greater focus to my intended objectives. In hindsight, the online survey I used consisted of questions which were too vague. Ultimately, this resulted in yielding data that failed to contribute to my overall design decision. To counter this, I would gather more quantitative data through closed-ended surveys that contain more objectively focused questions. This would provide me with the relevant answers that would aid me with my design process. Also, I would consider conducting these surveys more frequently throughout the research phase with more refined insight by adapting and asking a new set of meaningful questions.