Agoda's YCS Mobile Bookings feature

Stage 4. Property collect features (Phase 2)

In the second phase, we had to design four features for bookings where the property collects payment from hotel guests:

1. Search Page's action menu

2. Mark as no-show

3. Verify credit card

4. Request a new credit card

5. Cancel booking when a credit card is not provided

6. View payment card details. We decided, however, to make this feature only available on the desktop view.

4.1. Search Page's action menu

From the search page, hotels can trigger a menu of actions they can take on bookings (Mark as a no-show, Verify credit card, Request a new credit card) while browsing through cards.

I proposed three design options for this action menu:

1. Option #1: A bottom sheet with actions and some information, forming call-to-action buttons.

2. Option #2: A bottom sheet with actions as call-to-action buttons, each with attached information.

3. Option #3: A bottom sheet with simple call-to-action buttons and tooltips that display more information in a modal.

Option #3, though it added an extra step, offered clear call-to-action buttons and detailed information about each action.

4.2. Mark as a no-show (Feature)

Within 72 hours of the check-in date, hotels can mark a guest as a no-show and cancel the booking. Before that, the "mark as no-show" button is disabled.

Once enabled, if the hotel chooses to go ahead and mark the guest as a no-show, it follows the following flow:

4.3. Verify credit card (Feature)

Another feature I had to account for was verifying credit cards. Since the flow already existed on the desktop, recreating it on mobile was straightforward.

In the simplest scenario, upon clicking the "Verify now" button, the hotel receives confirmation that the card is valid and successfully verified that day.

When the card is invalid for any reason, we can request the hotel guest to provide new card details. Note that the following flow is also triggered when the hotel clicks on the "request a new card" button to ask for a new card from the guest.

If the hotel guest provides new card information, we inform the hotel:

If the hotel guest doesn't provide any information within 72 hours of the check-in date, the hotel can cancel the booking.

4.4. Request new credit card (Feature)

This feature follows the same flow used in the card verification process for requesting a new valid card.

4.5. Cancel booking (No CC)

If a credit card is not provided by hotel guests, the booking can be canceled in certain cases:

1. The hotel can cancel the booking if the guest has not confirmed their stay 14 hours before check-in.
   
   
   

   

   
   However, if the guest confirms their stay 14 hours before check-in, the hotel cannot cancel the booking.
   
   

2. In other cases, a machine-learning algorithm handles cancellations by determining if a guest is a high-risk no-show.
   
   
   

   

   
   If a guest is likely to check in, as determined by the machine-learning algorithm, we do not allow hotels to cancel.
   

   

Stage 5. Chat feature

On the booking details page, users can always access a "chat" button that opens a chat window with the guest:

• At the top of the page
  
  
  

  

  
  

• At the bottom of the page
  
  

  

  
  

• From the search page of bookings:
  
  

  

Next steps and acknowledgments

In Phase 3, we planned to introduce features and subpages built and supported by other teams as part of the mobile experience. Unfortunately, I didn't get to work on Phase 3 because I decided to transition out of Agoda. I credit much of my success on this project to my extensive collaboration with Brady Liu (Senior Designer - Enterprise), Lei Lei Wu (Product Owner), and the team of over 20 engineers who supported this product feature launch.