Upselling services while booking the hotel in the TripAdvisor app

This is a 48-hour product design challenge

👀Overview

I recently participated in a 48-hour product design challenge organized by the UXM community. I worked on a project to introduce upselling services while booking a hotel in the Trip Advisor app.

During this short period, we had to research, ideate, and build a UI based on our assumptions, test it with the users, iterate based on their feedback, and finalize the design.

Short overview of product design challenge

We were divided into groups, and each group was given a list of problem statements. In the group, we were supposed to work on different problem statements for the same app. Our group had to work on the TripAdvisor app, and I decided to work on upselling package deals.

🎯Problem statement

We used Chatgpt to create a problem statement brief. We used prompts that would communicate the core idea of the feature, how it would affect the business metric, and how it would benefit the users.

About the app: TripAdvisor

TripAdvisor is a well-known travel review and booking website. It allows users to search for and book hotels, restaurants, flights, and activities. It also provides user-generated reviews, ratings, and photos to help users make informed decisions about their travel plans.

Feature name: Upselling services while booking a hotel

The core idea of the feature: The core idea is to present users with personalized package deals and additional services during the hotel booking process. These package deals would be curated based on the user’s travel preferences and itinerary. By upselling these package deals to users, Trip Advisor can help users save money and enhance their travel experiences while increasing revenue for the company.

Impact on business metrics: Upselling package deals would have a positive impact on business metrics, including revenue, customer acquisition, and customer retention.

How it helps users: It saves them money and time by presenting them with personalized deals and additional services tailored to their preferences. By taking advantage of the other services, users can optimize their booking experience and get more value for their money.

Final Solutions

Let’s understand the current flow of the app for booking hotel

Current app flow

1. After searching for the hotel in the required location, TripAdvisor would provide a list of hotels (TripAdvisor is for reviews but also has links to hotel booking websites and apps and gets a commission when a booking happens through their platform).

2. Here, you can find the comparison hotel prices from different sites

3. After clicking on the required hotel on a different site (here, the MakeMyTrip app), the hotel details and similar hotels are provided. After clicking on the necessary hotel, the details will be provided.

4. There are three different types of rooms to choose from. Select the required space, review the booking, and proceed with the payment.

5. During Review booking, hotel details, coupon code, booking for, and price details are asked.

Let’s compare the new design with the old design

Since TripAdvisor is for reviews and doesn’t have direct tie-ups with hotels, it has links to other hotel booking websites and apps and gets a commission when a booking happens through its platform. For booking the hotel, I used the MakeMyTrip app through TripAdvisor’s platform to add the new feature

Since the problem statement was to upsell the services, I thought of providing add-ons during the hotel booking checkout. So I mostly worked on the MakeMyTrip app's review booking page.

New design — Old design

1. Compressed the card, which previously provided information on booking details. The new design has a details accordion to expand the card if the user wants to check more information. The card’s design would give the hotel name, location, and number of booked rooms upfront. Removed hotel ratings and type of room booked from the previous design.
2. I introduced the new feature in the next section. This section provided a list of services for the user to add along with the room booking.
3. The user has the flexibility to add/remove the selected services.
4. The expansion of the card after clicking on the details, where the user can check the date and time of the room booked.

New design — Old design

5. In the coupon code, I highlighted the code and added the remove button since, in the previous design, the remove icon was not visible.

6. In the old design, the price information was listed above the discount code, and the page also had a field for the guest’s information. Because so many details were given and requested on the same page, the user would be overloaded. So I decided to have two pages, with the first one containing booking details, additional services, and a coupon code, and the second page containing user information and price details.

7. In the old design, price details were provided before the coupon code. This would need to be clarified for the user, whether the coupon code is added to the details or not. Henceforth, I decided to have the price details as the last section and also simplify the details so that the user could easily understand them.

Detailed design process

Let me walk you through the process that helped me arrive at the final solution.

Research

I selected upselling package deals from the list of problem statements when it was presented to us because:

1. This feature was new and challenging, and I saw a more incredible opportunity to learn new things.
2. When I researched more about this, I was amazed at how other apps (except hotel booking apps) integrated upselling features, and I believe that the hotel booking app itself ought to do the same.

Assumptions made beforehand:

1. One assumption is that users are interested in saving money and enhancing their booking experiences and are willing to consider package deals and additional services as a way to do so.
2. Another assumption is that users will be able to understand and use the feature quickly and that it will not cause any confusion or frustration.

The booking review page was where I worked on upselling services, so why?
To understand more about the features and capabilities already present in the TripAdvisor app, I started using it. The problem statement was difficult to comprehend at first. Because the problem statement called for upselling packages, I considered bundling services together and charging less. Later, I redesigned the idea of bundling more services with flight bookings, offering car service and hotel rooms at a lower cost than if I had to purchase them separately. I later made the decision to focus on upselling services while making a hotel reservation because I couldn’t find a flight booking option in the TripAdvisor app (accessible on the website).

Competitive Analysis

Since I wanted to work on upselling services during the hotel booking, I started to look into MakeMyTrip’s direct competitor app. I began to analyze the booking flows of Cleartrip, Goibibo, FabHotels, and Airbnb.

I found that these apps didn’t have upselling (add-on) features for hotel booking.

Ideation and Wireframe

Decisions I took when planning the feature:

~ Review booking page

1. I decided to provide additional services like customized rooms, customized food, pet service, tour guide to visit nearby places, hosting an event in the hotel, and so on, along with the room booking. The customization will help us to understand the user’s preferences.
2. An info icon was added to provide more information on the provided services. Users can click on add to avail of the recommended services.
3. Resized the hotel details card as the previous card consumed a lot of space. The current card shows the hotel name, location, and the number of rooms booked.
4. Since the preview page was very lengthy, I decided to have two pages, where the first page decided to show hotel details, additional book services, and coupons, and on the second page, the details of the user to whom the hotel is booking and also the price details.

Wireframe

I started doing paper sketches to add new features

Usability Testing and Iterations

After making the visuals for the feature, it was time to validate it with the users to know if they understood the upselling feature. So I decided to present my designs to three individuals from our UXM group to see whether they could understand them as I had anticipated.

I presented the screen to them and provided some background information about what they were viewing, such as information about the app and how they arrived at that specific screen.

Next, I asked them to discuss what they could see on the screen and their thoughts about it. Using the three users’ observations as a guide, I gathered feedback on my design and made improvements.

Solution 1

I initially thought providing offers or discounts could grab users’ attention. So I highlighted the discount on each service.

The feedback I received from the users is as follows:

• The users confused it as a coupon code and asked why the coupon code was placed twice.
• They felt the card provided was too lengthy.
• The information provided in the card was not perceived clearly.

After hearing this feedback, I tried my hands at the second iteration

Solution 2.O

Here I added an image of the room and the additional service so the user can understand it at a glance. Allowed users to add multiple services simultaneously, provided the total price after booking the service, and provided an accordion to get more info on the service.
The problem I identified was that the room price would have to be paid twice if I wanted to book two events. After working on this problem, I finally arrived at my final solution.

Conclusion

Finally, I managed to complete the product design challenge in 48 hours. Even though I faced a few challenges while working on this, completing the design on time was satisfying. I’m confident that this feature would have a good impact on TripAdvisor and the MakeMyTrip app’s growth if implemented.

Scope for the future

1. Different types of services can be provided based on the total number of people or total number of rooms booked.
2. The flow can be extended to get more information about the user after clicking on the service.

Key learnings

1. Efficient time management is crucial to make progress within the given timeframe.
2. Design iteration and refinement are important for continuous improvement.

And that’s a wrap!

I’m thankful for the UXM community for hosting a product design challenge.
Thank you for reading and sticking with me until the end. Feel free to leave your feedback.

Connect with me on LinkedIn😊