Implementing Categorical Recommendation feature in OYO app — 48 hrs Product Design Challenge
Are you confused about which type of hotel to book in OYO ? (or) which type of hotel suits you the best ?
🤩 Don’t worry hereafter, I’ve come up with a solution for you all. With that solution, you all can select your preferred type of hotel easily. If that sounds good, go through the case study fully for more details👇
This case study is about the 48 hours Product Design Challenge conducted by Growthschool under the mentorship of Mr. Anudeep Ayyagari, where we’ve worked on adding a new feature in OYO’s mobile app. Even though this is an individual project, a group of members collaborated and worked together to share feedback, resources, etc. I’ve also used all of my available resources like ChatGPT (Used the power of AI to generate my Problem statement), used internet resources to gather some secondary research insights, my group members for getting feedback and some help.
Without any further delay, I want to get into the story of the process which I followed to come up with the solution and also to complete this 48 hours Sprint.
A quick video reference of my final solution for the problem statement👇
Note: Read the case study fully to get the whole context of my work.
The 48-hour Product Design Challenge started at 9 p.m. on 6 Jan, 2023 with an opening call from Mr. Anudeep Ayyagari, where he gave everyone the whole context about what are we going to do in the next 48 hours🔥
The challenge ended at 9 p.m. on 8 Jan, 2023.
List of process I followed:
(Click on the below links to directly go to the desired location 👇)
1. Problem statement ✔️
b. Assumptions
c. Reasons for why I’ve chosen the problem statement
f. Constraints
2. Secondary research ✔️
3. Wireframing ✔️
4. UI Design stage ✔️
5. User Testing ✔️
6. Iterating and improving the final UI design ✔️
7. Comparison of all version of the screens ✔️
8. Future Scope ✔️
9. Key learnings and Takeaways ✔️
✅ Plan of action for the entire 48 hours challenge👇:
- I’ve selected the Categorical Recommendations from the list of Problem statements provided.
- The solution I came up with for my problem statement is Explore Categories section, where the users can choose their hotel types based on their preferred category.
➡️ Comparison of the home screens of Oyo (Before usability testing):
About the feature:
1. I’ve implemented the Explore by categories section in the home screen as carousels.
2. Users can quickly search for their preferred category of hotels without any confusion.
For more info, continue reading the case study fully 👇
1) Problem Statement :-
About the product:
Ritesh Agarwal is the founder and CEO of OYO Hotels & Homes. Travelling across India at the age of 17, Ritesh stayed in more than 100 bed and breakfasts, guest houses, and hotels to realize there was a massive dearth of affordable and good-quality hotels in the budget hotel category. He believed that everyone deserves a beautifully designed, chic and comfortable living space. And everyone deserves a better life. That’s how OYO was launched in May 2013. OYO today is the world’s leading chain of hotels, homes, and spaces.
a. Core idea of the feature:
The Categorical Recommendations feature would allow users to filter and browse hotel recommendations based on specific categories, such as room type, hotel type, etc.
This would allow users to more easily find the type of accommodation that meets their specific needs and preferences.I want to improve the user experience by making it easier for users to find and book the type of accommodation that best meets their needs.
b. Assumptions:
I assumed that users would find this feature useful and that it would lead to increased bookings and revenue. If the users have no idea about what type of hotel they want to book, that is where my solution comes into the play. It is also assumed that the technical and logistical constraints can be addressed and overcome in order to successfully implement the feature.
c. Reason why I’ve chosen this problem statement (based on my assumptions):
Users will find this feature useful and will use it to find the type of accommodation they are looking for.
Providing more targeted and relevant recommendations will lead to increased bookings and revenue.
By recommending the categories, users can find their relevant hotel without worrying about thinking more. Which comes under the Heuristic Principle - Recognition rather than recall.
🔥Even though I scope down my solutions, I assume that it’ll have a positive impact on the business of OYO. Because I scoped down my solution & flow and made it simpler, to blend with the app’s native flow without much changes, because I thought to keep my solution simple, minimal and at the same time impactful.
d. Business metrics targeted:
It helps the Business by,
a. Increasing the number of bookings made through the app.
b. Improving customer satisfaction and leading to increased customer loyalty.
c. Enhance user engagement with the app and increase the overall usage of the app.
d. Because of all those above-mentioned advantages, it could also increase revenue for the business.
e. How it helps the users:
This feature would save users time and effort by allowing them to quickly and easily find the type of accommodation they are looking for.
It would also provide a more personalized and convenient experience, leading to increased satisfaction and likelihood of returning to Oyo for future bookings.
f. Constraints:
There may be technical and logistical constraints to implementing this feature.
The need to integrate with our existing booking systems and processes.
The needs to accurately categorize and tag hotels in order to provide accurate recommendations.
<Go to top>
2) Competitor Analysis (Secondary research):
I’ve referred to some of the competitor apps like Airbnb, Agoda, etc., and internet for my secondary (desk) research. I’ve got so many insights of how they implemented the similar thing in their app, how’s their business acts, etc.
Competitor apps:
Competitor app’s Home Screen:
Oyo’s Home screen:
<Go to top>
3) Wireframing (Digital):
After assuming which, where, why and how I’m going to implement that solution, I went forward to do the low fidelity wireframing.
I’ve made 2 iterations in the wireframing part itself. Because, iterations are one of the most important factors to keep on improving our designs by getting feedback, working on ourself, etc.
In the first iteration I thought to implement the feature in drop down list.
● Iteration — 1:
● Iteration — 2:
Reason for why I’ve done 2nd iteration for the wireframing stage 👇:
- The reason behind the 2nd iteration of the wireframe is that, I thought that placing every category in the home page itself as chips will reduce 1 step / screen for the users to navigate to the Categories tab separately. So, I assumed that it’ll reduce drop off in the categories section.
- The second reason is that I assumed that providing multiple selection of the categories will lead to some of the complications like, time out error, no listing will be shown, not every hotel matches multiple categories, etc., So, to reduce the complications and failure of the categories tab I’ve decided to give as 1 selection of categories. For e.g. If the users select the Luxury rooms category, the hotels which come under that category will only be listed in the next page.
In the second iteration, I’ve given the feature in Carousels for more interactive design.
After completing the rough idea about how I’m going to implement the feature, I went forward for the UI Design stage.
<Go to top>
4) UI designing stage:
After completing the 2 iterations of the wireframes, I came to my favorite stage where I want to get started with the UI Design.
You know what, at this stage I’ve also made 3 iterations of the UI design part before even conducting the usability testing.
🔥Importance of Iterations in UX Design:
a) I believe that iterations are crucial in UX design as they allow for the testing and refining of design concepts and solutions.
b) They enable designers to gather feedback and make adjustments to improve the overall user experience.
c) Without iterations, a design may not fully meet the needs and expectations of users, resulting in a suboptimal experience.
d) Additionally, iteration helps to identify and fix usability issues, and improve the overall quality of the final product.
Iteration — 1 of the UI Design Stage:
What I’ve done in the 1st iteration of the UI Design stage:
✔️ In this 1st iteration, I’ve implemented the Explore by Categories section in the home screen.
✔️ I’ve made the option to be listed in a drop-down manner.
✔️ Some of the listed categories were Location, Price range, Ratings, etc.
✔️ By selecting any of the category, the relevant results (list of hotels) will be shown in the next page.
Iteration — 2 of the UI Design Stage:
What I’ve done in the 2nd iteration of the UI Design stage:
✔️ In this 2nd iteration, I’ve implemented the Explore by Categories section in the home screen.
✔️ I’ve made the option to be listed in a Carousel chips.
✔️ Some of the listed categories were Luxury hotels, Farms, Suite rooms, etc.
✔️ By selecting any of the category, the relevant results (list of hotels) will be shown in the next page.
✔️ From the list of hotels under the selected category, users can select any of the hotel and view its details in the next page.
The reason for why I’ve done the 2nd iteration:
✅ In the 1st iteration, I’ve misunderstood that how Categories should be, and made the wrong screens (i.e.) Instead of implementing the categories, I’ve implemented the filters mistakenly. So, in the 2nd iteration I’ve changed the categories section entirely.
✅ Then I’ve changed the drop-down lists to Carousel chips (I’ve taken the carousel reference from the competitor app Airbnb) for more interactive UI.
✅ I’ve implemented the categories list based on getting some reference from all the available resources which ever I have and as per my intuition.
Iteration — 3 of the UI Design Stage:
What I’ve done in the 3rd iteration of the UI Design stage:
✔️ In this 3rd iteration, I’ve changed the first category option from Luxury Rooms to Couple-Friendly.
✔️ Some of the listed categories were Couple-Friendly, Farms, Suite rooms, etc.
✔️ I’ve arranged the categories chips based on the priority of most used user category (based on my intuition).
The reason for why I’ve done the 3rd iteration:
✅ In the 2nd iteration, I’ve changed the 1st category as mentioned above. Because, in the previous iteration, Luxury rooms and Suite rooms felt similar kind of Premium rooms to me. So, I’ve added the new category of Couple-Friendly, which is also OYO’s largest user base category (as per some reference and my intuition).
✅ I’ve changed the flow from the 2nd iteration. I’ve included the 2nd page as Location results (based on selected category) and the 3rd page as Hotel Listings (based on selected location under the selected category).
✅ I want to design the UI screens as much closer to the actual flow of the OYO app’s screens in a very relatable manner.
After completing the 3 iterations of the UI Screens, I went ahead to conduct the User Testing👇
<Go to top>
5) User Testing stage:
- In this stage, I’ve recruited 4 users to conduct the user testing interview to get qualitative insights.
In the interviews, I’ve shown my iteration 3 flow of the UI Design stage to the users like below 👇
➡️ How I conducted the User Testing:
- First of all, in the interview, I asked the users to observe all the 4 screens of the flow and share their observations in a detailed manner.
- After getting the insights from their observations, I started to ask probing questions to the users to understand their thoughts about the feature which I implemented.
➡️ Feedbacks that I’ve got after conducting User testing:
- Can’t able to easily recognize some of the category’s name.
- It’s quite difficult / the user may lose interest for scrolling every category chip to find their relevant category until the last chip
- Can’t able to recognize whether the categories chips have multiple selection or not.
➡️ Solutions that I came up with from the user feedbacks:
(Improvements / Iterations that I’m going to make as per my assumptions, taking reference and by using my available resources within the given time).
- Can place an image or icons in the chips to easily recognize them, even if they don’t know the name of a particular category.
- Can make the carousels in a 2-liner way (But I didn’t see it in any app personally, and I don’t know whether it’ll work well or not)
- As this is a categorical recommendations feature, it won’t have multiple selection. Because we can expect multiple selection in Filters but not in categories selection
- Suggestion from the user — Instead of carousels, we can give drop down. (But I assume instead of drop down, carousel chips will be more interactive and can occupy less space compared to drop downs. Carousel chips allow users to see all available options at a glance, which can make it easier for them to discover new items. Drop-down lists, on the other hand, require users to manually open the list to see all available options, which may be less discoverable.)
➡️ Final change from the list of solutions that I’ve made:
I’ve filtered all the solutions, and selected only 1 solution which I thought would work as per my assumption.
With the final solution, I went ahead to iterate the UI of the 3rd iteration 👇
<Go to top>
6) Iterating and improving the final UI design:
✅ I decided to place the relevant icons in the chips, for the users to easily recognize them, even if they don’t recognize the name of a particular category.
Here is the final iterated UI Screen:
<Go to top>
7) Comparison of all versions of the UI screens:
<Go to top>
Links for my Project work:
1) Figma:
2) Prototype:
<Go to top>
8) Future Scope:
🔥Before the final learning and completing the case study, once again I explored the final flow of my project and found some doubts which are confusing me as well as some of my group members.
- Which is the search bar related thing in the second screen of the final flow is somewhat confusing, like whether the search bar is for the listed hotels or is it for we can search any hotels with the selected category? Or without the selected category?
- The next thing is “Search nearby OYO’s with this offer” I can’t able to understand what offer exactly it is providing. Whether the offer means the category of hotel? or is it somewhat the native offers provided by Oyo?
- So, addressing and resolving this confusion is one of my future scopes.
🔥 These are the things which I found and resolved in the given 48 hours. Maybe I could have able to done more things, but this is what I did and I’m happy and satisfied with what I’ve done to solve the problem given within the 48 hours timeline.
🔥 If I got more time, I would have come up with some other better solutions and UI with stronger reasonings based on Secondary and Primary researches, better ideation, better iterations, etc.
<Go to top>
9) Key learnings and Takeaways:
From this 48 hours Product Design Challenge, I’ve learnt a lot of things like:
✅ Time Management
✅ Team collaboration
✅ Sharing and using all the available resources
✅ More knowledge and improvements on UI
✅ To do efficient Researches
✅ Conducting User Testing
✅ Etc.
<Go to top>
➡️ Conclusion:
- With all these I conclude my project and case study. I’m very thankful to my mentor Mr. Anudeep Ayyagari for making this challenge happen smoothly.
- Also, I want to thank all of my group members who were very much supportive and helpful to me throughout the challenge.
- And finally I want to thank everyone who are all reading this entire case study till the end. I hope you all have read a good story about my 48-hour project.
Share your valuable thoughts in the comments and each & every feedback of yours is welcomed. 👇
➡️ Feel free to connect with me on the following platforms:
LinkedIn — Naveen S✨
Email — naveens5320@gmail.com
Instagram ID — ux.naveen
