Usability testing In-Depth Interview Online Survey Competitive Benchmarking
As I am starting from scratch and not working on an existing product, it is important to focus on the websites' layout and content to identify effective features that can be efficiently replicated, avoiding the waste of resources by reinvent the wheel, and to uncover pain points to avoid in the design phase of the project.
Below are the areas I’d like to explore during the research.
I want to understand:
What information and tools are available to the
users before and during travel and what info is missing.
What are the main pain point of the process of air travel with a pet.
How can technology have a positive effect on this process.
App and website analysis to discover what info
on the topic does Alaska Airlines provide.
Evaluation of the current process of onboarding
with a pet to discover pain points.
In-depth user interviews with people who decided
to take their pets on the plane with them to learn
about the first-hand experiences.Secondary research on the current
process of traveling on air with pets.
I started the process by visiting some of the existing airline booking websites and evaluated which of the websites would be most suitable for the usability test participants to engage with. I decided to select a smaller and a larger company to gain different viewpoints on how the varying scales of operations are similar or different in style regarding the customer booking journey with the booking feature.
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 IOS), 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.
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.
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.)
(Booking a holiday should be an exciting and smooth experience.) (users have to start agian if they want to make any changes of their selected options.)
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.
