Belvilla: Booking Experience Redesigned
Belville is an OYO-owned portal for accommodation rentals, such as holiday homes, holiday parks, and hotels.
Overview
About: Belvilla is a part of OYO-owned Vacation Homes. It has grown from a small Dutch start-up to one of the largest travel companies in Europe. Belvilla is the online market for accommodation rentals, such as holiday homes, holiday parks, and hotels. It offers an extensive range of the best 40000-holiday homes in 20 European destinations.
Our Target User aka Couples & Families who usually looks out for vacation homes for a longer period. They can instantly book their ideal accommodation quickly and easily with a click of a button.
My Role
Collaboration with product managers and engineers to come up with solutions to improve the overall conversion rate & reduce booking cancellations.
My Goals
- Business Goals
• Overall conversion improvement.
• Reduce drop-offs from Homepage to Booking payment
• Reduce the booking cancellations. - User Goals
• Find the perfect vacation rentals for holidays.
• Find it with as little effort as possible/minimum clicks.
• Improve decision-making of the users.
Research
Since Belvilla's launch, there are a lot of competitors in Europe who is operating on the same business model as Belvilla. To begin my research, I started to look at a few competitors or similar platforms, analyzing UI, UX, User flow, IA, and key features which make them better than Belvilla.
The Scenarios
From competitive benchmarking & interviews with the user & stakeholders, I observed a couple of scenarios by which a user starts his booking.
Scenario 1:
The user knows the dates and destination of its trip.
Scenario 2:
The user knows dates but not the destination of its trip.
Scenario 3:
The user knows the destination but not the dates of its trip.
Pain Points
After summarising the research I’ve collated the following pain points:
- UI is more sales aligned: UI is not proper which can be improved & made more user-centered aligned.
- Scattered & complex information: Improve the overall information hierarchy to group the scattered & complex information which can boost transparency & user decision making.
- High user drop-off: We have observed that the user is usually dropping from the Listing page & Payment page within 3–5 mins. This is because of the lack of visibility of deals & offers, trust markers & more friction in the user flow.
- Flow not optimized as per Scenarios: There is not a proper solution to cover the user scenarios that have been identified. It seems that the user needs to have all the information required to get a suitable result.
- Booking cancellation: There were a lot of booking cancellations because of changes in dates, Lack of clarity in amenities, deals, etc.
The Solution
1. Improved search: In the search bar, I added the option for flexible dates. So users who don’t have the exact arrival & departure date in mind can select it & the search result show the average price of the properties in the region within the date range. We also added the recent searches in the hero section by which users can continue with their search in case of a dropoff or network error.
2. Listing page: A listing page is one of the main pages where users usually do the decision-making so it is necessary to show all the required information to make it easy for the user to decide without any cognitive load. To improve that, first I began with improving the overall information hierarchy in the property detail card. I started with Prioritizing the things which are crucial for the user in selecting a property. I created a couple of iteration with the option of multiple images, Highlighting the amenities, & unique value props like Nearby beach, etc. & tested them out with the users. While doing so I observed an offer is also one of the factors which impact decision-making. When a user is getting the feeling that he’s getting his value for money & best price possible, it is most likely to convert & book that property. So I decided to highlight the offers as well & created multiple states for the Property cards.
3. Enhanced map view with filters: When the user books a vacation home, places nearby play an important role to make the decision. Initially, the map view widget was not prominent on the listing page, so very fewer users were clicking on it. I started iterating on it & come up with a few options. After discussing it with the stakeholders we took the call to change it.
Once we were clear on the map view entry point, I began to notice a few issues with the map view.
- The information shown in the map view is not enough for the user to make the decision.
- The map view was taking 80% real state of the screen making it hard to browse properties in the area.
- The position of the filters was not prominent & categories are not properly aligned.
To resolve the issues, I suggested a few changes like:
- Reduce map real state: I decreased the map real estate & showed a list of properties on the side: We are also highlighting the property in the Lister when the user selects a property in the map.
- Improved & floating filters: To improve the filter & made them accessible to the user, I showed popular filters like Property types, amenities & price at the front & move all the less usable filters in the More filters & when taps on the more filter, all the filters open up in a floating sidebar.
- Property detail card: I also redesigned the Property detail card in sync with the Listing page’s Property detail card highlighting the amenities, Prices, and ratings.
4. Booking review & Payment page: Next, we observed a huge dropoff on the Payment page. These are the problems we were facing:
- Conversion of payment mode selection page was 57%: i.e If 100 users land on this page after making a reservation only 57 used to click on payment methods to initiate a payment transaction.
- 3rd party page redirection for CC users — 50%+ of the user base (i.e cc users) was redirected to a 3rd party page hosted by our PSP to enter credit card details for a payment
- High cognitive load because of excess information
Extra UI elements not helping the user such as a navigation path (breadcrumbs) at the top - The objective of the page was not coming out clearly because of the header and information display
Key Principles
After looking at the problem statement, opportunity via the competitive lens, I re-designed our payments page with the below key principles :
- Quick — Seamless flow, fewer decision-making points, Easy user inputs
- Mobile-first — 55%+ of our users are on a mobile
- Personalized — Highlight methods that the user is more likely to use
- Establish trust, security — User should feel that the payment process is secure and safe with Belvilla
- Minimize 3rd party hops — Take as many details from the user on our UI
Competitive Benchmarking
We analyzed competitors such as Booking, Airbnb, Homeaway, Novasol, and Dancenter and also benchmarked the checkout journey with our product last year and arrived at the following conclusions:
- Remove house rules section as it is shown on the PDP page
- Place booking details and price breakup neatly for a user to review booking details before making a decision
- Clear segregation between Reviewing booking details and user form
The Reflections
It all started from one small PRD & some older designs. I have gained valuable experience in drawing a clear idea out of the unknown and nailing down specifics of what the clients needed the most. I am an avid believer in evidence-based design. This project taught me tangible, actionable, and inspiring ways to achieve this with comparative audits, design workshops, and concept testing.
This project was a collaborative design process with the Design Manager, Product Manager & Product Head. I enjoyed seeing how we integrated our research insights into the design process and achieved evidence-based design.
