Treebo App Redesign — Our journey towards delight

Treebo’s guiding principle is to provide desirable stays at affordable rates. While our existing app allowed users to make bookings, it was very mechanical. It was only about getting from point A to point B. But it’s not always about getting to the destination, is it? It’s also the journey that matters.

Those little memories you create, those people you meet & interact with, that is what makes a journey more memorable. Those tiny delight factors that put a smile on your face, that’s what the journey is all about. We want Treebo to be a part of your beautiful journey, a memory you cherish & remember every time you take a trip.

 

How we redesigned our app

When we began this journey, we laid down a few design principles that would serve as the foundation for everything we build in future.

  • Ease of use: Human mind has this beautiful ability to break down complex objects to the simplest form possible to perceive faster and better. Then, why complicate things in the first place?! Question the need for every element on the app’s screen.
  • White Space : How do you create a balanced space, a space free of unwanted clutter? Playing with white space allows you to create this bold & high impact design. More importantly, it gives the app enough air to breathe!
  • Hierarchy & Proximity: Proximity with white space creates a beautiful grouping without having to add any other visual element. On the other hand, hierarchy tells the users exactly what to focus on first and guides them through the rest of the flow.
  • Scalability: While we create a consistency in design by using these principles, we also need to make sure that it follows the principle of scalability.

Re-imagining the flow meant breaking down the existing app, taking a step back to see what has or has not worked for us, and what can we do to make it better.

When it comes to app redesign, sometimes taking a step backward can be the quickest way forward!
 

Search Flow

Previous Version: We took multiple inputs from our guests before displaying the search results. (Overall, a four-click search process). While it’s a good practice to know user preferences, we realized most of our bookings were for the same day from their current location.

Current Version: While we originally asked you for multiple details like destination, check-in & check-out dates, we now pre-fill them for you. Change any of these preferences, we continue showing the results based on the changes. (Voila! a single page, single click search).

 Redesigned Search Flow

Redesigned Search Flow

For guests interested in staying in our popular destinations (defined based on the number of searches on individual locality), we have also introduced a popular destination section on our home page.

 

Search Results

Previous Version: We noticed a lot of back & forth activities between the search results and the hotel details page. On investigating further, we realized the users were looking for the hotel images — an important decision making factor when booking hotels. The users were going to details page, checking out the images and then, going back to search results.

Current Version: We now display all the images on the search results page itself. This helps you take an informed decision before proceeding to view hotel details.

 Search Results

Search Results

 

Image Gallery

Previous Version: We did not have a dedicated gallery for images. Since we did not have any prior data to work on, we interviewed users to see how they interacted with the images in our existing app. At the same time, we also asked them which other apps they remember using recently that had an engaging gallery interaction.

A predominant answer was Facebook. When comparing all other existing apps with image galleries, we realized one simple thing. It’s much easier to scroll vertically to browse all images rather than to click through one image at a time, especially when you have an average of 6 images per Treebo property.

Current Version: Along with the vertical scroll feature, we introduced tags to indicate which image belonged to which room and category. This way, guests can get a better idea of how the entire room will come together. There is also a full blown gallery, if you wish to take a closer look at the properties.

 Redesigned Image Gallery

Redesigned Image Gallery

 

Checkout Flow

Previous Version: In order to checkout when using the old app, the user had to go through 4 steps. When trying to break down the flow from the users point of view and from ours, we realized every element on the page was important and indispensable. We had to find another way to make this process easier for the user without weeding out any of the elements.

Current Version: Since we couldn’t eliminate the steps, we decided to give the users an illusion of being on the same page so it doesn’t feel like a long process. Multiple iterations & prototypes later, we realized keeping few key elements of the page constant made users believe they are still on the same page. We also made the whole page short and crisp. Payment is a breeze. All the options are available upfront, you can select any one and and then, checkout from the same page.

 Redesigned Checkout Flow

Redesigned Checkout Flow

 

Life after redesign

With the new design now live, we believe it reflects truly upon the principles we set in the beginning for ourselves. Our journey definitely does not end here though, we are here to innovate and reinvent — continuously.

We now focus on the principle of scalability. Why?

When multiple designers work on new features on various platforms for the same app, we often end up with varied experiences. Our aim is to have a design system in place, a global swatch available to all our designers.

My next blog will be about our unified design system and its building experience for Design & Tech

Thank you!

 
A massive shout out to Abhishek, Aditya, Ankit, Bonie, Lakshya, Rahul Das, Ram, Ribin, Amitakhya, Pragya, Rohan, Santhosh, Sruthi Shivakumar & Varun who helped make this happen.