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.
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.
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 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.
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.
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.
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
• 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 before payment
• 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.)
I gathered all my notes and started writing them down on post-it notes.
After ensuring there were no repetitions, I began ideating ways to unify the notes and organize all the information into related clusters. I decided to categorize the notes into different user experiences and practices.
This approach provides a clear structure of user needs, and having the information in visually structured clusters makes the research easier to digest and effectively communicates all the research data gathered.
I originally started this task on a digitally for a cleaner, tidier outcome, but in most cases, this would be a group effort. Doing the task physically in a team is more engaging and makes spotting trends and patterns easier, which may be difficult if done individually.
With an affinity diagram complete, I can transfer the information gathered from the research and move it onto a customer journey map.
The customer journey map will help visualize the user experience, analyzing their goals, behavior, context, and mental models from start to finish regarding the user goal I am researching.
Users generally start with a positive mindset, looking forward to booking their holiday with friends or family. However, their experience often deteriorates once they begin the booking process. The disruption typically occurs on the results page, where users may encounter too many choices, leading to information overload.
Once users select their flights, their experience worsens as most sites offer add-ons without a smooth option to skip them, forcing users to view each offer individually. This adds extra steps and prolongs the booking process, creating an unpleasant journey.
However, add-ons can be useful for some users by providing extra packages they need and plan to purchase anyway. Including these offers during the booking process can consolidate their needs in one booking, preventing them from visiting multiple sites and reminding them to buy important packages like travel insurance.
Upon reaching the payment page, users generally view it as the final step of the process, and their experience improves as long as there are no hidden fees. Revealing hidden fees at the end of the payment page negatively affects users and may change their minds about the booking. Going through the entire process only to see the final cost is different from what they were informed earlier in the task is misleading and frustrating.
The graph shows that the user experience is a bit of a rollercoaster, with fluctuating levels of satisfaction. This information helps pinpoint areas needing improvement during the design process, as the customer journey map highlights which areas require focus and enhancement.
Research and analysis are complete, so it’s time to ideate possible solutions to all the user problems I have gathered.
Below are the points of improvement and general conventions I would incorporate into my designs:
•Users prefer a clean homepage with the search tool prominently (primary task) displayed as soon as they land on the page.
•The conventional search format works well and does not need to be changed.
•The results page should be clear and not overloaded with information.
•The booking process should be visible throughout and the final price should automatically update at each step.
•Users should be allowed to skip add-ons, but this should not hinder business outcomes.
•Use a conventional payment page and format.
•The confirmation page should clearly show and ensure the user that their booking is fully complete and confirmed.
•All buttons should be clear and easily identifiable throughout the booking process.
I started drafting ideas of the flow and structure of each screen to understand how users may navigate from the onboarding page to the payment page. Utilizing the information from the customer journey map, including users' mental models and pain points on each page, I was able to make several decisions regarding the flow of the booking process.
For instance, I considered how I could shorten certain processes by adding more skippable options.
Participants experienced pain points with the add-ons during the booking process. While ideating the structure of add-on pages, I explored ways to shorten or make this part of the booking less annoying for users. I found it challenging to reduce the number of steps needed to complete a booking without omitting required steps for the users and not affect the business.
Therefore, I considered implementing a pop-up screen instead of automatically loading the next page when users proceed to the next step without additional steps.The idea is to present users with a pop-up containing a small amount of information, making it less overwhelming than viewing an entire add-on page. This approach caters to users who have no intention or interest in add-ons while keeping the option available for those who do.
After completing a final draft on paper, i transfered the flow chart on to a digital version on Sketch.
I started sketching each screen of the website, considering how I could apply all the previous findings. This is the beginning of bringing the research to life and seeing the solutions in a tangible form. I used conventions that had already worked well with users and incorporated them into the page composition, gradually adding elements to address user pain points and mental models.
For example, having a constant booking status on the right side of the page.
I reused elements and page formats across each screen to maintain consistency in design and composition style. This approach helps visualize a foundation for how the website may look and how the flow will progress from page to page. It is also a great way to see if my solutions to the problems will be feasible, as it is easier to contemplate on paper and can be changed later, as nothing is carved in stone.
After gaining a good understanding of how the screens will navigate with each other, I started to consider all of the interactions within the pages on paper before beginning to create medium-fidelity designs digitally.
Main Focuses:
Homepage
•I kept the search tool prominent on the homepage as it is the primary task for the majority of users visiting airline websites.
•The format for searching flights will be conventional, similar to competitors: auto-fill locations, a calendar table for date selection, and buttons to add or remove passengers instead of typing in numbers.
•Offers will be placed below the primary task, allowing users to scroll down to view promotions without missing them.
Results and Flight Selection Page
•Some competitor result pages are too crowded, making it overwhelming to process information. Search results should automatically filter by price since the majority of users are price-sensitive, but other filtering options will be available.
•A status bar will be at the top throughout the booking process so users can track their progress and return to specific steps if needed.
•A basket and flight summary table will be on the right side of the page so users can see their total cost throughout the booking process from start to finish. At a later step, it will also allow users to remove add-ons easily without having to go back or start again.
•This setup will inform users of the cost throughout the booking process without any hidden fees, and the flight summary table will reassure users that their selections are correct as it is always available for checking.
Add-On Pages
•A pop-up with information about the add-ons, including additional costs, will appear before allowing users to proceed.
•Informing users early will save them time if they have no intention of purchasing add-ons and give them the option to skip the process entirely. Users interested in add-ons can proceed without any hindrance.
After completing the navigation and interaction sketches on paper, I moved on to a program called Sketch to start creating digital versions of my designs. I decided to keep the designs greyscale, adding a bit of colour to certain features liek buttons to focus solely on the primary goals based on my research.
By not thinking too much about aesthetics and focusing on the user experience of the page, I will save time and identify design problems more quickly. This approach allows me to resolve issues before creating the final high-fidelity designs.
After completing all the mid-fidelity designs, I used InVision to bring the prototype to life, enabling the process from searching for flights to completing payment and landing on the confirmation page.
Throughout my mid-fidelity designs, I tried to incorporate as many conventions from competitive sites as possible. These are conventions that I found successful with participants and through my findings from the competitive benchmarking exercise.
Even though I aimed to be more creative with my designs designs to showcase my creativity, I mainly incorporated many conventions that already worked on the competitors site rather than trying to improve them, as it is challenging to reinvent the wheel.
It’s very easy to be different, but very difficult to be better.” - Sir Jonathan Ive
Wireframing was the final project for this course. I created the wireframes to clearly explain how the interactions and behaviors on the webpage should function. All the technical aspects of the webpage are annotated and provided with descriptive information to ensure that the pages and features flow as intended. The wireframe serves as documentation for developers, detailing how all the elements should behave.
