UX CASE STUDY
Recovering Abandoned Sessions on Hotels.com
This case study takes you through my story of improving session restarts for Hotels.com within 48hrs.
“Prevention is better than cure!”… Is it?
Drop-offs happen in almost every stage of every other product. To tackle this problem, we product people use many analytical tools like Google Analytics, Hotjar, etc. Preventing a drop-off is a common solution that comes up in our minds, maybe we took “Prevention is better than cure” too seriously. In this case study, I’ll take you through my story of how I tried to cure drop-offs that already happened. Enjoy reading!
The Challenge
“Following these lengthy design processes for mock projects are all fine. But that’s not how it always works in most of the companies” — said our mentor, Anudeep.
After participating in the hackathon, I was confident about my design skills and was ready to tackle problems. But this phrase made me think twice about how it works in actual companies. There came up with an idea to work on a situation which is almost exactly how most of the tasks come to a product designer in real-time companies. The idea of this product design challenge is to build an MVP of a new feature for an existing app with a deadline attached.
Overview
Just like how a product manager asks to build a feature for the betterment of a business metric, we were also supposed to work on building a feature with a core idea for an existing app. The challenge sounded really cool and there was a twist too. This time it was not a team challenge, but not a solo challenge either. Every group was given one travel app to work on. The group should be working on one product, but the features to be added were to be selected individually. The point of doing it this way is to work on time management along with collaborating with our group mates.
My Challenge
Our group was given Hotels.com as the product to work on. There was a basket of ideas we can choose from to work on like,
“Allow users to compare itineraries”
“Allow users to add hotels to comparison list”
“Add feature to upsell package deals”
“Add a feature to cross-sell other services while checking out” etc.
I chose to go with the product theme of “session restart” and my core idea is to “Add a feature to make users pick up the flow from where they left in the previous session.”
My First Thoughts
Once the user leaves their previous session(drop-off), prevention is no more viable. And ofcourse, preventions can never make drop-offs ~ zero. Then comes our solutions of curing the drop-off in their next session. Allowing them to continue where they left decreases users’ time, efforts and can turnout into conversions thereby benefitting the business.
Now that I have everything I want, I moved to ChatGPT to diverge my ideas into everything I can. I asked ChatGPT every other thought which crosses my mind to get a better understanding of the product, its users, the core idea, etc. A prompt was given to help us get started with our problem statement brief, and there goes the AI magic.
The Prompt
Imagine I am a product designer at Hotels.com
Write a one-pager product design problem statement brief on the idea of: Add a feature to make user pick up the flow from where they left in the previous session
Use the following format and give examples at each section:
1. Company Name
2. Feature name
3. Context
4. Core idea of the feature
5. Impact on business metrics
6. How it helps users
7. Constraints
8. Assumption to be taken before hand
The PS Brief
Here goes the Problem Statement Brief given by ChatGPT and it was spot on to get started.
Product: Hotels.com
Context: Hotels.com is an online platform that allows users to search and book hotel rooms. Currently, users are required to start their booking flow from the beginning each time they visit the website.
Core Idea: The core idea of this feature is to allow users to pick up where they left off in their previous booking session. This means that if a user starts the booking flow but does not complete it, they will have the option to continue their booking flow from the point where they left off when they return to the website.
Impact on business metrics: This feature has the potential to improve booking conversion metrics by reducing friction in the booking process. It can also improve customer satisfaction by making the booking process more convenient and efficient.
How it Helps Users: This feature helps users by saving them time and effort when booking a hotel room. It reduces the need for them to re-enter their information and search criteria, which can be especially useful for users who have complex booking requirements or are booking for multiple people.
Assumptions:
- People would like to come back to the previous flow after dropping off because- they want to switch from mobile to desktop or vice-versa, re-check the booking price, entered wrong booking details, entered wrong search input fields, and accidental drop off.
- The app is capable of storing the users’ behavior and using it in their next session, prompting them to continue their previous session flow.
The Existing Flow
The flow was quite simple at my first glance. User will have to search for a destination, add travel dates and traveller details to start off. Then they can choose from the search results using list view or map view. Then select a room in their desired hotel and securely checkout after payment.
Defining Use Cases
There are many steps where users can drop-off through the hotel booking flow. To simplify the possibilities of dropping-off, I decided to divide the flow into smaller sections. It would help us in narrowing down the use cases and also providing personalized solutions to each one of them.
- Search Section- Users who entered their search preferences and discontinued anywhere after reaching search results screen.
- Hotel Detail Section- Users who browsed Hotels and discontinued anywhere after reaching Hotel Detail screens.
- Checkout Section- Users who started filling their travel details for Hotel booking and discontinued anywhere after reaching the Booking Checkout screen.
Now I can design different solutions for users who dropped-off in each of these sections, helping them to continue their previous abandoned flow.
Time for Solutions
Use Case- Abandoned after Search Section.
- Existing Screen- Users will have to fill the input fields every other time, despite having filled their preferences and searched hotels in their previous session.
- Revamped Screen- Giving the details of their previous searches as horizontal scrolling cards, helping the users to jump unto their preferred search results with just one tap.
Use Case- Abandoned after Product Section.
- Existing Screen- The only way to find personalized hotels for a user is to fill the input fields and search for their destinations every other time they open the app.
- Revamped Screen- Allowing the user to jump back onto the hotels that they viewed in their previous sessions.
- Helping the users to continue their search that they looked for in their previous sessions, in-turn decreases session length.
Use Case- Abandoned Checkout Section.
- Existing Screen- There’s no signifier showing that there was a discontinued attempt of hotel booking in the user’s previous sessions.
- Revamped Screen- Showing unfinished bookings in the Hotel detail page signifies that the user has shown interest towards this hotel in his previous sessions. This helps in increase in conversions and also decreases the session length.
Use Case- Abandoned Checkout Section.
- Existing Screen- Users will continue from the regular Home screen, despite reaching the checkout page in their previous session.
- Reminding the user about their unfinished checkout in their previous session right on the home page for the next session.
- Added a pop-up on the home screen, giving more emphasis on the unfinished checkout in the next session.
- Freedom to edit the travel details, assuming the reason of abandoning the checkout is related to some errors in them.
- A clear CTA saying “Continue Booking” to help the user get back to the checkout screen from their previous session.
Here’s my Figma Prototype-
Changes made after Usability Testing
Search Screen
- Changed the section title to “Previously Searched” as users weren’t able to make it clear with the previous title.
- Users were expecting it to work more like editable fields, but not like cards. I also found out that the cards weren’t following the existing cards’ layout on the product. So I decided to match it with the existing design system.
Home Screen
- Changed the title of previous searches section in the home screen also, to make it very clear and understandable to the users.
- The cards design has also been changed to follow the design system of the product so that it maintains consistency throughout the product.
Home Screen Pop-up
- Users didn’t understand why this pop-up was being shown at the start of the flow. My solution was to make the pop-up title convey about discontinuation while booking a hotel in the previous session.
- The font size has been increased to make the readability better.
- Room details were being repeated in the same pop-up. So I’ve replaced it with an element creating a sense of urgency.
Now comes the process
The Design process used for this challenge was a very non-textbook approach. I was given a feature to add onto the booking flow of Hotels.com but I wasn’t sure what exactly session restarts meant. ChatGPT gave a good hand in understanding every other doubt which came across.
After getting a clear understanding on drop-offs and the reasons behind them, I decided to go ahead with Competitor Analysis. The reasons for drop-offs can’t exactly be documented because they are quite many. But do we really need the reasons to cure drop-offs?
Competitor Analysis
I started to checkout Direct competitor apps like Agoda, MakeMyTrip, and Yatra. I was looking for sections in their screen where user can directly jump back to where they left in their previous session. ChatGPT also gave me some examples of where this feature is used.
- Netflix and Amazon helping users to continue watching their unfinished movies.
- E-commerce websites like Amazon and Myntra helping their users to continue shopping for a product or brand.
- Wynk Music having recently played section helping their users to continue listening to the song where they left.
I collected some screenshots from direct and indirect competitors, and made a reference library. The idea was to get inspired and see what I can do for the Booking flow of Hotels.com
How to use them?
Every competitor has their own way of allowing users to get back to their previous session. Some look for higher session lengths, some look for more conversions. And while trying to understand the solutions they made, I found that there can be multiple drop-off points by the user. There can also be multiple steps where we can suggest the user to get their previous drop-off point.
That’s when things got really complicated. For this to be clear and crisp, I had to define use cases and then define solutions for them. I had to allow users to get back to the screen where they left in their previous session. For this to be possible, I should define use cases based on where they dropped-off in their previous session.
Breaking down the Booking Flow
So, to define use cases based on the position of users’ drop-off, I had to divide the flow into smaller sections. Broadly, the booking flow consisted of 3 steps which are Search Section, Hotel Details Section, Checkout Section.
- Search Section- I considered search and search results screens to be in this section. If the user drops-off after reaching the search results screen, we can use their search data and help them to continue from the search results screen in their next sessions.
- Hotel Detail Section- I considered hotel detail screen to be in this section. If the user drops-off after checking some hotels, we can use that information and help them to get back to their previously viewed hotels in the next sessions.
- Checkout Section- This flow consists of Room selection and Checkout screens. If the user drops-off anywhere after reaching the Checkout screen, we can use that information to help them continue booking in their next session.
Use Case based Solutioning
Now that I have divided the flow and defined use cases, it was a bit clear about how and where can we help the user to get back to their previous sessions. The bigger idea was to allow the user to jump to that screen where he left in the previous session. And this can be done from anywhere before that screen in the booking flow. And this simple formula helped in creating the chain of skipping steps, which in-turn helps in reaching the checkout page faster.
At the beginning, I wrote a list of solutions that can help the user get back to where he left. And then, I started making rough sketches on the apps’ screenshots which I took to understand the Booking Flow. They turned out something like these.
Building UI
And then I continued to start building the solutions. For that to be possible and easy, I started making a component library that has all the icons, menus, and cards etc. Building components and a library has been one of my favorite tasks of the whole project. Here it is-
Later, I quickly started using them and built the UI screens. I also made a prototype out of my solutions, so that it would be helpful for users during Usability Testing.
Abandoned Search Section-
A user drops-off at or after the Search Results screen while searching for hotels. In his next session, giving a “Previously Searched” option on the home screen would help the user get a hotels list of his choice, that he searched for in his previous sessions. We can suggest this feature in the search screen also, which can help in decreasing users’ tasks and can also fasten the search process.
Abandoned Hotel Detail Section-
A user drops-off at the Hotel Detail screen while booking a hotel. In his next session, giving a “Recently viewed hotels” option on the home screen would help the user to get back to the hotel of his choice, that he viewed in his previous sessions. In this way we can again fasten the hotel selection process and can also expect some conversions from this.
Abandoned in Checkout section-
A user drops-off in the checkout screen while booking a hotel. I considered dropping-off at the checkout screen as a major setback. In his next session, we can help him get back to his checkout screen right from different sections of the Booking Flow.
- Home Screen- So, giving an option to continue their unfinished booking in the home screen itself, would remind the user about his previous session and could turn into a possible conversion.
- Session Restart- Also adding a pop-up about his discontinued booking right at the start of his next session could help the user to finish his booking. It would also help the business with more conversions.
- Hotel Detail screen- When a user reaches that respective hotel detail screen, we can remind him about his unfinished booking in one of his previous sessions. This could give a feeling of trust and also fasten the booking process.
Usability Testing
As the time was going down, I was going a bit behind from the proposed timeline. So I had to swap the conventional Usability Testing with Comprehension based Usability Testing. It is a quicker version of Usability Testing, which is again used when there is a tough deadline. It helps us find smaller issues with the least time taken.
I tested my prototype with 3 random strangers from the UXM community. It goes with asking the users to think out loud about what they can understand in the screens. When the user goes through the screens from top to bottom, and explains his understanding of the design, it gives us a clear picture of what needs to be revamped. Users had many questions to ask, as they were also quite curious about what was happening in the prototype. I wanted to answer all of their doubts in the end of each screen, as I didn’t want to impose my bias into their thought process while testing.
You can see the changes I made to the solutions over here- Usability Testing
Future Scope
There’s plenty of playing space in Hotels.com and if I was given more time, I would’ve started adding up features that my friends were working on. I would also have evaluated the existing Booking Flow and see if there needs to be any changes made for the betterment of certain business metrics. I would also have started building a design system, to have all the UI elements contained under one place.
Learnings
- One big learning was to document things as they go on during the project. It made the writing of this case study easier.
- Building a component library was something which I learnt recently, and it was quite exciting to put my hands onto building a real one.
- Sticking to timelines was the goal when I started, but with time I fell behind and iterating the process to meet the deadlines effectively was something which hit really well.
Thank you for staying with me down till here. Really appreciate it.
I hope you enjoyed my story of helping the users and business of Hotels.com. You’re feedback is very much appreciated. I will soon be back with another story coming up.
Till then, Alvida!
You can reach me out at,
EMail- akshithdzs@gmail.com
Linkedin Profile- Click here
