How we improved the CR by 150%
A product design case study by Parmida Aria
Overview
Company
Alibaba Travels
31
Stakeholders
Timeline
2022-2023
30000+
users
The product
Hotel is one of the 13 products on Alibaba.ir, the largest online travel agency in Iran with more than 1200 employees. The goal of this product was to simplify the process of booking hotel rooms from the comfort of people’s digital devices.
My role
Heuristic evaluation, UX design, usability tests, and UI design based on the established design system
The team
Parmida Aria (product designer), Bahere Hamraz (product manager), Parvane Rajabi (UX researcher), Amir Hossein Mehrabi (tech lead), and Mahdi Karimi (front-end)
previous design
Iranian hotels define some restrictions on booking dates during high-demand seasons in popular travel destinations in Iran, such as Kish and Mashhad. This is to maximise their revenue. They can define three different restrictions:
1
Minimum nights
Guests must stay for a certain number of nights or more to book a room. For example, if a hotel sets a "2 minimum nights" rule, you must book for at least 2 nights. So, if you try to book just for one night, it won't be allowed.
Check-in only
Some hotels restrict dates available for check-in. For example, if the hotel designates April 10 as a "check-in only" date, then you can't check out on April 10. You can only check in on that date, or it can be during the middle day of your stay.
check-out only
Similarly, if a hotel picks April 15 as a "check-out only" date, you can't check in on April 15, but you can check out, or have it during the middle of your stay.
Users would pick their desired dates, pick a hotel and land on the Product Detail Page (PDP). However, when the dates don’t satisfy the hotel booking restrictions above, they encounter an Empty Result Page (ERP) advising them to change dates without further explanation.
This diagram shows how we handled displaying ERP caused by restrictions in PDP:
Check Availability
Offers
the problem
Percentage of hotels in popular cities with restrictions
Potential monthly profit lost
More than $100K
Conversion Rate (CR), hotels with restrictions vs without
When selecting their chosen dates, users will still be shown hotels that have restricted dates in that period. When clicking on such a hotel, it would lead to an "empty result page" (ERP). In addition, when faced with an ERP, only about 12% of users adjusted their dates. Our initial usability test showed that many users incorrectly believed we had no available rooms on their chosen dates. In reality, however, their dates simply didn't meet the hotel's policies. This misunderstanding led to:
An 88% abandonment rate
A 75% drop in conversion rate compared to unrestricted hotels
Users being frustrated with booking and switching to other travel agencies
More than USD 100,000 monthly loss in potential sales
Based on the above data and the usability tests, the way we handled these restrictions was complex and not user-friendly.
What's the happy scenario?
Users figure out what to do when they encounter a restriction, find an available room, and successfully book it.
The goal
Provide immediate feedback when users select dates that don’t satisfy restrictions.
Offer clear guidance on date selection that aligns with hotel policies.
Minimise or eliminate presenting users with empty result pages.
Minimise or eliminate errors during the booking process with restricted hotels.
the design
Ideation
I started with brainstorming ideas.
first drafts
Next, I selected the ideas that made more sense and designed those wireframes. I worked with the UX researcher to test some initial ideas on paper wireframes with stakeholders.
Then, I moved to digital wireframes with refinements based on stakeholder feedback. There was already an established design system, so I could skip the lo-fi wireframes and create mid-fi ones directly.
About 85% of our organic traffic was from mobile devices, so we focused on the mobile view of the website to have a better impact.
I suggested displaying all restrictions on one calendar, avoiding an empty result page with the general explanation that "the selected date isn't accepted by the hotel." Instead, when users pick a restricted date, a tooltip (a brief pop-up) would appear directly above, informing them of the issue. The user would have to fix the issue to be able to search for rooms or pick another hotel. This way, users can't proceed with incorrect dates and are prompted to read the notice, preventing confusion later. The message for the minimum nights rule would say “at least x nights”. However, crafting the right message for check-out only and check-in only was challenging. For example, if a user picks June 27 for check-in and it's a "check-out only" day, we had three ideas for what that message might say:
1
"Check-in only"
Good: It's short and to the point. Not so good: Users might wonder why we're talking about checking out when they're trying to pick a check-in date.
"Only selectable for check-in"
Good: This might be clearer for some people. Not so good: It might still be confusing since they're trying to pick a check-in date.
"Not selectable for check out"
Good: It clearly says what they can't do. Not so good: It doesn't say that they’re allowed to check out on that date.
I also came up with the idea to suggest other nearby dates if the hotel has certain rules. For example, if someone wants to stay for just one night but the hotel says they have to stay for two nights, we'd show them the next best dates to pick.
Immediate feedback via tooltips
Nearest available dates suggestions
Test
After hearing from our internal stakeholders and making some changes, we checked which message was more relevant to the users through a survey and a cloze test. Over 2,000 people answered. Over 70% understood the message "Not selectable for check-out" the most. We then did a usability test to see if people knew what to do when they saw these rules. Of the 7 people we tested, 5 could modify their dates slightly and finish booking successfully.
“check-in only”
“Not selectable for check-out”
“Only selectable for check-in”
However, suggesting the nearest available dates didn’t do well in the test. Users were able to play with the calendar a little themselves and complete their booking. So I decided to say goodbye to that part of my design for the sake of the users.
Refining design
I first outlined a flow that was improved based on the survey and usability test findings.
Next, I constructed hi-fi mockups, started prototyping, and prepared the design for handoff.
The Result
After the final test on the actual website, the new design outperformed the previous one. Abandonment rates dropped by 18% immediately, with conversion rates almost tripling. This led to recapturing almost USD 40,000 in booking revenues that were previously lost to abandonment.
Reduced Abandonment Rate
Clearer instructions and immediate feedback help users understand what they need to do, reducing the chances of them leaving out of frustration.
Conversion rate improvement
By clarifying restrictions and making the booking process more user-friendly, users are less likely to abandon the process, resulting in a higher conversion rate.
date adjustment increase
Increase in the number of users adjusting their dates from 12% to around 30%:
rise in average time on page
Instead of users quickly leaving the page due to confusion or ERPs, they spend more time navigating, understanding the rules, and making bookings. ToP increased by 13%.
final note
Redesigning the way we handled booking restrictions took two months with about 31 stakeholders. My role was to manage the UX design, contribute to research, and work on creating the user interface using our new design system. At the same time, I added any components that were missing from our design system. I made sure everything worked well together. Thanks to this project and its successful results from tests, Alibaba has had a significant impact on the hotel industry in Iran.