Booking.com - UXDI Bootcamp Project *
Responsive Mobile Web Redesign & Feature Integration
*Please note, I am not affiliated with Booking.com.
This is an exploration on problems I discovered conducting a case study of Booking.com.
Molly Winter Stewart
O. Patricia Gomez
Sketch, InVision, Zeplin
2 week Agile sprint
Working with a team of 2 other UX designers, I collaborated on the redesign of the Booking.com responsive mobile website.
The standout of this case study was the overall problem space. We discovered that users weren't having problems on the desktop site when booking travel; they were having difficulty contacting customer service on mobile on their trip.
To solve the problem, we designed 3 simple paths for users to easily find the customer service page on the mobile website - through the header, footer, and hamburger menu.
Based on data from user research indicating that users want to support causes they care about, we also developed a feature integration to provide users with the ability to sign up for volunteer opportunities in the city they're visiting.
Watch a short click-through of the Figma prototype
Understanding the user
HOW iS BOOKING.COm USED?
And HOW DO USERS SUPPORT SOCIAL CAUSES?
To better understand the goals, needs, pain points and behaviors of Booking.com users, we interviewed 5 candidates who met our criteria, and who represented a balanced demographic of age and location.
To qualify for interviewing, candidates needed to have used Booking.com before, and to have supported a social cause within the last year. This was important because of the feature integration we were also including in our design.
Our interview questions focused on the following topics:
recent experience planning a trip
recent experience using Booking.com
support for social causes
KEY TAKEAWAYS FROM USER INTERVIEWS
Users primarily use for Booking.com to book accommodations / hotels
Users predominantly experience problems while on their trip, not during the actual booking process
Users are less confident in situations that involve unfamiliar locations and language barriers
When users run into a problem, they prefer to call customer service rather than go online for help
Users like to donate their time in-person to causes they feel personally connection to
To help us visualize what users experience emotionally when engaging with Booking.com, we decided to create a journey map as a companion to our Persona.
HOW DO USERS FEEL WHEN THEY USE BOOKING.com?
Margot's Journey Map
KEY TAKEAWAYS FROM JOURNEY MAPPING
Users prefer desktop for research and booking a trip, but only use mobile when they're traveling
Because Booking.com is a
3rd-party vendor, users have little recourse when serious problems arise during travel
The journey map definitively showed us that our user was experiencing the most significant pain when trying to connect with Booking.com customer service on mobile during a trip.
With this data in mind, we wanted to get more specific and find out exactly what happens when a user tries to contact customer service, so we could establish baseline metrics for our design.
WHAT HAPPENS WHEN USERS
TRY TO CALL CUSTOMER SERVICE?
To validate that our research was strongly pointing to a service design issue, we ran a baseline usability test on Booking.com's responsive mobile site, asking users to find and call customer service.
We discovered that users spent a long time trying to find the customer service phone number, which amplified their stress level in an already stressful travel situation.
# OF CLICKS
TIME ON TASK
KEY TAKEAWAYS FROM BASELINE TESTING
Baseline testing validated that Booking.com's existing service design on responsive mobile was the biggest usability problem users were facing, so we developed a problem statement to help guide our redesign process that spoke to this opportunity for improvement.
How might we help users like Margot find and use customer support
as problems arise in the moment,
and prevent these kinds of issues from happening in the future?
DESIGNING A SOLUTION
QUICK ACCESS FROM THE NAVIGATIOn
We added a phone icon to the header and "Contact Us" CTA button in the footer on the homepage to provide 2 direct pathways for users to reach the Customer Service support page quickly and easily. We retained the original path through the hamburger menu.
MULTIPLE WAYS TO CONNECT
WITH CUSTOMER SERVICE
For travelers like Margot who may not have service or an international calling plan, we decided to add 2 additional methods of contacting customer service to the customer service screen: WhatsApp and Live Chat.
During mid-fidelity testing, users hesitated nearly 10 seconds in choosing a contact method on the Customer Service support page, because they weren't sure if the customer service icon at the top of the screen was clickable or not.
To improve visual understanding for users and make the customer service page easier to use in high-fidelity, we decided to rearrange the icons and their labels into in an F-Pattern and group them in closer proximity to show relatedness to users.
INTEGRATING A FEATURE FOR SOCIALLY-CONSCIOUS USERS
We had learned from interviews that users like Margot preferred to show support by volunteering their time in-person, so we added a "Volunteer & Support" page to the website, where users could search for volunteer opportunities in a specific city and date range.
EVALUATING SUCCESS WITH TEST METRICS
Testing of the hi-fi prototype showed substantial overall improvement.
In asking users to find and call customer service, users were now able to find the customer service page and phone number 84% faster, and with 75% fewer clicks.
# OF CLICKS
TIME ON TASK
3 simple paths for our user to easily find the customer service page on the Booking.com mobile website - through the header, footer, and hamburger menu.
Watch a short walkthrough here, or try it for yourself in Figma.