48 HOURS PRODUCT DESIGN CHALLENGE

Adding a Feature in Agoda that allows users to compare different hotels based on photos and reviews by adding them to a comparison list.

Have you ever found it frustrating to compare hotel-related photos, reviews, and other information, only to end up going back and forth between different pages or platforms? This can leave you feeling confused and uncertain about which hotel to choose, as well as doubtful about whether you are getting the best possible deal.

Well, In this project, I will Show you how I completed ‘adding Comparision Feature’ in 48hrs under the guidance of my mentor Anudeep Ayyagari

⌛Here we go, the clock starts ticking

This is where the clock begins to tick. It was around 9.30 pm on Friday 6th of January, My mentor Anudeep Ayyagari started the kick-off call and explained about the 48-hour product design challenge.

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 Agoda. Each member was working on a different Feature of the same product, So we can contribute and receive assistance from each other if needed. I chose to work on the hotel comparison feature. This short case study is an outcome of a 48-hour-long Product Design Challenge.

And the Deadline was Sunday 9:30 PM

Index: click on any headers to jump directly to that section.

1. Plan of action.

> Schedule of Product Design Challenge.
> Problem Statement.
> Assumptions to be taken before hand.
> Why did I choose to work on Compare Hotel Feature?
> Let’s see the Final UI.

2. Process behind It.

> Some Research about the Feature.
> What competitors are doing:
> Requirement for the feature.

3. Ideating

> Where to Implement this feature?
> Coming to the Wireframing.
> UI Components.

4. Users tresting

> Is my solution really working?
> Conclusion.
> Future Scope.
> Key Learning.

Schedule of Product Design Challenge

After getting the Problem statement our mentor told us to use Chatgpt for queries which will ease our work to complete this project in given time.

🤖 Below are the info I got from using Chatgpt

Problem Statement:

Many travelers find it difficult and time-consuming to compare different hotels when booking travel accommodations online. This can lead to confusion and uncertainty about which hotel is the best fit for their needs, and can result in lost revenue for travel booking platforms. To address this challenge and improve the user experience, we need to develop a hotel comparison feature that allows users to easily compare different hotels side-by-side, including key details like photos, reviews, and pricing information.

Core idea of the feature:

The core idea of the feature is to provide users with a simple and intuitive way to compare different hotels by allowing them to view photos and reviews of the hotels they are interested in.

Impact on business metrics:

• Increased user engagement: By allowing users to compare hotels based on photos and reviews, users will likely spend more time on the platform and engage with more content. This can lead to increased user engagement and retention.
• Increased conversion rates: By providing users with more information and resources to make informed decisions, it is likely that users will be more likely to book a hotel. This can lead to increased conversion rates and bookings.
• Increased user satisfaction: By providing users with an easy way to compare hotels, it is likely that users will feel more satisfied with their booking experience and be more likely to book with Agoda again in the future.
• Increased revenue: By increasing user engagement, conversion rates, and satisfaction, it is likely that the feature will lead to increased revenue for Agoda.

Constrains:

1. One constraint could be the availability of photos and reviews for all hotels, as they may not always be provided by the hotels or users.
2. It could also be a challenge to ensure that the photos and reviews are relevant, accurate, and unbiased.

Assumptions to be taken before hand:

It is assumed that users value the ability to view photos and reviews as a way to make more informed decisions about which hotel to book. It is also assumed that users are willing to spend more time on the platform to find the right hotel for their needs, and that they are willing to share their own photos and reviews.

📍Why did I choose to work on Compare Hotel Feature?

I chose to work on the Compare Hotel feature because our mentor had presented us with Some problems, and after discussing with the team, each member had taken on a specific problem to work on. I personally chose to work on this feature because I love to travelling and I always compare hotels before booking. However, I have often experienced the inconvenience of not having a dedicated comparison feature available. This has required me to recall previous hotel details or go back and forth between different hotel listings, which can be time-consuming and frustrating. By developing a hotel comparison feature, I believe we can create a more efficient and user-friendly experience for our app users, while potentially attracting new users who are looking for this type of functionality.

–Let’s see the Final UI

The Final output:

–Below are the comparative final design shots and explanations added for. the feature with the number tag.

Hotel Listing page

1. Added Compare Feature in the Search Result:
Reason- adding compare feature on the search result help the users to take decision. Users don’t have to retain the info about the previous hotels while going through the other hotels Detail.

and also Keeping in mind about the thumb reach so it will be easy accessible for the users.

2. Putting Quick Comparision Detail in 2nd Fold.
Reason- Shifted the Quick Comparision Detail from bottom to 2nd fold so that the users don’t miss the great deals on hotels.

3.Adding Compare button.
Reason- The Compare button will take the users to the Comparision Page where all the hotel details can be viewed side-by-side in a single View.

New Screen added in Agoda app

4. Quick Comparison.
Reason- A Quick Comparison Page provides a comprehensive and convenient overview of two hotels, allowing the user to make a well-informed and quick decision. The page presents all the relevant information about the two hotels in a single view, including their amenities, location, Room phots, prices, and customer reviews. This

5. Add to Compare Button.
Reason- The “Add to Compare” Allow users to add hotel in Comparision List and compare them side by side. This feature allow the users to compare all their options in one place.

Page for selectin other hotel to compare

8. Compare Selected hotel.
Reason- pop up ‘Compare Selected hotel’ allow the user to initiate the comparison process. This button serves as a visual cue that the user has selected the hotels they want to compare and is ready to view the Selected hotel in comparison page.

Let's Do Some research About the Feature🧠.

First Lets get to know about the Agoda App.

Agoda is an online travel booking platform that specializes in accommodations such as hotels, resorts, and apartments.

Its headquarters is in Singapore and offers a wide range of properties in various locations around the world, and customers can use the platform to search for and book accommodations.

Research

Before implementing a comparison feature, I conducted some initial research to understand the market and gather information on businesses that uses this Similar feature. I analyzed competitors and other businesses to gain a better understanding of the comparison feature and its use. This research helped me to have a clearer picture of the market and provided me with insights to improve my implementation of the comparison feature.

What competitors are doing:

When I looked into the Competitor app I didn’t find any Comparision feature which can compare hotel side by side, But my friend found in the Trivago app (I Don’t know why it was not showing on my Phone) which they are already using.

In this I found one thing that Users don’t have freedom to choose other hotel From Comparision page itself.

Make my Trip also has the same feature as Agoda but provide the users to choose the hotel they like to compare but do not compare side by side

Other E-Commerce Platform:

This is Flipkart, They have added the compare feature in the Category pattern and they also provide Comparing of the product side by side which give us the Idea of Flow

Requirement for the feature:

1. User-friendly interface: The comparison page should have a clear and intuitive interface that is easy for users to navigate and understand.
2. Accurate and up-to-date information: The information displayed on the comparison page should be accurate and up-to-date, including prices, availability, and hotel features.
3. Wide range of options: The comparison feature should allow users to compare a wide range of hotels to ensure they find the best option for their needs.
4. Customizable comparison criteria: Users should be able to select and compare hotels based on criteria that are important to them, such as Photo, Reviews and amenities.
5. Trustworthy customer reviews: User-generated content, such as customer reviews, should be trustworthy and validated by the hotel booking platform to ensure that users receive accurate and helpful information.

How its Going to help the Users:

1. Eases decision-making: By allowing users to compare hotels based on photos and reviews, it becomes easier for them to make informed decisions about which hotel to book.
2. Saves time: By providing a comparison list, users no longer need to switch between multiple hotel pages and compare information manually. This can save them time and effort.
3. Improves transparency: By providing access to photos and reviews, users can get a better sense of what each hotel is like and make more informed decisions. This can improve transparency and help users avoid disappointment with their bookings.
4. Enhances the booking experience: By providing a more comprehensive and user-friendly way to compare hotels, the feature enhances the overall booking experience for users and makes it more enjoyable.

How its helping the Business:

Implementing a hotel comparison feature can help a business improve the user experience, increase conversions and revenue, gain a competitive advantage, and provide valuable insights and data.

Who are the target Users:

1. Business travelers: individuals who are traveling for work and need to find a hotel that meets their specific needs and preferences.
2. Families: people who are traveling with Their Family and need to find a hotel that is family-friendly and offers activities and amenities for kids.
3. Tourists: individuals who are visiting a new city or region and want to find the best hotel for their stay.
4. Budget travelers: individuals who are looking for affordable hotels that still meet their basic needs and preferences.

Assumptions to be taken before implementing:

1. Users have a specific set of criteria in mind when searching for a hotel: It is assumed that users have certain priorities when it comes to choosing a hotel, such as price, Photo and Reviews. The comparison tool would be designed with these priorities in mind.
2. Users will use the comparison tool to evaluate which hotel best meets their needs: It is assumed that users will use the comparison tool to compare different hotels and choose the one that best meets their needs based on the displayed information.
3. The comparison tool will be easy to use and understand for the average user: It is assumed that the comparison tool will be designed in a way that is intuitive and easy to use for the average user. It should not require any special knowledge or expertise to use effectively.
4. The comparison tool will be visually appealing and engaging: It is assumed that the comparison tool will be visually appealing and engaging, with a clear and attractive design that helps users easily compare different options.
5. There will be sufficient data available for comparison: It is assumed that there will be sufficient data available for comparison, such as prices, locations, amenities, and user reviews. This data will be used to help users make more informed decisions about which hotel is the best fit for their needs.

Some Use cases where users may require the Comparision Feature

1. User is looking for a hotel with a specific aesthetic, such as a modern or vintage style, and wants to compare photos of the interior and exterior of different hotels to find the best option for their taste.
2. User is interested in staying in a hotel with a particular type of room or view, such as a room with a balcony or a view of the ocean, and wants to compare photos of different hotels to find the best option.
3. User is interested in trying a new hotel and wants to compare reviews from previous guests to get an idea of the overall quality and experience of the hotel.
4. User is looking for a hotel with specific amenities or services, such as a spa or a restaurant, and wants to compare reviews from other guests who have used these amenities to see which hotels offer the best experience.
5. User is concerned about the cleanliness or safety of a hotel and wants to compare photos and reviews to ensure that they are staying in a clean and secure environment.

Where to Implement this feature?

Idea 1: Hotel Listing page

1. The user searches for hotels in a specific location and selects desired dates and other preferences.
2. A list of hotels that meet the user’s criteria, along with a summary of key features and pricing information.
3. User selects up to 2 hotels they want to compare and the Compare Selected Hotel button will appear which after tapping, it will take you to the new page
4. A user is taken to the Comparision page where user can see both selected hotel side by side with amenities, photos, and reviews.
5. Users Select the best hotel they find according to their need.

Idea 2: Hotel Detail page

1. The user begins by searching for hotels in a specific location and selecting desired dates and other preferences.
2. A list of hotels that meet the user’s criteria is presented, along with a summary of key features and pricing information.
3. The user then selects a specific hotel to view its amenities, photos, and reviews.
4. After scrolling down the hotel detail page, the user finds a “Quick Comparison” section where a few hotels are listed according to the selected hotel.
5. The user chooses a hotel from the “Quick Comparison” section to compare it to the first hotel they selected, ensuring that they don’t miss out on the best deal or hotel.
6. After comparing, the user selects the hotel that they find to be the best.

Merging Idea 1 and 2 Becauseit will Help user to get easily accessible and discoverable in Multiple page, Helping In users freedom and Engagement in the app.

Coming to the Wireframing

I begin with creating Lo-fidelity wireframes to check the functionality factor of the user flow and possible interactions within.With this strategy, I can solves the issue quickly and efficiently while moving from ambiguity to clarity.

Final Flow

UI Elements

As our team was working on the same app so 3 member were already made the Ui component Which requires. and below is some component which I made for the Comparision feature

Final UI Design

A comparison of the original and revised UI design with reasonings🔝

Is my solution really working?🤔

Now it’s time to test whether my solution is working or not. This is where our UXM community came to play. I conducted user testing by reaching out to individuals in the UXM community and gathering feedback through testing my prototype.

–Changes made after testing with real users👨‍💻.

After Completing the UI it was time to test with real users. so I went into the UX Community and tested it with the students. below are the result of what user felt while using

Changes made after testing with users

1. User on the hotel detail page, observes the Quick Compare card, and. Notice that the card has a limited number of hotels available for comparison. If the user wants to view more hotels that match the selected hotel, I have added a ‘See more’ function to the Quick Comparison card. This allows users to find more hotels that fit their selected criteria, ultimately helping them to spend more time on the app and make a more informed decision about which hotel to book. By providing more options and enhancing the user experience, we can improve engagement with the app and potentially increase customer satisfaction and loyalty.

Changes Made after Testing

2. The user Noticed the Number of room was not displayed, Which I Forgot to add, So this information was added to the page that all relevant information is readily available.

3. The user was experiencing confusion in identifying their selected hotel among the comparison options. To resolve this, the “Selected Hotel” label was introduced to clearly distinguish the chosen hotel from the others being compared

4. The users reported that the alignment of the location, review, and price on the hotel detail page was not intuitive. After conducting a review, the alignment was deemed appropriate and the price was adjusted to be left-aligned for consistency with the location and review information.

5. user was unable to Book hotel directly from Comparison page and had to go back to the hotel detail page to book the hotel so to avoid that and I have introduce this bar which will make user easily book the hotel

Conclusion:

I was able to complete the challenge within 72hrs but not in 48hrs due to some medical issue. it was a great experience to participate in this product challenge. It helped me to build my confidence in working with a team and being more open to sharing my thoughts and engaging in discussions.

Future Scope:

• If had more time then I would have done more research abt the Comparision Feature in depth and more about the E-Commerce platform Which using this feature
• I would have taken another testing with users to gather more info about the iterated design.

✅Key learning from the challenge:

• Within the constraints, it is critical to deliver results so, perfection is not the goal here.
• The quickest way to find out if your solution will work or not is to test it as soon as possible by creating a Minimum Viable Product.
• By breaking down the problem into smaller, more manageable parts, it becomes easier to understand and analyze the issue.
• Documentation keeps your process & progress in check and also works as a reminder.
• After completing this challenge, I felt more confident in working with team and more open to sharing thoughts and discussing.

Thank you for taking the time to read. I hope you enjoyed my 48 hours of problem-solving journey. Any feedback for me is very much welcomed.

Do you know, you can click on Clap and hold and it will help me give 50 claps

You can connect with me on Linked-in or you can mail me at ashokpujari3030@gmail.com.