Increasing bookings with an improved checkout experience
Agoda
Agoda is an online travel booking platform under Booking Holdings (Nasdaq: BKNG), serving 3M+ daily users. With a large presence in the Asia-Pacific region, travelers from 200+ countries use Agoda for planning their trips.
Context
Below is Agoda’s accommodation user journey. I am the booking form designer, so I work on the third and final “Checkout” stage.
Search
Select
Checkout
Overview
In 2024, we updated the booking form from native to webview, allowing us to maintain a single codebase with responsive components scaling from mobile to web. Here were the initial motivators for making the move:
- Reduce app developer headcount by 80% while achieving similar results
- Increase experiment velocity on all platforms
- Opportunity to revamp the user experience
My Role
Product designer
Interaction designer
Prototype
Research
Timeline
One year
(2023-24)
(2023-24)
Platforms
Web
iOS
Android
Opportunity
How can we modernize the booking form UI and improve the UX?
Native
(before)
(before)
Webview
(after)
(after)
Needle movers
These four revamps resulted in significant positive IBPDs (incremental bookings per day).
Payment panel
Before
After
+649 IBPDs
By clubbing the payment methods into categories, the visibility of each method increased, leading to more confident bookings.
Price panel
Before
After
+554 IBPDs
Improving the transparency of the total price and price breakdown helped users better understand the amount they'll be paying.
Hotel & room summary
Before
After
+296 IBPDs
Combining the hotel and room cards in a more organized manner made it easier for users to verify the details.
Thank you page
Before
After
Simplifying the confirmation message instilled more confidence in users' bookings, giving them what they want.
Research
User testing
I moderated 18 user interviews to learn about and understand any core problems and pain points.
Surveys
I worked with UXR in running multiple surveys to gain insights and sentiment from our users.
Design workshop
I led a workshop to gather ideas and feedback from 30+ fellow Agoda designers.
Price panel
Areas of confusion:
- Lack of clear price breakdown
- Not enough transparency around taxes & fees
Old price panel
New price panel
All 6 participants who saw this new price panel preferred it over the old one
Thank you page
Live version has “way too much text.”
Users simply want to:
- See that their booking is confirmed
- See their booking ID number
- Ensure they’ll receive confirmation email
Old Thank you page
New Thank you page
Out of the 12 participants who got to see both of these versions, all 12 preferred the revamped version.
Change dates: potential new feature
Showing a calendar in bottom sheet (stay on BF) is expected *and* preferred.
Returning the user to property page would cumbersome.
Ability to change dates
Rewards panel
Before
3.4/5
After
4.1/5
Guest details
Before
4.1/5
After
4.4/5
Payment panel
Before
3.3/5
After
4.8/5
Price panel
Before
2.7/5
After
4.0/5
Hotel & room summary
Before
3.9/5
After
4.1/5
Thank you page
Before
3.0/5
After
4.7/5
Reduce cognitive load
- Sticky price elements
- Urgency messaging is too prominent
- Improve Hotel & Room cards info organization
Seamless payment experience
- Improve checkout experience for logged-out users
- Make the checkout experience quicker
Enhance perceived value
- Highlight savings
- More clear communication around cancellation policy
- Promo code clarity
Innovate for customers
- More clarity around payment methods earlier in journey
- Ability to change currency on BF
Metrics
Incremental bookings per day (IBPD) measures the increase or decrease in the number of daily bookings on Agoda when we make a change or run an experiment.
+335
overall IBPDs
iOS webview
+782
overall IBPDs
Android webview
Due to booking form’s success, Agoda is going “all in” on webview. Flights, Activities, and other funnels are in the process of making the jump.
Challenges and learnings
1. Communicating webview transition status to fellow designers
Since other designers run experiments on booking form, it was important for me to provide consistent and proactive updates on the native → webview transition.
This ensured that there was a framework in place to maintain a consistent and cohesive design.
Since other designers run experiments on booking form, it was important for me to provide consistent and proactive updates on the native → webview transition.
This ensured that there was a framework in place to maintain a consistent and cohesive design.
2. Responsive design
When scaling up components from mobile to desktop, it was important for me to identify which ones needed manual layout input.
When scaling up components from mobile to desktop, it was important for me to identify which ones needed manual layout input.
3. Balancing business needs with user experience
It has been proven that urgency messaging and nudges on Agoda help increase booking conversion. However, too many of them can be distracting. Therefore, using them more subtly and with greater intent can benefit both the business and the user.
It has been proven that urgency messaging and nudges on Agoda help increase booking conversion. However, too many of them can be distracting. Therefore, using them more subtly and with greater intent can benefit both the business and the user.
