An attempt to impact the business metrics by adding a “Compare hotel” feature in the OYO App within 48 hrs.
You got a 7-day holiday from the office, and now you are all set to go on a trip with your friends. You have a pet dog at home, and you can’t leave him alone.
You have a tight budget since it’s a month-end trip. You want to save money on transportation, and you want a pet-friendly hotel as well. You want to check all the amenities before finalizing your booking because your different friends have different needs.
How will you find your perfect match hotel?
Will you search hotels one by one and write on paper which hotels have which facilities and then confirm your booking?
What do you think? How much of your time will it take to just book one hotel?
Let’s make your work easy. I attempted to introduce a new “Compare hotels” feature on OYO. You can compare two hotels side by side, which will help you make an informed decision.
How have I arrived at this solution, and what process did I take to design a final UI? Let's find out in my case study 👇
Hello🖐 readers,
I recently participated in a “48-hour product design challenge” organized by our mentor, Anudeep Ayyagari.
The theme of this challenge is to work on a given travel app. It was an individual product, but we had to share resources with our team members, be it the text-style library or components. Through this challenge, we not only improve our product design abilities but also developed our teamwork and collaboration abilities.
Our team got the OYO app to work on, but each individual had to select their problem statement.
I picked “Comparing Booking and Hotels” because I often struggle with finalizing the best hotel for me on OYO. This was a pain point for me, and while working on this project, I wanted to know the perspective of other users as well. I wanted to solve the problem for them by introducing a new feature that is nonexistent in the app (we call it an exploratory project).
I find the potential of impacting the business metrics like reducing Drop off or increasing customer satisfaction and that potential made me choose this problem statement.
DEADLINE FOR THIS PROJECT
This challenge began at 0:00 on January 7, 2023, and ended at 9:00 p.m. on January 8, 2023.
INDEX
📌Let’s discuss my Problem Statement in detail
📌Let’s have a look at the existing design and redesigned screen
📌 Redesigned screen before and after the user Interview
📌 How did my ideation for a UI start?
📌 Different use cases for the flow
📌 Going from ambiguity to clarity using wireframes
📌 Have a look at how taking inspiration from competitors helped in redesigning the existing screen
📌 Have a look at what changes I made after the user interview
📌 Scope for the future improvements
📌 My Key Learning from the project
📌 Appendix
Let’s discuss my Problem Statement in detail
Problem Statement: Compare the bookings and hotels on the OYO app.
👉Context:
Oyo is a hotel booking website that allows users to book rooms at hotels around the world. Currently, no feature on the website allows users to compare different hotel bookings or hotels.
👉About OYO:
OYO is a hotel and vacation rental company that was founded in India in 2013. The company’s mission is to make quality living spaces accessible and affordable to everyone. OYO operates in over 800 cities in 80 countries, and it has over 18,000 hotels and 1 million vacation rentals in its portfolio. The company’s business model is based on aggregating and standardizing small and independent hotels, and then using technology to improve the guest experience and increase efficiency. In addition to traditional hotel rooms, OYO also offers vacation rentals, co-living spaces, and workspaces.
👉Core Idea of the Feature:
The “Compare Bookings and Hotels” feature would allow users to compare different hotel bookings or hotels side-by-side. Customers will be able to see the price, location, and amenities of each hotel option, as well as the terms and conditions of each booking option. They will also be able to see customer reviews and ratings for each option to help them make an informed decision. This will give customers a comprehensive view of their options and allow them to choose the one that best meets their needs and budget.
👉Impact on Business Metrics:
This feature has the potential to increase the number of bookings made on the Oyo website, as users will have more confidence in their booking decisions. It could also lead to an increase in customer satisfaction, as users will feel more informed and in control of their booking process.
👉How it Benefits Users:
The “Compare Bookings and Hotels” feature would make it easier for users to find the best hotel for their needs and budget. By being able to easily compare different options, users can make more informed decisions and feel more confident about their booking.
👉Constraints I have:
- Clarity of information: OYO needs to ensure that the information provided to users when comparing hotels is clear and easy to understand. This may require simplifying the language used, providing visual aids, or breaking down information into smaller chunks.
- Navigation: The feature should be intuitive to navigate, so users can easily find the information they need and compare hotels in a way that is meaningful to them.
- User testing: I need to conduct thorough user testing to ensure that the feature is easy to use and provides a good user experience. This may require recruiting a diverse group of users and gathering feedback from them to make improvements.
- Comparison criteria: The feature should allow users to compare hotels based on a variety of criteria such as price, amenities, location, reviews, etc. These criteria should be relevant and meaningful to the users.
👉Assumption
- Customers have difficulty comparing options currently: I assume that the current process for comparing options is time-consuming or confusing for customers.
👉Target User
Customers looking to book a trip and find the best hotel and booking options
This includes anyone who is planning a trip and looking for a place to stay, whether it be a hotel, a vacation rental, or other types of accommodation. The target user may be individuals, couples, families, or groups of friends, and they may be travelling for leisure or business purposes.
👉 The problem that I am solving:
Customers have a difficult time comparing the various hotel options available to them when booking a trip. They may also have trouble comparing the prices and amenities of different booking options. The Compare Bookings and Hotels feature aims to solve this problem by providing customers with a more streamlined and efficient way to compare their options and make an informed decision.
Let’s have a look at the existing design and redesigned screen
I have included a new “compare with” feature in the existing design. Let’s break down the parts of a new feature.
📌 1. Heading: Compare with
The phrase "compare with" typically denotes that two or more items are being compared to one another to find similarities and differences.
This option will only appear when the user has selected one of the hotels from the home or search screens. He can compare the selected hotels with the remaining similar hotels.
📌2. Hotel Image for Reference
To help the user better decide on their stay at the hotel, I have given them reference images of the hotel where they wish to stay. The visual representation will help them imagine their stay.
In the image, I have given them two options: Save the hotel to their favourites list. They can share a hotel with their friends and family.
📌3. Quick Comparison
This comparison is beneficial for users who need to book accommodation at the last minute and can read the short comparison between hotels quickly. This will help them easily compare their options and find the best available deal.
They can compare the rates of different hotels at a glance, along with a quick comparison of the different facilities available.
📌4. Compare Button
Each hotel has a "compare button” below it. Users can compare any one of the hotels with the primary hotel that they selected from a home screen or search screen.
Now that you have looked at my final screen, let’s take a look at what my redesigned screen looks like before and after the user interview.
Redesigned screen before and after the user Interview
⭕Screen 1⭕
I went ahead with designing the UI after taking inspiration from direct and indirect competitors like Agoda, and Trivago and making low-fidelity wireframes as well as high-fidelity wireframes to bring clarity to an ambiguous state.
Screen before User Testing
For this screen, my thought process was to give users a list of hotels side by side so they could quickly compare their selected hotel with other similar hotels.
For this purpose, I gave a heading as a quick comparison.
📌1. Horizontal Scrolling Element
After reading the heading, I have given a list of 4–5 hotels that users can horizontally scroll through and read the short USP of each hotel. I categorised the hotel on the basis of
a) Locality of hotel
My assumption: is that the location of the hotel is the first thing users want to know about it. They want to get a better idea of the location so that they can estimate the distance of the hotel from their trip location or business location. The location will give them an idea about the kind of locality it is situated in. What kind of people live there, and how safe is the location?
b) Hotel distance from the station
My assumption: is that users look for hotels when they go on a business trip or go to live in a new city for a few days. I am assuming that users of Oyo Hotels will be traveling by train and will be looking for hotels that are nearer to the station. To help them with this decision, I have given the section on hotel distance from the station for them to compare.
c) Power Backup facility
My assumption: is that the user comes to the hotel to feel relaxed and far from the tension of the outside world. They should have the best experience possible in the hotel, and the power facility plays a big part in that. The user's needs begin with electricity, whether it's watching TV, charging their phone or laptop, or sitting in front of a fan or air conditioner. To highlight this need, I have given a section for a 24x7 power backup facility.
d) Parking Facility
My assumption: is that some of the users can travel to a new city using their personal vehicle (car). They might want a parking facility in a hotel to safeguard their vehicle. I've included a section on parking facilities to assist such users in making quick decisions.
If some facilities are not provided by a hotel, then I have greyed out that section to assist users in determining which facilities are provided by which hotels.
📌User flow before the user testing:
When the user opens the Oyo App, he/she will land on the home page. He can explore hotels directly from the home feed, or he can search for hotels using the search bar. Once he picks one hotel of his choice, he will open a detailed hotel information screen for the selected hotel.
Once he reaches the bottom of the screen, he will see a “compare with” option where he will see a list of hotels with a short description and USP. He can horizontally scroll the hotels.
The first hotel in a “compare with” will be the hotel that the user selected. He can read the important details quickly and compare those details with those of other similar hotels. At a glance, if he feels satisfied with a selected hotel after a quick comparison, he can click on the “BOOK NOW” button.
Or else, he can select one of the similar hotels to compare with the selected hotel. I've given them a radio button for selecting a hotel to compare with.
👉Why Radio Button?
It is given because the radio button signifies that you can select only one hotel out of the available hotels for comparison. When the user selects one hotel for comparison, other hotels will be greyed out.
👉Mistake identified during user testing
During user testing, I found that I had confused the user by including a radio button and a compare button at each hotel. Both meant the same thing: that a user can compare only one hotel at a time.
Possible iterations to avoid that confusion?
- I should have given one single compare button for all the hotels, and at that time, the user could use the radio button efficiently to select one hotel out of the other available hotels. When he selects one hotel, the other will be greyed out.
- I should have given only the compare option at each hotel without the radio button because the user can click on any of the compare buttons and he will land on that particular detailed comparison page of the hotel.
I went ahead with the second option for the final iteration.
Screen after User Testing
You can see the design iteration after the user interview on this screen.
I have removed the “Selected hotel” card from the quick comparison and changed the heading to “Compare with”. I went ahead with the existing design of OYO to keep the "Book Now" button sticky throughout the scrolling.
1. Book Now & Pay at hotel button
It's a sticky button that appears as you scroll down the page. The selected hotel's rate is displayed on the left side of the button.
2. Removed radio buttons from the design
These users were taking the time to understand how to compare hotels. The "Book Now" button and "Compare Hotels" buttons side by side left the user unsure about what action they should take. To avoid that confusion, I made the changes and made the flow simple.
⭕Screen 2⭕
Screen 2 is an extended version of Screen 1, where the headline (Hotel Name) from Screen 1 will go to the top of the screen and the hotel image will disappear and get replaced by the navigation scrolling bar to help users quickly go to the particular section with one click.
This hotel name and navigation scrolling bar will remain in a fixed position at the top of the screen throughout the scrolling. I have given a section named “Compare with” in the scrolling bar to help users quickly go to that section.
Insights from the user interview helped me validate that this option will work
⭕Screen 3⭕
Screen 3 is a newly added popup that will appear when the user scrolls up to some extent on Screen 1.
When I gave my user the screen to explore from the top to the bottom, I told him to speak out loud about whatever he was observing on the screen. During that time, when he reached the bottom of the screen, he completely ignored the “Compare the Hotel” feature, which made me realize that this feature is not noticeable to the user.
I designed a popup screen that will appear while scrolling screen 1. The popup says, “Confused which hotel to choose?" "Compare your hotel now…” which will leave an impression on the user’s mind that in situations where they feel stuck or confused about the hotel, then they can compare their hotel anytime.
⭕Screen 4⭕
If users are not satisfied with the quick comparison on the previous page, they can click on the Compare button to see a more detailed comparison on this page.
👉Let’s understand the highlighted changes on Screen 4 after the user interview.
- In the user interview, when I asked the user to explore the screen and explain how he understood the product, I noticed that when he had to scroll so far, he was only reading the heading and some of the content, but when he stopped at the amount section, he was clearly reading the entire section, including the total amount. This made me realize that users definitely want the amount section highlighted, so I changed the screen accordingly.
The highlighted section that I made earlier was not looking visually good, so I made changes and made the highlighted section simple. I removed the Book Now button from the side-by-side comparison because, as per the Gestalt Principle, it visually looked like a button for the same hotel.
2. My assumption was that, while comparing the selected hotel with a similar hotel, he might want to explore a similar hotel and want to book that hotel. To allow for more flexibility, I made the images clickable so that users could go directly to the hotel page. This eliminated the need for the "Book Now" button on this screen.
3. During my user interview, I found my user clueless about what to do next on this screen. To avoid that confusion, I gave a CTA of "Go back."
How did my ideation for a UI start?
It began by drawing inspiration from various direct and indirect competitors, including Agoda and Trivago.
Agoda
I liked the quick comparison style of the Agoda app, where they were comparing the selected property with other similar properties. They have given a “Book Now” CTA for the selected property and a “View Property” CTA for the other similar properties. For a quick comparison, they are showing the rating, number of reviews, and savings on the present deal.
They have a sticky button for “See rooms and deals,” which helps the user explore the deals.
Trivago
I liked the clear and minimal design of the Trivago. They have given a single button for comparison and a radio button for the user to select any one hotel out of the other available options. When the user selects any one hotel, the other option will be greyed out, and the user can click on the “compare” button to go to a detailed side-by-side comparison page 👇.
Different use cases for the flow
There are several different use cases for the Compare Bookings and Hotels feature:
1. Comparing hotel options: Users can use the Compare Bookings and Hotels feature to compare the details of different hotel options, such as the price, location, and amenities.
2. Comparing booking options: Users can use the Compare Bookings and Hotels feature to compare the terms and conditions of different booking options, such as the cancellation policy, payment options, and any fees or charges. This will help them find the best deal and ensure they are aware of any restrictions or requirements before making a booking.
3. Planning a trip: Users can use the Compare Bookings and Hotels feature to research and plan their trip, including finding a suitable hotel and booking option. They can compare the details of different options and make a booking all in one place, saving time and effort.
4. Booking last-minute accommodations: Users who need to book accommodations at the last minute can use the Compare Bookings and Hotels feature to quickly and easily compare their options and find the best available deal.
5. Comparing options for group travel: Users who are planning a trip with a group of friends or family can use the Compare Bookings and Hotels feature to compare options and find accommodations that meet the needs of the entire group.
Going from ambiguity to clarity using wireframes
Wireframes are the easiest way to dump down our observations from different apps. I preferred to write down my thoughts on the existing design of the app.
Rough wireframe on the bottom of the screen
High Fidelity Wireframe Iteration 1
High Fidelity Wireframe iteration 2
Assets used in UI
After observing all the screens and getting an idea of the required elements for UI, I prepared local assets using auto layout and components to make my design work easy.
I created a parent component here and used the instances of it in my designs.
Have a look at how taking inspiration from competitors helped in redesigning the existing screen
Have a look at what changes I made after the user interview
Scope for the future improvements
I have narrowed down my project due to the time constraints of 48 hour because of which I had to skip many use cases. In the future, I would like to work on different use cases. I would also like to work on a sort and filter option while comparing the hotels.
My Key Learning from the project
- It’s impossible to design a full-fledged product in a limited time because we have to take care of so many use cases and possibilities. It’s better to pick one flow and go deeper in understanding the root problem in that flow and bring the solution.
- Our work becomes easy when we work in a team and share our research and design resources with others to bring the best possible solution in a limited time.
Appendix
📌Prototype
⭕ NOTE: Drag on the first screen to reach to the second screen ⭕
Thank you for reading the case study until the end. Please give your valuable feedback or suggestions that can help me in my next project.
Don’t forget to give 👏, Btw each reader can give up to 50 claps, just saying 😀
Feel free to reach out to me on LinkedIn or you can email me at megha.dokekar@gmail.com
