An effort to increase the Revenue and Conversion rates of Treebo — A 48 hours Product Design Challenge
What happens when 180+ UX design students participate in a 48-hour design challenge — Lots of Chaos, right???
NO!!! LOTS OF CLARITY. Confused?
Let me tell you the story of how I went from chaos to clarity in 48 hours through this case study.
Recently, I participated in a 48-hour Product design challenge organized by Anudeep Ayyagari, where 180+ UX design students were put into groups of 10–12 people. And each group has been given a product and each member has to work on a different feature of the product.
Sneak Peak : 🤫
This is what I have made by the end of 48 hours.
(Pro tip: Watch it in full screen.)
The Intro
I was part of an 11 member group where we were given Treebo Hotels mobile app as the product to work on.
Product
Treebo Hotels , founded in 2015, is an Indian budget hotel chain that operates on a franchising model. Treebo derives its name from “Bo Tree”, the fig tree under which Gautam Buddha attained enlightenment. The fig tree family — banyan, peepal among others — has inspired not just our name but also what we do.
The Treebo app allows customers to book rooms at Treebo hotels and also offers other features such as real-time room availability, rate information, hotel details, and the ability to manage bookings.
Problem Statement
“Add a feature to compare Price, Itinerary, and Reviews of travel packages”
Core Idea of the Feature : The core idea of this feature is to provide users with a way to compare prices, itineraries, and reviews of different travel packages for a desired location. This will allow users to make informed decisions about which package to select for their travels.
Why I selected this Problem Statement
- As a regular traveler, I usually check out different websites to get best deals on tours.
- In this 48 hours every minute is valuable, as I already have an idea of the competitor websites, I have an advantage here.
- Additionally, because I frequently travel, it would be easier for me to make assumptions about what information is crucial for the user and should be included on the screens.
The Chaos
The Treebo app doesn’t provide any travel packages, so there is no feature for comparing the travel packages. So I have to first work on designing a travel package screen and then continue to work on designing the Itinerary comparison page.
As this is my first time working on any digital product, it was challenging for me to completely design two features in 48 hours.
👉Since I only had 48 hours to do the entire design, I skipped the Primary Research and instead focused on Secondary Research.
Secondary Research
What did I do : I conducted a Competitor Analysis by looking at different apps and websites which has different types travel packages based on a selected location.
Why did I do : To familiarize myself with the approach used by different apps and websites to provide their travel packages.
Which Apps/Websites did I Research:
Direct Competitors:
1. Wander On
2. MakeMyTrip
3. Travel Triangle
4. Just Wravel
5. Airbnb
Indirect Competitors:
👉As, I couldn’t find any travel booking apps which compares the Itineraries of travel packages. So, I conducted the competitor analysis for comparisons on -
1. CarDheko
2. Carwaale
As I was doing the Competitor Analysis, I started to understand how I can present and what details should be presented on the screens.
The Clarity
After doing the Secondary Research, I collected all of my findings and began to list my assumptions.
Assumptions
With the insights I got from the secondary research, these are the assumptions I made :
The user wishes to SEE the following details in a Travel Package :
1. Pricing
2. Duration of the package
3. Destination
4. Type of the room
5. Major Attractions of the tour
6. Day-wise Itinerary
7. Ratings and Reviews
8. Inclusions and Exclusions
The user wishes to DO the following while looking for a Travel Package :
1. Compare different travel packages
2. Be able to select and change the following
a. Start Date
b. Duration
c. No. of guests
d. Room type
How will it help the users :
- By providing users with an easy way to compare prices, itineraries, and reviews, this feature helps users save time and money by ensuring that they are booking the best package for their needs.
- It also helps users feel more confident in their booking decisions, as they will have more information to go on when making their choice.
- The package comparison feature eliminates the need for customers to manually compare different packages by visiting multiple pages or websites. This can save customers a significant amount of time and effort.
- Reviews of other travelers can help customers to get a better idea of the package they are choosing, which will help them to make a better decision.
How will it Impact the Business:
1.Increased conversion rates:
By making it easier for customers to compare different travel packages and make informed decisions, the package comparison feature is expected to increase the likelihood of customers completing a booking. This can result in a higher conversion rate for the company.
2. Increased revenue:
As customers will be more likely to book a package that meets their specific needs and preferences, the package comparison feature can lead to increased revenue for the company.
3. Competitive advantage:
By offering a comparison feature, the travel app can differentiate itself from competitors and provide a unique value proposition to users. This can help the business gain a competitive advantage in the market.
4. User retention:
The comparison feature can help users to plan their trip and make a decision, this can encourage them to come back to the app for future bookings and increase user retention.
5. Increased customer loyalty:
By providing a user-friendly and efficient way to compare travel packages, the package comparison feature can increase customer loyalty. Customers who feel that a company understands and caters to their needs are more likely to remain loyal to the brand.
6. Improved customer satisfaction:
By providing a comprehensive view of all relevant information, the package comparison feature can improve customer satisfaction. Customers who feel that they have made an informed decision are more likely to be satisfied with their purchase.
The Design
With the clarity I got from the research and the assumptions I made, I started Ideating the solutions.
Ideation
- Create a travel package page, where user can see all the necessary details of a package like pricing, duration, destination, type of the room, major Attractions, day-wise Itinerary, ratings, inclusions and exclusions.
- In the travel package page, the user should be able select and edit the start date, duration, no. of guests and room type which will change the details of the package dynamically.
- Create a comparison page, where user can see a side by side comparison of two packages which they select.
User Flow
The flow starts from the Home page where user selects a package, navigates to Travel Package page, where user look at various details of a particular travel package and can select any other travel package to compare with the existing package. Thus navigating to Itinerary Comparison page, where user can see and compare selected packages side by side.
Home Page → Travel Package Details Page → Itinerary Comparison Page
Low fidelity wireframes
To get more clarity on how I can present the details on the screen, I started drawing the wireframes on paper.
Below are my exquisite art work. 🤌
Designing the UI screens — The Beginning
As I am designing a new feature for Treebo app, I have used their existing colors, type faces and the font styles.
Screen — 1: The Travel Package page
At the top of the travel package page, I have given an Image showcasing the destination and a Title in big letters to let the users know that it is the name of the package they are looking at.
I have added all the necessary details on the page based on the assumptions I have made before.
Below are some the sections I designed and reasons behind taking those design decisions.
- Compare Button: Upon clicking this “Compare button”, a dropdown of similar packages will be visible to the users.
I have used the secondary color of the Treebo app to create this “Compare” button as do not want the catch the attention of the users as this is not our primary CTA.
2. Drop-downs : I have added 4 drop-downs, so that the user can select the options — No. of guests, Starting Date, Duration, Room type based on their requirement.
Here, I have added a stroke with the secondary color around each drop down to let the users know they are editable.
Also I have shown the details of the current selection inside each dropdown menu to let users know their current selections.
And above each dropdown menu, I have given a label to let the users know what each dropdown menu is related to.
Also, I have given a small font size to the labels so that the user can focus on the current selected details inside the dropdown menu.
3. Description Section: In this is the section, user will get an overview of the whole package.
I have added a ‘Read more’ text button to this section. And had given secondary color to it to let the users know it is clickable.
As the Description section is very text heavy, I didn’t want the users to feel overwhelmed. So I have truncated the text and added the ‘Read more’ button so that user can click on it and continue reading if necessary.
4. Day-wise Itinerary Section : This is the most important section of the travel package page as the user will get to know the day wise planning for their whole trip.
I have made each day into an accordion and by default each accordion would be closed.
- So that the user can get to know how many days the package is at a single glance.
- Also, there would be a lot of text for each day, showing all the details of all days at the same time will be overwhelming to the users.
I have used the primary color here to emphasize to the users that, this is the section where they will get to know about all the day wise activities they will do through out the trip.
5. Hotels: In this section, the user can see the hotels in which they are going to stay each day of their trip.
I have presented each hotel as card with the necessary details for the user to know the type of room they are gonna stay in, the location of the hotel and so on.
I have made a horizontal carousel of these cards so that the user can see all the hotels by scrolling in a single section.
6. Book Now Button: Upon clicking this button, the user will be navigated to payments.
This is the CTA for this page, which is important to the users as well as the business for making the bookings.
I have used the primary color of the Treebo, to emphasize that “Book Now” button is the CTA.
I have made it a floating action button (FAB), so that user can click on it and book the package at any time while he is on the page.
I have added the Price on the button itself, so that it would be easier for the user to look at the price through out the page as the button would be floating.
7. Similar Packages: This section is shown when the user clicks on the “Compare” button.
I have made this section as a dropdown from the compare button, as the users doesn’t have any need of these options unless they want to compare.
I have made each package as a card with necessary details and price, to give users a better understanding of the packages.
I have added a radio button on each package card, to limit user to select only one package to compare.
Once the user has selected their desired package to be compared, the Compare button will be enabled.
Screen — 2 : The Itinerary Comparison Page
Itinerary Comparison page is the heart of this particular flow, as this page lets the users make informed decisions and let them feel satisfied with the purchases they make.
Here I have divided the whole screen into two parts vertically, where each side is presented with the details of the packages selected by the user.
This side by side representation would be easier for the users to look at and compare the details.
I further made every section into an accordion, so that user gets to expand their desired section to compare and collapse the remaining.
By using this accordions, I am giving freedom to the users to look at the sections and details they want to look at.
- Package Details Cards: This section is where users get to compare the basic details of the selected packages.
In each card, I have added the title, image, price and necessary details like no. of guests, type of room, duration, location and ratings of the travel package.
I have included the above details in the card such that the users can get to know the basic details of the package at a single glance and can compare them side by side.
2. Day-wise Itinerary : In this section, the users get to compare the day-wise itinerary of the selected packages.
To maintain a consistency through out the app, I have reused the accordion components which I have made for the Travel Package page.
By using those components, I made the day-wise accordions look and work exactly the same as they did in Travel Package page.
3. Hotels: In this section, the user gets to compare the hotels in which the will stay for the selected packages.
This was the most tricky part for me, in this section, I have to added two horizontal scrolls for the hotels and make them fit in the limited space.
Here, I have reused the hotel cards which I have used in the Travel Package page, scaled them down and created two horizontal scrolls.
These horizontal scrolls will be useful for the users to look at all the hotels and their details at a single place.
4. Reviews: In this section, the user gets to compare the reviews of the selected packages.
Here, I have added in-depth reviews where user can see the ratings and reviews of the different aspects of the packages they selected.
Adding this section gives the users a social proof that people has already booked this package and liked/disliked it.
This will let the users to take an informed decision and will motivate the users to purchase the package.
Usability Testing:
As I did not have a fully functional prototype, I chose to conduct comprehension-based usability testing. This involved showing users the screens and asking them to explain their understanding of what they see.
Below is the feedback I received from the users:
✅ User was able to navigate and understand all the details of the Travel Package Page.
✅ User was able to understand all the details of the Itinerary comparison and how it works.
❌ In the Travel Package page, the user wants to look at the all details of a package before comparing it. So the compare button at the top of the page doesn’t made sense to the user.
❌ In the Travel Package page, the user wants to look at the pictures of the major attractions of the package before booking it.
❌ In the Itinerary Comparison page, the user said that he doesn’t know what the current page is and how to go back to the previous page.
❌ In the Itinerary Comparison page, the user felt distracted by the lines in between the two packages and the page felt clumsy to the user.
Designing the UI screens — The Conclusion
After getting a valuable feedback from the users, I have designed the final UI by making the below changes :
Screen — 1: Home Page
As this is a new feature for Treebo, there is no discoverability to Travel Package page. So I have added a section- “Popular Packages” in the home page to let the users know about the newly added feature.
Screen — 2 : Travel Package Page
Changes made after Usability Testing:
- Removing the Compare Button: The users wanted to see all details of a package before comparing it. The compare button at the top of the page doesn’t made sense to the user. So, I have removed the compare button from the top of the page.
- Adding Images to the Major Attractions: The users are not able to make the decision just by looking at the names of the major attractions. So I have added the images for the major attractions, to let the users make decisions easier.
- Removing the line beside the Day-wise Itinerary: The users felt distracted by the line beside the day-wise Itinerary. So I have removed it in the final iteration.
- Adding a Package Carousel with a Compare button: As the users wanted to see all details of a package before comparing it with other packages. I have added a Package carousel at the bottom of the Travel package page with a Compare button. Upon clicking the “Compare” button, the user would be navigated to the Itinerary Comparison page.
Screen — 3 : Itinerary Comparison Page
Changes made after Usability Testing:
- Adding a Top Nav : The users were not able to figure out which page they were in. Also the users were not sure how to go back to the previous screen. So I have added a Top Navigation bar, with the title of the page and a back button.
- Removing the divider line : The users felt distracted with the divider line in between the two packages and the line was making the whole page look clumsy. So I have removed the line between the two packages to make the whole page look better.
Figma file :
If you want to look at my design in detail, below is the link for my Figma file.
Prototype:
If you feel like playing with my prototype, here is the link for it.
Future scope
If given more time, I would have added few more features to the design.
- In the comparison page, I will let the users select and change the no. of guests, type of room, duration, location.
- Based on the changes made by the users, the compare page will dynamically change with the new selections and new price.
Key learnings from this project:
- I have learned to prioritize the tasks as per my strengths to better manage my time.
- How to work with a team, even when you are working on an individual project.
- It’s “Designers with AI and not Designers vs AI”. I have learned how to use AI to my advantage and design better.
- In a time crunch, it’s better to go ahead with your assumptions than to be stagnant.
Thus concludes my 48 hour Product design challenge which lead me from Chaos to Clarity.
Thank you for reading till the end.
If you have liked it, please let me know what you have liked.
If you have disliked it, please let me know what you have disliked.
If you feel like I could have done better, please let me know what I could have done to make the case study better.
Please give your valuable feedback or suggestions that can help me in my next project.
You can reach me at charan.appalabatla@gmail.com
Connect with me on Linkedin
Thank you Again!!!
