WorkAbout
Increasing conversions with an improved webview booking form
Agoda
agoda project
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
arrowarrow
Select
arrowarrow
Checkout

Why webview?

In 2024, we updated the booking form 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)
Platforms
Web
iOS
Android

Opportunity

How can we modernize the booking form UI and improve the UX?
Native
(before)
native before
Webview
(after)
native after

Needle movers

These four revamps resulted in significant positive IBPDs (incremental bookings per day).
Payment panel
Before
payment a
After
payment b
+649 IBPDs
Price panel
Before
price a
After
price b
+554 IBPDs
Hotel & room summary
Before
hotel room a
After
hotel room b
+296 IBPDs
Thank you page
Before
thank you page a
After
thank you page b

Research

User testing

I moderated 18 user interviews to learn about and understand any core problems and pain points.

Hide findings

Surveys

I worked with UXR in running multiple surveys to gain insights and sentiment from our users.

Show findings

Design workshop

I led a workshop to gather ideas and feedback from 30+ fellow Agoda designers.

Show findings
Price panel

Areas of confusion:

  • Lack of clear price breakdown
  • Not enough transparency around taxes & fees
price panel a
Old price panel
arrow
price panel b
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
thank you page a
Old Thank you page
arrow
thank you page b
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
change dates 1arrow
guest-a

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
arrow
arrow
Rewards panel
Before
rewards-a
3.4/5
After
rewards-b
4.1/5
Guest details
Before
guest-a
4.1/5
After
guest-b
4.4/5
Payment panel
Before
payment a
3.3/5
After
payment b
4.8/5
Price panel
Before
price a
2.7/5
After
price b
4.0/5
Hotel & room summary
Before
hotel room a
3.9/5
After
hotel room b
4.1/5
Thank you page
Before
thank you page a
3.0/5
After
thank you page b
4.7/5
arrow
arrow
Design-workshop-category
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.
communicating communicating
2. Responsive design

When scaling up components from mobile to desktop, it was important for me to identify which ones needed manual layout input.
responsive designresponsive design
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.
Balancing business needs with user experience