UX DESIGNER
.png){kind=small}
Booking.com - UXDI Bootcamp Project *
Responsive Mobile Web Redesign & Feature Integration
Winter 2019
*Please note, I am not affiliated with Booking.com.
This is an exploration on problems I discovered conducting a case study of Booking.com.
ROleS
UX Researcher
UX/UI Designer
Scrum Master
UX TEAM
Molly Winter Stewart
Nicole Gundaker
O. Patricia Gomez
METHODS
Screener Surveys, User Interviews, Affinity Mapping, Persona, Journey Map, Sketching, Wireframes, Mockups, Clickable Prototype, Usability Testing
TOOLS
Sketch, InVision, Zeplin
TIMELINE
2 week Agile sprint
SUMMARY
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
Meet Margot
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
16clicks
TIME ON TASK
2min, 18sec
4/5
DIFFICULTY RATING
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
2
1
Homepage: Mid-Fi
1
2
Homepage: Hi-Fi
1
&
2
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
1
2
3
1
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.
2
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.
3
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
1
&
2
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.
2
1
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
4clicks
TIME ON TASK
22sec
1/5
DIFFICULTY RATING
PROTOTYPE
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.
NExt STeps
RESEARCH WAYS TO IMPROVE CUSTOMER SERVICE & PREVENTION AS A 3rd-PARTY SITE
​
-
Conduct a competitive/comparative analysis on how other companies handle customer care​
-
Implement a new system of communication among all 3 parties to reduce and prevent “lost bookings”​
-
Implement a service to help users find another place to stay in the event a lost booking does occur
IMPROVE INFORMATION ARCHITECTURE
-
Conduct a card sorting test to gain insight on the Hamburger Menu and FAQ page
-
Establish consistency of Primary Nav language across devices (card-sort)
-
Establish consistency of content available on Homepage across devices
-
Combine all searchable property types into 1 CTA; update search filters to include all property types
Expand on volunteer & support initiatives
-
Integrate feature for organizations to announce available volunteer opportunities
