Sharing is caring!

Belvilla: a case study

Ritesh Malviya

A journey to design a radically better experience for booking a Hotel for a Holiday trip (Platform: Web and Mweb) — Series 1 of 2

Belvilla — A Part of OYO Vacation Homes, has grown from a small Dutch start-up to one of the largest travel companies in the Europe. Belvilla is the online market for accommodation rentals, such as holiday homes, holiday parks and hotels.

The portfolio of accommodations consists of more than 25,000 holiday homes in 21 European countries.

The acquisition marks the first big international investment by India-based OYO and puts it feet first in the Europe marketplace for private accommodation.

My Role

Gathering and evaluating user requirements, in collaboration with product managers and engineers. Illustrating design ideas using storyboards, process flows and sitemaps.

Duration(Design Sprint)

3 weeks

Despite its continued success and growth, there is a gap when it comes to planning and booking vacations rentals by groups, family or individuals. Therefore, it was required to tackle this pain point and design a solution to the following prompt:

Business Goals

  • Overall conversion improvement.
  • Reduce drop offs from Listing page to Make Booking page.
  • Educating users about various vacation rentals

User Goals

  • Find the perfect vacation rentals for holidays.
  • Find it with as less effort as possible/minimum clicks.
  • Know that I have got the best deal.

In a nutshell, current methods were in all… poor. So I got work to do.

The first 10 months results are outstanding. I’ll detail out our final outcome, what went well that saw us the growth, the challenges and the lessons.

Result observed under A/B experiment

To start, I defined a process that was easy to stick — “Infinite Design Loop” as follows:

The next step was to understand travelers’ pain points 😭. I reached out to our existing users, worked with available data and researched already available sources;

Adopting both qualitative and quantitative methods to get to the root of every problem in the picture. Finally, I defined them up in three main points:

The main problems that I was solving for.

Digging in deeper…

Step 1 : User Persona

Going further through the research, I identified 4 personas which have different needs and different goals. This data will be useful to improve the user experience for each one of them.

Data acquired from online research and users interviews (sample of 10 users)

Data acquired from online research and users interviews (sample of 10 users)

Data acquired from online research and users interviews (sample of 10 users)

Step 2 : User Reviews & Interviews

I reached out good hints from users reviews which have not highlighted relevant issues about usability or functionalities. I’ve categorized the complaints in 4 categories:

  1. Interface Complexity
  2. App Bug
  3. Hotel Quality
  4. Price

Data acquired from online research and users interviews (sample of 10 users)

Step 3: Competitor Analysis

I wanted to begin my analysis by looking at direct and indirect competitors of Belvilla, specifically Booking.com, Agoda, Homeaway and Airbnb.

I chose these companies because their products each had different motives and points of view, while still being in the same general category.

With my insights, I knew we needed to be; as easy and informative like Booking.com and trustworthy like Airbnb; best of both worlds.

Pain points

Summarizing the research I’ve discussed, I have develop the following considerations:

  • There is not a proper solution to cover the scenarios that have been identified. It seems that the user needs to have all the information required to get a suitable result.
  • There are not functionalities to improve the user experience considering each persona identified.
  • UI could be improved, well designed products are more likely to be used.
  • There are issues related to the booking cancellation and to reaching out the hosts.

I came up with a set of design principles to admit: Adaptive, Simple,

Intuitive and Smart.

Sketches

Normally around this time, many design ideas start floating around my mind. I find that sketching everything out and writing notes is the best way to organize my thoughts.

The first Sketch

Wireframe/Mockups

I started by wireframing all of my sketches, even the ones I was unsure about. I then started playing around with card shapes and sizes, iconography, placements, and other page elements.

Due to time constrains I had to jump to the High­-Fidelity Wireframes. As such, they typically contain elements that are intended to accurately represent the final product.

Design System

A simple and convenient combination of colors helps to focus on the content. High-quality design helps make using the application more simple. Crafting separate components makes both the implementation and support phase work more comfortable.

Let’s start with the solutions

Starting from the pain point, I tried to find solutions to solve them and introduce new features overall to improve the user experience.

Home page

Overall. I’ve completely changed the current Homepage. The search process has been made simpler.

  • Trying to avoid too much information required to get a result in the first instance.
  • Covering scenarios when users are not sure about their travel dates or Pax.

Search Results

The Search results page shows many overall changes to improve the usability:

  • Bringing social elements in will help to build trust across users.
  • Map view : Users get a view of all available properties in a given geographical area, location or a city. This is important with respect to Neighborhood, Commute and Directions.
  • Price can be viewed as Total or Per night depending on users interest.

Hotel Details Page

This is one of the most critical stages of the booking process. I’ve designed this in such a way that it accomplishes both users and business goals. The property details page consist the following:

  • Big image banner : Users want to see detail. It’s a part of the decision making whether to book or not.
  • Clear presentation of information : Presenting this detail without cluttering the page or making it difficult to scan and understand is important.
  • Social proof and Urgency elements.
  • Neighborhood guides : Useful for visitors unfamiliar with a particular destination.

Make Booking

The major UX change that I did was to break the whole booking process into two simple step :

  1. Fill the required information
  2. Payment

In most cases users are not required to make payment for confirmation. This is one delight to the customers. They can always make payment later depends upon PPV (A Payment Page Version).

  • There are reminders of total cost, while errors are flagged immediately and field requiring attention are highlighted clearly.
  • House Rules has been specified again to avoid any misinformation.
  • Friction Element : It appears when users reach to close button or another tab of the browser screen to keep them engaged on the same page. An estimated impact would be 0.30% conversion uplift.
  • Auto Signup : As soon as user enter his details an account is created for future access.

Booking Confirmation

The booking confirmation page consists of the following information : Hotel Name, Address, Directions, Hotel Policies, FAQs, Amount summary etc.

Prototype

I built a simplified prototype which shows the resulting concept in action. Enjoy!

Hotel Booking Journey

The complete design flow and design system was delivered within 3 weeks to the developers. It took around 3 months to get it developed and live on the web.

An amazing user experience can only be provided by an iterative Design process.

All major stakeholders in the company contribute in the process by performing their tasks and duties. This is the only way you we retain our existing users and attract the new ones in this competitive world.

Measuring success of proposed solutions…

1. Qualitative

The website was rolled out in beta mode for a select number of accounts. Feedback would be gathered to understand how these features are used and what the pain points are for future iterations.

2. Quantitative

  • Percentage of user accounts.
  • Percentage of conversions from Home to Confirmation page.
  • Changes in metrics including drop-offs, Sessions, Revenue and Number of users.

Next Steps

  • Develop the ‘Compare and My Favourite’ sections.
  • Add animations to make the experience more soothing and fun.
  • Bringing a loyalty program for frequent users.

What I learned

Working with a real company that already has good impressions among the travelers was a challenge. I tried and understood the vision of the stockholders and turned it into a reality, based on the requirements and goals they had for the product. It required much more collaboration, discussion, and give and take during the design process.

The main challenge for me was to collaborate with various stockholders, developers and end users across all of Europe and in India.


End note

We prioritized our requirements and validated our decisions. Along with it few decisions were derived based upon product and stakeholders collective experience. We have further planned deep analysis and user testing to validate decisions that are in funnel.


Thank you for reading! Hopeful you enjoyed this case study. If you have any feedback, I’d like to hear from you.

Simply reply on this blog or reach out to me:

Say hello at [email protected] or connect on LinkedIn / Dribbble.

Read More