Overhauling a Checkout Experience
About
I worked on this project as the UX designer in Booking.com’s Attractions team.
This product helps people book tours and activities while on their trips. This project was a redesign of the checkout experience on the desktop web, mobile web, and the Booking.com apps through web views. I was involved in UX design, user research, prototyping, quantitative analysis and A/B testing.
I was the only designer in a team of a copywriter, four developers, a researcher and a project manager. This redesign fixed some of the significant issues with our checkout flow. It made sure we had a scalable solution for our growing business.
Research
We knew from our previous research that the checkout flow had some fundamental usability issues. To understand these problems better, me and Yaniv (the senior researcher working in our team) did some usability studies and quantitative analysis.
We found a myriad of problems that we needed to solve. Here are the most critical issues we wanted to tackle:
Solution Exploration
With the overview of the problems, it was clear that we would have the most significant impact if we change how users pick their dates, times and tickets. The date, time and ticket selection was on the top of the checkout flow. It was one of the more confusing parts that we needed to fix.
I started exploring different ways in which users can pick their dates, times and tickets. A few hours of sketching and prototyping on Figma led me to a few ideas I could share with the team. I like to make sure the entire team is part of the design process, so we have bi-weekly design reviews. After a few iterations with the team, I was able to narrow down the ideas we wanted to explore further.
Here are some of the prototypes I made during the initial exploration:
Idea Validation
User Research
Even though we had a fair understanding of what we should build, we had a few assumptions that needed validation. I used usertesting.com to get some real-world feedback. My test focused on two broadly different approaches:
We tried splitting the flow into three different steps (attraction details, ticket selection and book page). This approach made sure the cognitive load on each page was minimal.
The other approach involved moving the ticket selection as part of the content on the details page. This change helped users view tickets and prices upfront while reading about the attraction.
We also conducted the same user test with the existing design as a control to make sure that we were in-fact solving the problems we set out to tackle. This research helped us fix some critical issues with both of our prototypes.
A/B Tests
We also got our final bit of validation through an A/B test. One of our hypothesis was that the booking flow was too strenuous because the ticket selection and checkout were on the same step. Due to this reason, we saw a large number of empty-field validation errors.
To test this out, we split the flow into two steps; ticket selection and checkout. If we were correct, doing so would cause fewer people to see the checkout section. Of the people that do see it, we would see a lower percentage of validation errors.
We saw a significant reduction on people seeing the checkout section, with a reduction in validation errors, without any change in conversion. This change helped us gain even more confidence in our high-level assumptions.
The Final Product
Our final solution solved a majority of the issues we wanted to fix. It made the flow simpler, reduced validation errors and highlighted ticket prices higher up in the funnel.
This solution is even more scalable since we can easily highlight what makes one ticket different or better than the other. Users can now also compare availability and prices between different products too (e.g. when comparing similar tours).
