48 hours Product design challenge

An attempt to speed up the decision-making process for users by creating a categorical recommendation widget for KAYAK app

A case study on how I designed recommendation feature based on product categories searched by user for KAYAK app

Wanna join me on a trip? I may not be able to take you to a physical destination, but I can assure to take you on an exciting 48-hour Product Design Challenge journey that happened on January 6th 2023, from Friday evening to Sunday evening.

Figma file link

Table of contents

What was this Product Design Challenge about?
- How I got involved in the Product Design Challenge?

Let’s delve into how I was assigned to KAYAK product and the process of selecting the problem statement for it
- Why I chose ‘Categorical recommendation widget’ problem statement?

About the Product

Problem Statement
- Adding a recommendation feature based on product categories searched by the user
- Core idea of the feature
- Impact on business metrics
- How it helps users?
- Constraints
- Assumptions I have taken

Let’s dump my thoughts down on paper

It’s time to start working on Figma — Initial UI Design
- User Flow
- Comparison of Original and Revised screen
- Newly Added section/page

Let’s evaluate how easily the user can understand the initial user interface design
- UI Element Brief
- Before vs After Usability Test

Let’s give the UI a workout — prototype

Iterating after the challenge has ended!
- Revised card prototype
- Revised user flow
- A light theme version has been incorporated into the design

Key learnings I gained from this challenge

🔥The Journey Begins🔥

What was this Product Design Challenge about?

The challenge aimed to prepare us for a time-constrained take home assignment, where we developed individual Minimum Viable Product within 48 hours for a given problem statement.

Each group was given a product and team members were tasked with working on different problem statements and creating new features that is not already exist in the assigned product.

The product that each group received is related to a travel booking app. As many travel booking apps offer multiple features, the challenge decided to narrow its focus to the aspect of Hotel / Hostel / Stays / Homestays.

How I got involved in the Product Design Challenge?

I signed up for the Product Design Challenge, which began on January 6th Friday evening. However, I had self-doubt and fear about how I would be able to come up with a solution for the problem statement within 48 hours while also getting enough sleep as I was not used to staying up all night.

I was initially uncertain about my participation in the challenge, but after attending the opening call I was motivated to fully engage in the challenge and take it on with a positive attitude and an open mind, ready to adapt and go with the flow of the group.

Let’s delve into how I was assigned to KAYAK product and the process of selecting the Problem Statement for it

I was part of a team who were initially assigned to the Booking.com product. We had discussed and selected a problem statement. However, due to a lack of participation from some members we were reassigned to another team that already had five members and were working on the KAYAK product.

This shift resulted in a loss of time and confusion. We spent additional time familiarizing ourselves with the KAYAK product and choosing a new problem statement to focus on.

Why I chose ‘Categorical recommendation widget’ problem statement?

I chose to work on the problem statement of “Adding a recommendation widget based on product categories searched by the user” because I had observed the recommendation feature on various apps that I use and initially thought it would be a straightforward and simple solution to create recommendation widget.😅

However, as I delved deeper into the task, I realized that it was not as simple a task as I had initially assumed.

It took a lot of effort to understand the necessary details required for the user to book the hotel and to organize them within a limited space of a card.

KAYAK Product

KAYAK is a travel search engine and metasearch platform that allows users to search and compare prices for flights, hotels, rental cars, and vacation packages from various travel websites.

KAYAK app allows users to search for and book travel arrangements on the go and get inspiration for their next trip all in one place. It allows users to filter their search results by price, location, and amenities, making it easy to find the best deals that suit their needs.

Users can view detailed information about each option, including photos, reviews, and maps. Users can also save their search preferences and receive price alerts for flights and hotels. This feature is particularly useful for those who are planning to book travel in the future and want to keep an eye on prices.

Problem Statement

Adding a recommendation feature based on product categories searched by the user

• The categorical recommendation feature is intended to help customers find travel arrangements that meet their needs by providing personalized recommendations based on their preferences and past behavior.
• Categorical recommendation widget suggests products to a user based on the categories they have previously searched for, potentially increasing the likelihood of the user making a purchase.

I was confused by two problem statements: one being recommendation based on product categories and the other being recommendation based on user data.

I explored about these two problem statements and reached out to my team members and Anudeep Ayyagari for further clarification on the distinctions between the two problem statements.

A specific example of a categorical recommendation widget would be on an e-commerce website like Amazon, where after a customer searches for a specific category of products, such as “men’s shoes”, a widget appears on the side or bottom of the page showing recommended products based on that specific category.

Core idea of the feature

The idea is to add a recommendation widget to the KAYAK app that suggests travel options to users based on the categories user have searched for. The widget will show personalized recommendations for hotels within the specific product detail page, that are relevant to the user’s interests.

Impact on Business Metrics

A recommendation widget based on product categories can have a positive impact on business metrics

• Repeat Purchases: By recommending products that are relevant to the user and that they are likely to be interested in, the recommendation widget can increase the likelihood of the user returning to the website or application to make additional purchases.
• Conversion rate: By suggesting products that are relevant to the user based on their search history, the recommendation widget can increase the likelihood of the user making a purchase. This can lead to an increase in the conversion rate.
• Customer Retention: By providing personalized recommendations, the recommendation widget can improve the customer experience which can lead to increased customer retention and loyalty.
• Revenue: By increasing conversion rate, repeat purchases and customer retention, the recommendation widget can have a significant impact on revenue for the business.

How it helps users?

The recommendation widget will help users discover new travel options that they may not have considered before, making it easier for them to find and book their perfect trip.

• Save users time and effort by suggesting relevant options based on their browsing history, previous bookings and it reduce the need to manually search for travel arrangements that meet their specific criteria.
• Improve the overall customer experience by providing more relevant and helpful recommendations.

Constraints

• Some potential constraints for this feature could include the need to ensure data privacy and compliance with relevant regulations. There may also be technical limitations or resource constraints that could impact the implementation of this feature.
• The widget should not be intrusive or disruptive to the user’s browsing experience. The recommendations should be relevant and not overwhelming. Additionally, the widget should be easy to use and understand, with clear calls to action.

Assumptions I have taken

• I assumed that by recommending hotels based on the category within the specific product details would make the booking process easier for users and save time as they would not have to manually go back and search for similar product.
• I assumed that users will be willing to share their browsing history and previous bookings with KAYAK in order to receive personalized recommendations.
• I also assumed that the recommendation algorithm will be able to accurately predict user preferences and interests.

Let’s dump my thoughts down on paper

I quickly examined other applications such as Expedia, booking.com, e-commerce apps like Amazon and Meesho to understand

• How they implemented categorical recommendation widgets
• How the widget is designed
• How they included all necessary details needed for users to book particular product

Based on my understanding and assumptions, I immediately began creating wireframes by sketching them out in my notebook using a pencil. This helped me visualize how the widget would look, how users would interact with it, and what information would be necessary to include in the card.

Since we had a time constraint, I focused my solution within the product details page where I planned to create a categorical widget that would be based on the property type category in the KAYAK app.

Categories based on property type in KAYAK app:

Categories based on property type in KAYAK app

Rough Sketches

It’s time to start working on Figma - Initial UI Design

User Flow

1. When user taps on Accommodation card located in the Product Detail Page, it will take the user to the Categorical recommendation widget section.
2. The recommendation widget is displayed on bottom of the Product Details page and is similar to the specific category that the user is currently viewing. The user can scroll through the recommendations provided by the widget and choose one that interests them. If the user taps a card from the recommendation widget, they will be redirected to Product Detail page of the particular hotel and the option to book it.
3. If the user wants to see more recommendations, they can tap on the arrow icon to view all options.
4. On the Recommendation Detail page, the user can view all the recommended options. When they tap on one card will be taken to Product Detail page of the particular hotel and the option to book it.
5. They can go back to Product Detail page by tapping back arrow Icon.

Comparison of Original and Revised screen

Product Detail Page

1. A card has been added, when tapped it will take the user to the Categorical recommendation widget section.

Newly Added section/page

Categorical Recommendation Widget Section:

Categorical Recommendation Widget

Users can either vertically scroll the Product Detail page or they can tap on the Accommodation card which is located near the booking card to reach the categorical recommendation widget section.

A categorical recommendation widget displays personalized product recommendations for users based on a specific category. Users can scroll horizontally to view the recommendations provided for them

Recommendation Detailed Page:

Detailed Recommendation Page

This page displays all personalized recommendations to users based on the category of the product they have previously viewed.

Let’s evaluate how easily the user can understand the initial user interface design

After creating the UI page, I conducted testing with users through a discord video conferencing channel. The feedback I received was valuable and helped me identify areas for improvement in the initial design. I used this feedback to iterate on the design and made a necessary change.

Due to the limited time, I was unable to conduct any formal research. However, the usability testing gave me enough insight into understanding the users of the product and the functionality of the KAYAK app.

UI Element Brief

Categorical Recommendation Widget Section:

1. Arrow Icon — when tapped, redirects users to see all recommendations of the particular category.
2. Heart Icon — tapping this icon allows users to save the hotel for future reference.
3. Private Deal Unlocked label — indicates special rates that are only available to a select group of customers, such as those who have a specific credit card or loyalty program membership.
4. Mobile Icon — indicates a discounted rate that is only available to customers who book a hotel room through the KAYAK app using a mobile device, such as a smartphone or tablet.
5. Category Name — indicates the different categories of accommodations, such as Apartment, Guest House, Rental House, Villa, etc.
6. Name of the hotel — the name of the hotel is displayed.
7. Number of booking sites — if there are multiple options, it displays number of the site or it displays the name of the specific site through which the hotel can be booked.
8. Pricing Details — The cost of the hotel is displayed.
9. Free cancellation tag — indicates that users are allowed to cancel their booking without incurring any additional fees or charges.
10. Rating — indicates the overall rating of the hotel.

Recommendation Detailed Page:

1. Heart Icon — tapping this icon allows users to save the hotel for future reference.
2. Share Icon — allows users to share the information with other people, families or friends.
3. Rating Icon — indicates the overall rating of the hotel.
4. Free cancellation tag — indicates that users are allowed to cancel their booking without incurring any additional fees or charges.
5. Number of booking sites — if there are multiple options, it displays number of the site or it displays the name of the specific site through which the hotel can be booked.
6. Back Arrow Icon — when tapped redirects users to the previous page.
7. Image of the hotel — can able to view additional images by tapping on it.
8. Carousel Indicator (dots) — signifies that there are more images available for that hotel.
9. Private Deal Unlocked label — indicates special rates that are only available to a select group of customers, such as those who have a specific credit card or loyalty program membership.
10. Pricing details — The cost of the hotel is displayed.

Before vs After Usability Test

Categorical Recommendation Widget Section:

1. Users are having difficulty in understanding the orange icon at the corner of the card:
   The orange icon meant to indicate that a hotel was offering free cancellation was unclear to users. I replaced the ambiguous orange icon with a tag that clearly conveyed the free cancellation option for bookings, so that users could understand its purpose.
2. The heart icon is not easily accessible as it is located on the left side:
   I have replaced the heart icon to be in right side so that user can easily access it.
3. Users are unable to determine the availability of a hotel due to the lock icon at the bottom:
   The lock icon located at the bottom was causing confusion among users as they were interpreting it as an indicator of a hotel’s availability. I stick with the same lock icon as it is commonly used in the KAYAK app, and users may already be familiar with its meaning. However, I made adjustments to its proximity to the category heading to provide more context and make it clear that it is related to that particular hotel.
   a. Including text with the icon may result in a cluttered appearance on the card. One possible solution is to display a small overlay when the user hovers over the icon, to educate them on its meaning at a early stage.
   b. The lock icon is used in the KAYAK app to indicate a private deal that is unlocked.
   c. Private deals are special rates that are only available to a select group of customers, such as those who have a specific credit card or loyalty program membership.
4. Users are having difficulty understanding the meaning of the mobile and lock icon:
   I stick with the same mobile and lock icon as these two icons are already being used on the search result card and users may already be familiar with them.
   a. Mobile icon indicates mobile rate — a discounted rate that is only available to customers who book a hotel room through the Kayak app using a mobile device, such as a smartphone or tablet.
5. The use of different colors to represent different prices is causing confusion among users and they are uncertain of their meaning:
   I used same color for pricing to avoid confusion among users. The different colors are used only to indicate two specific offers, ‘Mobile Rate’ and ‘Private Deal Unlocked’ and I used lock and mobile icons to indicate which hotels have these offers.

Recommendation Detailed Page:

1. The heart icon is not easily accessible as it is located on the left side:
   I have replaced the heart icon to be in right side so that user can easily access it.
2. The placement of two images in the same row is causing visual clutter, making it difficult for users to determine which one to focus on:
   I altered the layout to show one card per row to eliminate visual clutter and enable users to clearly focus on it.
3. Users are finding it difficult to make a decision based on just one image of the hotel:
   a. As this product is a hotel booking app, displaying multiple images of the hotels will be helpful for users in easily finding and choosing their desired hotel for booking.
   b. Users can view more images of the hotel by tapping on the current image. The carousel indicators(dots) signifies that there are additional images available for the hotel, allowing users to view more pictures of the hotel before making a decision.
4. The use of different colors to represent different prices is causing confusion among users and they are uncertain of their meaning:
   I used same color for pricing to avoid confusion among users. The different colors are used only to indicate two specific offers, ‘mobile rate’ and ‘private deal unlocked’. To clarify it, I have used separate tags above pricing details to indicate which hotel have these offers.
5. The pricing details that are strike out are not easily visible to the users:
   To improve visibility, I increased the font weight of the struck out pricing details. The struck out pricing typically refers to the original price of an item that has been discounted
6. Users are unsure of the meaning of the free cancellation icon. As it is located at the bottom corner of the card, it appears to be refreshable:
   Users were interpreting the free cancellation icon as a way to refresh the card, however, that is not its intended meaning. To clarify this, I replaced the icon with a tag to clearly indicate that the user can cancel their booking for that hotel at no cost.
7. A share icon has been added to allow users to share the information with other people, families, or friends. The user flow for that icon has not been completed yet. It is planned to be considered in future development.

Let’s give the UI a workout — prototype

🔥The Journey Ends🔥

Iterating after the challenge has ended!

My 48-hour journey of Product Design Challenge came to a close on Sunday 8th evening, I submitted my Figma file and prototype link, but then I had a realization that some changes were needed.

So, I got back to work and started iterating the UI and prototype all over again!

Revised card prototype

The recommendation card on the detailed page has two tap options

1. Tapping the card redirects users to the product’s detailed page.
2. Tapping the image on the card allows users to view additional images of that particular hotel.

This may cause confusion among users, who were unsure of where to tap on the card, leading to sometimes mistapping and unexpected behavior from the card.

The major change I made was that I switched the interaction for viewing other images in the carousel from a tap to a swipe/drag. By allowing users to swipe or drag the image they can easily view the other images of that particular hotel in a more natural way.

Previous Interaction

Revised Interaction

Revised user flow

1. The recommendation widget is displayed within the Home page and is similar to the specific category that the user has previously searched for. The user can scroll through the recommendations provided by the widget and choose one that interests them.
2. If the user wants to see more recommendations, they can tap on the arrow icon to view all options.
3. On the Recommendation Detail page, the user can view all the recommended options. They can also see other images by tapping on images in the card. When they tap on one card will be taken to Product Detail page about the particular hotel and the option to book it.
4. They can go back to Home page from Recommendation Detail page by tapping back arrow icon.
5. If the user taps a card from the recommendation widget in Home page, they will be redirected to Product Detail page about the particular hotel and the option to book it.
6. Users can either vertically scroll the Product Detail page or they can tap on the Accommodation card which is located near the booking card to reach the categorical recommendation widget section. If the user wants to see more recommendations, they can tap on the arrow icon to view all options.

A light theme version has been incorporated into the design

I initially began designing for the dark theme, but now I’ve created designs for the light theme as well, to cater to the users’ preference of light or dark theme.

Dark theme version Prototype

Light theme version Prototype

If I had more time, I would have analyzed and worked on more use cases, and also test the categorical recommendation widget with users to get a better understanding of how it can be further improved.

Key learnings I gained from this challenge

• Learnt to use Auto layout and understood its usage.
• Gained knowledge on how to utilize components and variants.
• Discovered the importance of making decisions and being able to compromise on something in order to deliver a final solution on time.
• It is crucial to have a good understanding of the product and its intended users in order to create a significant impact with the design.
• I found out that it is possible for me to stay up all night. 🤣

Thanks for sticking with me till the end of my journey! I hope you enjoyed it. If you have any thoughts or feedback, I’d love to hear them!