Using Reinforcement Communication to Emphasize the Exclusive aspects of the User Experience
Who doesn’t like an exclusive offer or discount which is just meant for you? In this project, I have introduced a new feature to a travel booking app to emphasize exclusivity to impact user engagement and retention.
Table of Contents
Overview
- of the Challenge
- of the Product
- Problem Statement
- Assumptions for the new feature
- Current Flow & Final Solution
Who are these users and how this feature will help them and the business?
Diving deep into understanding the feature
Moving toward the solution
Building the screens
Time to get some validation: Usability Testing
The Use Case that was ultimately discarded!
Is there something more I could have done?
Key Learnings
Overview of the Challenge
This short case study is an outcome of a 48-hour-long Product Design Challenge. I have to thank our mentor UX Anudeep (Anudeep Ayyagri) for giving us the opportunity to improve our Product Thinking as well as UI skills.
But there was something different about this challenge.
(Spoiler alert)
We used ChatGPT to generate our own problem statements!
Constraint during the challenge-
- Time — We had only 48 hours to complete this challenge.
We had to build an MVP (Minimum Viable Product) and do whatever it takes to bring some validation that the solution would work.
Overview of the Product
- Skyscanner is a travel search website and app that allows users to compare prices on flights, hotels, and rental cars.
- It allows users to search for and compare deals on travel arrangements from various providers, such as airlines, travel agencies, and online booking sites.
- Skyscanner’s business model is based on generating revenue from advertising and commissions on bookings made through its platform.
Problem Statement
My Problem Statement was: “Add reinforcement communication to Emphasize exclusivity for the users”
One Pager Brief from ChatGPT-
I prompted ChatGPT to create a one-pager product design problem statement brief on the idea of Emphasis Exclusivity. The prompt included pointers about Context, Core Idea of the Feature, Constraints, etc.
- Context: Skyscanner is a travel booking app that helps users find and compare flights, hotels, and rental cars. Many users turn to Skyscanner for the best deals on travel, but sometimes the deals available on Skyscanner may not be the most exclusive or unique.
- Core Idea of the Feature: The core idea of the “Exclusive Deals” feature is to highlight special, limited-time offers that are only available to Skyscanner users. These deals could include discounts on flights, hotels, and rental cars that are not available elsewhere, or packages that combine several travel elements (e.g. flights, hotels, and activities) at a discounted price.
- Constraints: Some potential constraints include:
▪ Ensuring that the deals offered are actually exclusive and not available elsewhere.
▪ Limiting the number of deals available at any given time to maintain their exclusivity.
Why I selected this feature?
The simple answer is, that I found this feature interesting to work on. Since I was working on adding a new feature to the app, I wanted to explore all the different use cases and scenarios (regarding this feature) with as much less bias as possible. Also, doing this will help me to improve my product thinking skills.
Assumptions for the New Feature:
- Users are interested in saving money on their travel bookings
- Users value exclusivity and are willing to book through Skyscanner to access exclusive deals
Current Flow & the Final Solution
Current Flow:
Since the Skyscanner app has multiple features like flight bookings, car rental bookings, and hotel bookings, we were told to only focus on the hotel booking funnel for this challenge.
To start, I had to define what flow I had to work on, so I mapped two flows within the app for hotel booking flow.
👁🗨View the existing flow diagram
Flow 1— Home Screen→ Click on the ‘Hotels’ icon→ Search a location → Hotel Listing page → Select a Hotel from the list → Click on ‘Go to Site’ → Booking site of the provider opens up.
Flow 2 — Home Screen→ Click on the ‘Hotels’ icon→ Search a location → Hotel Listing page → Select a Hotel from the list →Go to ‘Book on Skyscanner section → Choose a room and click on ‘Select’ → Enter the details → Payment
I ended up choosing the second flow as it has the option to book a room on the Skyscanner app itself, it won’t take the users to the provider’s website for the booking.
Final Solution:
Take a look at the Final Redesign. Here I have tried to briefly explain what’s the purpose of these new elements on the screen.
👉 (To gain further insight into the reasoning behind designing the below screens, please see the results of the usability test)
For Screen 1:
Explanation of Pointer 1: The section heading “Only at Skyscanner” represents all the Hotels offering exclusive deals available.
Explanation of Pointer 2: Added a badge saying “Offer Price”. It can give users the idea that this price is an offer price.
Explanation of Pointer 3: A heading “Explore alternative choices” was added to differentiate the hotels offering exclusive deals from the rest of the hotels available.
For Screen 2:
Explanation of Pointer 1: A text is added with a time icon & timer to inform the users how much time this exclusive offer will be locked for the user.
Who are these users and how this feature will help them and the business?
Target Users:
My target users include Business travelers or working professionals who would require to travel very frequently.
🧠⚙ Assumption — Here I assumed that due to their nature of work, they need to travel very frequently like say 3 days a week (for example — working on-site or traveling to a different branch office). They also would be knowing the location they are traveling to.
Initially, I took the help of ChatGPT, to understand the different types of target users that could be possible for this feature. It gave me a list of target users.
I have mentioned some of them below-
- Leisure travelers: People who are planning vacations or leisure trips.
- Business travelers: People who are traveling for work or professional purposes.
- Solo travelers: People who are traveling alone.
- Groups of friends or family: People who are traveling in a group with friends or family members.
- Budget travelers: People who are looking for the best deals on travel.
🌗From the list, I scoped it down to only one type of target user (Business travelers or working professionals who would require to travel very frequently ) because of time constraints, and currently the app asks for the location first before searching for the hotels (which the last-minute travels would also do so…win-win)
Also, I found this problem interesting and wanted to build a solution for it.
How this feature will help —
the users?
The “Exclusive Deals” feature helps users save money on their travel bookings and potentially discover new travel destinations or experiences that they may not have considered before. It also provides users with a sense of exclusivity, as they are able to access deals that are not available anywhere else.
and the business?
This feature has the potential to increase user engagement and retention by providing a reason for users to return to the app regularly to check for new deals. It could also increase revenue by encouraging users to book travel through Skyscanner rather than using a competitor’s app.
Diving Deep into understanding the feature
🚀 Exploring:
Firstly, I wanted to understand how to emphasize exclusivity to the users and what are the different aspects of it. So I started putting down my thoughts based on what I know by using different apps.
Taking Inspiration:
Now, since we were told to consider only the hotel booking aspect of the app, I started exploring different competitor and indirect competitor apps to see how and in what places they were offering exclusive deals to their users.
Some of the apps which I looked at for inspiration —
- Meesho
- Myntra
- Agoda
- Expedia
After having an idea about how other products are emphasizing exclusivity in their apps, another aspect of the feature was -
What to offer as an Exclusive Deal?
To understand what are the different ways that could be used to offer an exclusive deal, I discussed it with my group members and they helped me to identify different options.
Exclusivity could be established by offering deals based on the location, or there could be custom offers, coupons, and exclusive discounts for the users.
These are some notes about the brainstorming we did about the options mentioned above —
🌗 Scoping Down:
After looking at different ways to implement this feature in the Skyscanner app, it was time to scope things down so that I could build a working solution within the given time constraint.
👉 I decided to offer exclusive deals for hotels based on the locations.
Why?
Based on the locations because users who are traveling last minute would know where they are traveling to. So after coming on the Skyscanner app, the first thing they would do is insert their location to search for the hotels
- According to an article provided by Google, the main reasons for bookings were business trips (58 percent). Many of these searches originated on mobile devices in the destination city.
☀ Article Link
👉 I decided to introduce discount prices as an exclusive offer for the specific rooms of the hotels.
Why?
For a few locations, there are hotels that have the option to book their Deluxe, Executive, and Premier rooms from the Skyscanner app (Book on Skyscanner). These rooms are priced higher than the regular rooms (because they are more comfortable and provide good amenities) so if the user can get a good deal on these types of rooms, they would consider booking these rooms at a discounted price.
The user doesn’t need to leave the app to book these rooms.
- According to an article provided by Google, users look for last-minute deals to save money and find a good bargain.
☀ Article Link
🕵️♀️Where to implement this feature?
To begin with, I started analyzing different places in the hotel booking flow to integrate this feature. Here I’ve written down some pointers considering the use case and why it will or won’t work.
Use Case: Users traveling last minute, looking for booking a room.
1. On the Homescreen:
Giving the users an opportunity to see the exclusive deals on the Homepage itself. For example — ‘Agoda’ has a banner on the homepage regarding the deals on the hotels.
Advantage: Users will have a place where they can see all the exclusive deals being offered to them in all the different locations.
Disadvantage: This would lead to one extra step in the hotel booking flow as they will get routed to a different page where they could see all the offers and then search for their particular location.2. On the Hotel Listing and Detail Page:
Advantage: It won’t disrupt the existing flow of booking a hotel on the app. Users won’t have to take any extra steps to see the exclusive deals on the hotels.
Disadvantage: Since these exclusive deals are being offered in specific locations, users might not see these deals for every location they search for
👉Finally, I took the decision to integrate the new feature into Hotel Listing and Hotel Detail page because I thought that I could build the solution for it within the time constraints I had.
👩💻Moving towards the solution
Rough Ideas:
It was time to visualize how the solution would look so for that, I used pen and paper to quickly draw all the ideas that were coming into my mind.
I was keeping two user flows in my mind while coming up with solutions. It gave me clarity about how I’m going to implement this feature and how the flow would look like —
Final Idea:
Use Case 1: When there are exclusive deals available on the hotels for the location user searched for
What will happen? On the Hotel Listing Page, a different section appears that shows all the hotels offer exclusive discounts for the rooms that could be booked on the Skyscanner app itself.Use Case 2: When there are no exclusive deals available on the hotels for the location user searched for
What will happen? An info message shows up which informs that user about the same and gives them the option to change their location or continue booking
📱 Building the Screens
Once I had my solution on paper, I started creating components that will be used in different places on the screens.
At this stage, I was falling behind on the timeline given to us so for the screens which did not have any changes, I used app screenshots in the prototype created for the usability testing.
Comparison of the Original and Revamped UI Screens with Reasonings
Solution 1.0
For Revamped Screen: (Hotel Listing page)
[Use Case1: When exclusive offers are available on the hotel]
🧠⚙Assumptions:
- that the users who book hotels at last minute will like to save time and book quickly but at the same time looks for offers.
- if the exclusive offers are presented to users first they will go and check those offers first instead of exploring other hotel offers, offered on the specific locations.
Explanation of Pointer 1: To make the user discover offers for them I have given a heading that can help them to understand that they are exclusive offers present. This section heading “Only at Skyscanner” represents all the Hotels offering exclusive deals available. The user can go through different offers.
Inspiration: In competitor apps, if any brand or deals are exclusive to the app, they try to convey it in a similar manner. In my design, I have tried to engage the user’s attention in the same way and different background color suggest that these hotels are different from the rest.
Explanation of Pointer 2: To further differentiate exclusive offers from the already present discounts, I have added a badge saying “Offer Price”. Also, “-63% TODAY” is placed at the top left so that it could be easy for the user to discover so it can give them the idea that this price is an offer price.
Inspiration: The competitor’s app tries to emphasize that there is a limited-time offer deal on the hotels using the badges that intrigues the user to check what is the special discount.
For Revamped Screen: (Hotel Detail page)
Explanation of Pointer 1: When the user lands on the hotel detail screen after seeing the deal price, they are likely to be interested in knowing more about the exclusive offer.
So keeping this in mind the placement of the “Book on Skyscanner” section was kept on top of the “lowest price” section so that the users can pay attention to it and decide for themselves if they want to book a room that can be booked through the app itself.Explanation of Pointer 2: The user would want to check the specific discount or deal they are receiving for this room while reviewing the details so they can determine whether it is advantageous for them or not. The word “offer price” was utilized with a black backdrop and positioned close to the “select” button so that the user can easily find what they are looking for.
For Revamped Screen: (Hotel Listing page)
[Use Case2: When exclusive offers are not available on the hotel]
🧠⚙Assumptions:
- It could be possible that certain locations are not offering any exclusive deals at the given time for the hotel booking.
- If the exclusive offers are NOT provided on the hotels for certain locations upon searching the users should know about it and have the choice to search again or continue with the same results
Explanation of Pointer 1: In order to convey the message to the users that no exclusive offers are currently present for the location, the message needs to be more prominent and easily discoverable to them
so I thought of creating a pop-up which is commonly used in several apps in order to inform the users. After reading the message, the users should have the freedom to decide what to do next so for that I added two choices
“Continue booking” where the user can choose to continue looking for hotel listings regardless of any exclusive offers.
“Choose another location” will take the users back to the Search page
Since it is an informative message, I used an information icon at the top in red color.
Time to get some validation: Usability Testing
To test whether my solution is working or not, I decided to do a quick comprehension-based usability test. I wanted to check if people are able to understand the context of the new design I made.
So after 3 google meet calls and 2.5 hours later, I got some valuable feedback along with the validation that this feature will help or motivate them to book the hotel
I’m again taking the help of the screens to explain clearly what needed to be changed after the usability test and why
Here it goes —
🔵User’s Feedback on Hotel Listing Page:
[Use Case1: When exclusive offers are available on the hotel]
Explanation of Blue Pointer
▶ Users were not able to clearly differentiate between the two sections. They thought that it was a part of the same heading “Only on Scanner”. They said everything seems to be “mixed up” with each other.
▶ The users were confused and they asked “Why there are two different types of scrolling here?”
▶ Users were able to identify/discover the feature but were not sure what to do next as it took them time to notice the difference.
🟢 Updated UI After Feedback:
Explanation of Green Pointers
▶ Adding a border at the bottom of the section will help the user to differentiate between the two sections and also adding a breathing space will make it more noticeable.
▶ Added a heading “Explore alternative choices” to help the user understand there are two different sets of Hotel options present in the listing.
🔵User’s Feedback on Hotel Detail Page:
Explanation of Blue Pointer
▶ Users were ignoring the “Book on Skyscanner” section when they saw the “lowest price “ for 1 night and they were asking will they have the same offer in the below section or both are different.
▶ They were not able to recognize what was the offer price and where it was present.
🟢 Updated UI After Feedback:
Explanation of Green Pointer
▶ Suppose that in the future the price of the deluxe room is greater than the
lowest price, why would the user want to go for the costly price as the app is already showing them the lowest price for 1 night which could be very comfortable for them.
Also, the user might feel restricted by showing the ‘book on Skycanner’ option first as they will not have the freedom to check the option with which they are comfortable first.So, I revert back to the original flow while considering that the hotels that avail of the option “book on Skyscanner” will already be listed for exclusive offers.
▶ A text is added with a time icon & timer to inform the users how much time this exclusive offer will be locked for the user. To make the exclusive offer price more discoverable to the users, at the top of the “Book on Skyscanner” section, a dynamic green/yellow/red background will be changing as time decreases.
The Use Case that was ultimately discarded!
[Use Case2: When exclusive offers are not available on the hotel]
(I decided to remove this use case from consideration. Read on to understand why)
🔵User’s Feedback on Deals not available pop-up message:
- Users were very confused here because they were not getting the context of the message. They understood what the message was saying but it was difficult for them to understand from where it was coming.
- Some users felt that if the deal is not available then they will have to book the hotel for the full price.
- The two buttons on the pop-up card were not noticed by the users.
What was the reason for me not continuing to consider the second use case?
- Reading users’ feedback got me thinking that when other apps like Amazon or Myntra have sales like Big Billion Sale or End Of Reason Sale (which are exclusive to their own apps) they don’t give a special pop-up message saying there are no active deals or discounts available, the sale just ends quietly.
- In my case, giving the pop-up that there are no active deals available can lead the users to think that they are not getting any kind of discounts on the hotel bookings which is totally opposite of what this app aims for. This could lead to users dropping off from the app and start looking for other options.
- It is serving as an unnecessary reminder as the users can still look for other hotels to avail the ‘lowest price for 1 night’ deal which could be a comfortable option for some users.
So, I took a decision to remove this use case altogether as it did not get validated.
=============
⚡ View how the redesign looks like after usability test — Final Solution
=============
Below is the prototype version of the final solution 👇
Is there something more I could have done?
Yes, if I had more time, I’d have —
- looked for other use cases where I could have introduced this new feature.
- researched more about what could be done to give the users of Skyscanners a sense of exclusivity.
- For the use case which was not validated, A different approach — Assuming, that this feature gets implemented in the future and users start using it, so what if the users get used to availing the exclusive discounts on specific hotel rooms (based on the location) and it could be possible that they might get frustrated if they don’t understand why for some locations they are not getting exclusive deals anymore.
Key Learnings
- Delivery of results is important within the given constraints.
- The easiest way to know or validate if your solution will work or not is to get it tested as soon as possible by building the Minimum Viable Product.
- Components, Auto layout are your best friends if you want to do things quickly and efficiently.
- After this challenge, I got a little more confident in using auto layouts and components and also creating horizontal scrolling elements. Practice makes it perfect.
I really enjoyed sharing my experience and learnings of this Product Design Challenge with you. Thank You for stopping by and giving your valuable time to read it.
I would appreciate any kind of feedback so please do let me know.
I can be reached at the following platforms-
LinkedIn
Email: smita.smitasri@gmail.com
#studentforlife
