UX Practice: Agoda’s Hotel Room List
In this practice, I’d like to test myself whether I could do something with an already well-designed application. I picked Agoda app and did a quick exploration as a user who’s looking for a hotel room.

I’m quite impressed, a simple card design with all necessary information, a preview of map view that is easily toggled between two displays, and gallery preview in the hotel room that displays multiple photos at once. I think these layouts are already good at its own, there’s no reason for me to adjust it. Thus, when I looked for hotel room detail, I got little frustrated.

As I keep scrolling, I found many buttons for booking with various prices for the same room. It seems like indefinite scrolls for me, many repeated patterns force me to hop back-and-forth for a while until I understand the difference.

In this case, there are 2 options of breakfast excluded/included multiply by 3 payment method: pay now, pay later, and pay at the hotel. Plus an additional option from Booking.com, the total number is 7 options.
Many users might end up clicking on the first booking button (which Agoda did great on sorting the cheapest price on top to serve them) but wouldn’t it be better if all options can be displayed to them more properly?
First thing I’d like to do is to resize the height of each card by removing the redundant display. Since all cards are for the same room anyway, there’s no need to keep showing the free-wifi icon and number of guest per room. I also remove multiple discount (there might be some reason for the instant discount but is it necessary to show to customer who has neither idea nor action on it?) and “it only takes 2 minutes” phrase (It’s good to attract user that booking process is easy and fast, but repeating it every time they scroll might not be the best method so far)

Then, I’d like to group breakfast and payment options together to reduce the number of cards. My solution is the extra option list with additional price user need to pay. When user tap to add option, the current card of base price will be replaced with the new card. This way could help decrease frustration of too many choices plus they can have a rough idea of the difference in each feature. Since there’s no specific pattern for the additional price, I put the maximum price that calculated from all cases instead.
At first, I use the image icon for each feature but when I tested with my friends, most of them didn’t see it as a button so I ended up using the plus icon for better understanding.

At the end, I still leave the “Supplied by Booking.com” card as its initial state because this card differs from other conditions. More discussion in business aspect required before further actions.
That’s all for today’s blog. This is just my personal practice for the UX exercise so please feel free to leave comments or feedback. I know I still need to learn more and I need your help :)

