ZEN Rooms

Redesigning the hotel details page

Hemali Tanna
Hemali Tanna Portfolio
4 min readJul 5, 2021

--

Background

ZEN Rooms is South East Asia’s leading budget hotel booking platform with over 1000 hotel partners in 7 countries. The site gets 300K visitors a month.

My role:
Research, Design (UX/UI), Prototyping, Testing

Team:
Myself, Product Manager

Problem statement and Goals

After steady growth for 1.5 years ZEN Rooms faced stagnating site conversion rates with key bottlenecks in the user flow, in particular the hotel details page which showed the biggest drop off. ZEN Rooms decided to re-design of the user flow with the following goals.

  1. Improve site conversion rate
  2. Improve overall user satisfaction with the site

Approach I followed

  1. Understand key issues in user journey
  2. Design & validate new user flow and interface
  3. Setup goals and framework to monitor improvement

This is the final design. In this post, I will describe how I arrived at this design.

1. Understand key issues in user journey

1a .Collect user feedback through interviews and survey

We interviewed four users in person, with a mix of people who had used the Zen rooms app before, and new first time users. Following are the insights from our interviews.

1b. Understand extent of bottlenecks in current user journey using Google Analytics Funnel Analysis

Google analytics Funnel analysis clearly shows that the biggest traffic loss is happening on the Hotel Details Page, across all platforms, mobile and web.

Google Analytics Funnel

1c. Hotel details page usage patterns using heatmap insights from Hotjar

1d. Benchmark against best practices from competitor apps

I studied several successful hotel booking apps, such as Booking.com, Agoda, Airbnb, Hotel Tonight, Trivago, Yarta, Oyo Rooms, Make my Trip etc. I noted which features stood out in each app, what design practices are most commonly followed and what elements worked best in alignment to what we desired to build.

2.Design & Validate new user flow and interface

2a. Ideation and wireframes

I designed several layouts and wireframes and discussed the merits and demerits of the different alternatives with Zen Rooms product manager, their CEO and their team. We finalized a few designs and built prototypes, which we tested with a few internal users.

2b. High fidelity prototypes

2c. User feedback on designs

The users we interviewed were asked to compare their experience with the old app vs the mobile prototype.

  • 100% of the users voted they liked the new app better.
  • Users informed us that absence of too much clutter helped guide their sight to what they were searching for.
  • Users were shown the same hotel in the old app vs the new one, and all of them conceded they would be more likely to book rooms with the new design. Reasons given were, the images and visuals of the hotel in the new app looked appealing.
  • 2 out of 6 users did comment that they expected to find a promotional discount on the front page of the hotel app, vs the bottom of the page.

3. Setup goals and framework to monitor improvement

After the designs were finalized and the full handover was done with the engineering team, I developed the KPIs to track to ensure that the progress was made towards the goals of the redesign Key KPIs identified to be tracked.

  • Site conversion rate improvement by 50% : Source Google analytics (weekly)
  • Hotel detail page drop off rate reduced by 40% : Source Google analytics Funnel report (monthly)
  • Validation of user engagement on the site with hotjar and other user testing tools (monthly)
  • Continuous A/B testing for aspects of the design that needed further optimization (ongoing)

--

--