An attempt to reduce the session length and impact conversions of Treebo app
My story of how I used my product design skills to build a feature in under 48 hours that will reduce the session length of a popular hotel booking app
Introduction
As a budding product designer, I have been curious to know how product decisions are made and how design impacts businesses. In the last two weekends, I had not one but two opportunities to explore product design and its impact on businesses. This is a case study about one of the two 48-hour product design challenges where I designed a new feature inside a popular hotel booking app, Treebo.
Context
This product design challenge was an individual project with group participation. Didn’t you understand? Please allow me to explain. There were 25 teams in total, with each team consisting of 8–10 people on average. Each team was assigned one product from the hospitality industry to work on; my team was assigned Treebo. Each member of our team, however, worked on a different feature to implement in Treebo. We had to select which features we wanted to work on from a list of options, and I chose to work on the hotel comparison feature. I’ll talk more about the story of my choosing this problem statement in the process part.
Problem statement
Add a feature in Treebo that allows users to compare different hotels based on photos and reviews by adding them to a comparison list.
Core Idea
Hotel comparison is a feature that allows users to easily compare the prices and amenities of different hotels in a particular location on a particular date. The tool will display the information in an easy-to-read format, allowing users to quickly make an informed decision about which hotel to book.
Business impact
The Hotel Comparison feature has the potential to increase bookings for Treebo by making the booking process faster and easier for users. It will also help in reducing the session length to make a decision as users won’t have to go back and forth to find a hotel that meets their needs, thus helping in conversions.
How will it be helpful for the user?
Hotel comparison saves users time and effort by allowing them to quickly and easily compare the prices and amenities of different hotels in a particular location on a particular date. It also helps users make informed decisions about which hotel to book by presenting the information in an easy-to-read format.
Solution
Users have to go back and forth in the current flow, checking out one hotel and then checking out another, and it’s difficult to retain previous information while viewing new information, so the comparison takes some time to find a hotel that users want to book. The proposed solution flow addresses this issue, making users’ lives easier by allowing them to easily compare two hotels, and business gets impacted as the session length is reduced, impacting conversions.
My solution consists of a hotel comparison recommendation widget in the hotel details page, where users will get a bunch of hotels that can be booked in the particular area that they are interested in. Users can choose any hotel from the horizontally scrollable cards to compare to the hotel they are currently viewing.
The second screen is the hotel comparison screen, where the selected hotels are compared based on various aspects of the hotels, such as price, reviews, amenities, available room types, and so on, so that users can easily and efficiently decide which hotel to book, reducing session length and impacting conversions.
- Compare cards:
Users can see the details of the hotels, such as hotel name, location, price, reviews, etc., in the card, which is necessary for them to make a decision to compare hotels.
2. Hotels Overview:
The same details of two hotels follow on the comparison page as "hotel overview." This changes to a fixed bar, which just shows the name of the hotel and price after scrolling one fold, so users always know what hotels are being compared.
3. Accordions:
The accordions are added in each section for flexibility and efficiency of use so that users can easily open any and directly jump to the section.
4. Amenities section:
The amenities section compares different amenities that are provided by the hotels, which can be a good deciding factor if they are looking for any amenities in particular. The amenities that are not available have a slightly lower contrast, which signifies their unavailability.
5. Reviews section:
The reviews section compares different aspects of the hotel, such as location, food, staff help, cleanliness, hygiene, etc., so that the user also gets an understanding of the hotel in depth.
6. Rooms section:
The Rooms section shows different kinds of rooms available in the hotel with their specifications, such as type of room and size of room, which is useful to make a decision.
7. Nearby places and landmarks:
Nearby places and landmarks were inspired by the Treebo app itself, as they mention it in the about section of the hotel page, and it can also be clearly seen on the Treebo website as well, so I thought it would be a good addition and also helpful for the users.
8. Call-to-action buttons:
Call-to-action buttons are added to the comparison screen so that users don’t have to get back to the hotels page if they decide to book a particular hotel. They can continue the booking flow from the comparison screen itself.
My process
Company research and problem statement
The first step of this challenge was to select the problem statement I wanted to work on from a list. For that, I decided to do some research about the company and how it operates. Upon my research, I found out that Treebo is an Indian budget hotel chain that operates on a franchising model. It has its own categorization of hotels, which are divided into 3 categories: Itsy (economy), Trend (standard), and Tryst (premium). Upon finding this out, the initial thought was that, as there is already categorization inside Treebo, a hotel comparison might not make sense.
But I decided to dig deep into it and research a bit more about the different categories of hotels and if the same category hotels have similar services they offer, such as amenities. During my research, I discovered that even though two hotels are in the same category, there are differences in price, rating, and amenities provided.
One more point that I took into consideration after discussing it with my group is the number of hotels in a particular area. What if there are only a handful of hotels in a particular area? In that case, users still have to go back and forth to check all the details offered by one hotel and mentally compare it with other hotels, and I also considered the fact that the company might expand its franchises in the near future. So that’s how I came to the conclusion that this problem statement is valid for Treebo, and I decided to go ahead with it.
Competitor Reseach
After I chose my problem statement to work on, I decided to see what some competitors were doing. I checked out Trivago, Make My Trip, etc. I also looked at some indirect competitors to get an idea of the current patterns of comparison.
Ideation and wireframes
After checking out some competitors and seeing some patterns, I started to get some clarity on how this flow could possibly work.
I wrote down the flow and started ideating using a pen and paper, how screens could function and look.
User flow: home>search>Search listing page>hotel details page> Compare>Compare Screen
Using this flow I had to create the initial point of flow in the hotel details page, with the help of which users can initiate the comparison between two hotels and the comparison screen where two hotels' facilities and services are being compared. I created some rough sketches to visualize how things might work.
UI Design
As we were all supposed to work on the same product, things like primary color, secondary color, text styles, icons, and common components such as buttons and navigation bars were created and shared with the team so that it maintained team and product consistency. We, as a group, identified colors and text hierarchy and created the common components. It was fun! Now that the atoms and molecules for our UI were ready, we all individually started creating our own UI designs.
Screen 1: Hotel details page
The first screen is the hotel details page, where users can initiate the comparison process. But why the hotel details page? A common user behavior for booking hotels is that the user has a particular place and details in mind while searching, so if the user finds a hotel interesting, then it makes sense to show similar hotels in that area for comparison. This way, the comparison feature adds to the flow by trying to make the decision-making process for the user quick and easy rather than asking them to choose one hotel, then another, on some other page, which creates a new flow in itself.
So in the hotel details page, I added a compare button with a dropdown. I kept this button as a secondary button as the primary action to be performed in the hotel details screen is to book the hotel. I decided to keep the compare button at the top for better discoverability of this feature. I later made some changes to it after I did my usability testing, where my assumptions were challenged.
After clicking the compare button, a hotel recommendation widget appears, displaying a list of hotels in the surrounding area. Here, hotels are displayed in card format, which has all the necessary details about the hotels such as name, price, image, rating, and location. Users can scroll horizontally to see different hotels, select one using the radio button, and tap on "compare" to go to the compare screen. Some changes were made to this interaction as well after usability testing.
Screen 2: Comparison screen
After tapping on compare, users get to the comparison screen where they get an overview comparison at first and then a section-wise comparison such as amenities, ratings, room types available, and nearby places and landmarks. As mentioned above, the accordions are added in each section for flexibility and efficiency of use so that users can easily open any section and directly jump to it. Section wise explanation has been provided in the solution part.
Usability Testing
As the screens were ready, I added them inside the flow, but due to time constraints, I was not able to prototype the feature for usability testing. But I made use of what I had, which were my screens, so I decided to conduct comprehension-based usability testing. This entailed displaying the screens to users and asking them to explain their interpretation of what they saw. As I was designing based on some recognized patterns and my assumptions, I wanted to see if users understood what the feature was about and validate or challenge my assumptions.
Here is some feedback I received from my users.
Screen 1-Hotel Details Page
✅ The compare button was easily discoverable, and users also understood the context of that button, as it would be used to compare this hotel with another hotel.
✅ The hotel recommendation widget was also understood by the users, as they knew it could be scrolled.
⚠️ However, one comment about the compare button was that users have just landed on the details page and they want to first see what the current hotel has to offer rather than just start comparing it with other hotels.
⚠️ The interaction of selecting a hotel was a bit difficult, so it needed improvement.
Screen 2
✅ The comparison screen was understood, as well as the sections with accordions. They predicted the right behavior it would exhibit.
⚠️ They seemed to not know what to do after the compare screen, as there was no call to action on that screen to continue the flow.
⚠️ The differentiation of each section was not understood, as I observed users having a hard time identifying the sections endings and starting points.
Changes made after usability testing
As testing revealed that users who open a hotel details page first want to see what the current hotel has to offer before deciding whether or not to compare, the compare section was moved to the bottom of the page, which also made sense in the flow of checking the details of a hotel, as users have scrolled all the way down, which does mean that they are somehow not satisfied with the current hotel and want to see what more similar options are available.
The radio button from the card was removed as it wasn’t noticeable, and a compare button was added beneath each card for ease of understanding the interaction.
Call-to-action buttons were added to the bottom as fixed bars, allowing users to book the hotel they desired directly from the compare screen rather than breaking the flow by going back and booking.
Gaps were introduced in each section for ease of understanding.
Figma File link: https://www.figma.com/file/fPJkCJbbBuqFZbQDScZXl4/Piy---Product-Design-Challenge?node-id=42%3A23772&t=7lFOvpuXJSWGlCGQ-1
Future Scope
As it was a 48-hour challenge, if given more time, I would have added these features.
- After comparison, users can remove one of the hotels being compared and add any other hotel from a list.
- Explore the option of adding multiple hotels to the compare list.
- Let the users select and change the no. of guests and dates in the comparison page as well.
Key learnings
- I learnt to find a way to go from ambiguity to clarity.
- I learnt to prioritize problems to work on when given a limited period of time.
- I learnt to conduct usability testing and ask feedback on the designs by keeping a right approach.
This concludes my 48-hour product design challenge. A very big thank you to Anudeep Ayyagari and all the volunteers who made this challenge possible.
Thank you for reading 🤝. If you liked my case study then you can let me know by giving some claps 👏 or by commenting 💬
Also do let me know if you didn’t like anything or if anything could be improved, or just any general feedback for me is very much welcomed 📭
You can connect with me on Twitter, or Linked-in, or you can mail me at piyushux@gmail.com for work-related opportunities. Thank you :)
