Product Design Challenge

UX Case Study: An Attempt to Increase Bookings and Customer Loyalty for FabHotels

In this case study, take a close look at the work done to develop a new feature for FabHotels in an attempt to impact FabHotel’s business.

Parul Patnaik
UXM Community

--

When was the last time you planned a vacation? Do you remember scrolling through endless Instagram feeds, watching YouTube vlogs, and carefully noting where your favorite influencer stayed and visited? Looking for inspiration, recommendations, and a sense of what’s worth your time and money. But what if I told you that instead of going through all this ordeal, you could choose a curated itinerary by these top influencers, tailored to your interests and preferences, all in one place? Wouldn’t that be so cool?

The goal of this Product Design Challenge was to conceptulize and design a feature that not only solves the above problem and benefits the users, but also aligns with the company’s business goals.

Before we deep-dive into the ins and outs of the project, I would like to thank my mentor, Anudeep Ayyagari (aka UX Anudeep) for conceptualising and conducting the challenge and guiding me throughout the project. I am also grateful to the volunteers from the UXM Community who assisted with the project’s execution.

⏳Project Overview

The project was a 48-hour design sprint challenge where a group of 6 individuals were tasked with designing a new feature for FabHotels, a leading hotel booking app. The participants were given the option to work on any problem statement they wished but had no say over choosing the product. The team worked individually on separate problem statements but collaborated and shared feedback during the course of the challenge.

I decided to work on “Influencer Itineraries and Travel Tips”. This piqued my interest, especially since I had never used a feature like this before, and I was intrigued by how a collaboration between a social media influencer and a hotel booking app could be made possible.

🌠 Using AI

Ahem Ahem, yes I used “AI”! With AI creating waves in the design world, I dove headfirst into it! I fully embraced the future by utilizing the capabilities of OpenAI’s ChatGPT throughout this project. With its assistance, I was able to craft a well-defined problem statement and make more informed decisions along the way.

🎯 Problem Statement

To design a feature for FabHotels that allows users to browse and book pre-planned trips and travel experiences created by influencers, providing recommendations for hotels, activities, and local attractions, in order to increase customer loyalty, bookings, and revenue for the company.

📌 Target Users

The target users for this project are individuals who are planning a trip and looking for curated travel itineraries and tips from experienced travel influencers they follow and trust. These users are looking for unique and personalized travel experiences and value the recommendations of influencers in their decision-making process.

📍 Hypotheses for Improving FabHotels with Influencer Itineraries & Travel Tips:

  1. It is assumed by providing pre-planned trips and travel experiences created by influencers on the FabHotels app will help users in making better and easier decisions to plan their trips and further increase customer loyalty because we know that many travelers rely on the recommendations and experiences of influencers when planning their trips.
  2. It is assumed by providing pre-planned trips and travel experiences created by influencers on the FabHotels app will increase the user’s willingness to pay for the service and hence increase bookings because we know they trust the influencer’s recommendations.

🎉Let’s first come to the good part: The Solutions!

Here’s an overview of the final design before we get to the design processes followed.

The Designed Flow:

On the home page, search for a location (e.g. Goa) → land on a list of hotels in Goa → click on “Check-out Itineraries by your Top Influencers” → explore itineraries created by various influencers for Goa → select an itinerary → view the itinerary and suggested activities → Customize and book your own Package!

Original & Redesigned Screen Side By Side
  1. Assuming that a traveler who’s planning a trip already has a place in mind and maybe exploring the best options to be able to have a good trip. Hence the decision to explore influencer’s itinerary was kept at this stage of the flow after they’ve already searched for a location.
  2. “Check-out Itineraries by your Top Influencers”, with a clear call-to-action to entice users to check out the feature. The title is designed to be attention-grabbing, sparking users’ curiosity and encouraging them to discover the potential of this feature. Also clear and to the point, the title effectively communicates the purpose of the feature, and sets the right context for the reader.
Explore Influencer’s Itineraries

After clicking on the “The check-out Itineraries by your Top Influencers” CTA, users land on the screen above 👆 (new screen introduced). Users can explore popular itineraries by top influencers, check out recommended hotels, etc.

  1. Picture of the influencer: Using 50% of the card to showcase an image of the influencer can help to quickly grab the user’s attention and provide a visual context for the content of the card.
  2. Wishlist button: Helps users save and organize their preferred options. This makes it easy for users to access and compare their options when they’re ready to book.
  3. View Package: Adding a “View Package” CTA button on the package card can serve as an additional visual cue for users to access more detailed information about the package. Even though the card itself will be clickable, having a clearly labeled CTA button can make it more obvious to users that they can access more information about the package, which can encourage them to take the next step and view the package details.
  4. Rates: It allows users to compare the package to other similar packages, and make a more informed decision based on budget.
  5. Recommendations: In addition to exploring itineraries, the screen could also feature top Fabhotel recommendations from these Influencers, which contributes to hotel promotion and helps users find the right hotel that they can trust if they are not looking for itineraries/packages.
Itinerary Plan → Package Booking

Itinerary Page

This page contains a day-by-day itinerary personally curated by a travel influencer. Users can view detailed information about the influencer’s trip planning, including their choice of accommodations and recommended local attractions, as well as valuable tips and hacks for making the most of the trip. This enables users to fully evaluate the experience they can expect from the itinerary and make an informed decision before booking.

  1. Photo carousel: Showing a collection of images for the trip on the itinerary page helps to provide visual context and inspiration for the user, and can also help to build excitement and interest in the package.
  2. Influencer profile picture: Adding a profile picture and details about the travel influencer can provide social proof and validation to users that the itinerary is legitimate and recommended by a reputable person.
  3. Day-wise itinerary, activities, travel tips, hotels, etc.
  4. Book Now CTA that takes you to the package detail page. It allows users to easily take the next step towards booking their package. Additionally, having a clear and prominent “Book Now” button can also serve as a reminder to users that they can book their package, which can help to encourage conversions.

Booking the Package:

Alright, we’ve made it to the final page of our journey! This is the page where the users take the crucial final decisions, they can select and customize the package to their specific needs. Having this additional page after showing the travel itinerary was important because it allows better decision-making by giving users the time and space to assess their options before making the purchase. The page before was all about the travel influencer’s journey, giving the users perspective and direction of how their journey could turn out.

⚡ An important design principle that supports the addition of a separate booking page is “progressive disclosure”, which is the practice of revealing information to users in stages, rather than overwhelming them with too much information at once. By breaking up the user journey into separate pages for viewing the itinerary and booking the package, I am allowing users to process the information and make informed decisions before committing to the purchase. This approach guides users through the process and reducing the likelihood of confusion or abandonment.

5. Highlighting key features included in the package, such as free cancellation, transportation, meals, and trip duration, makes it easy for travelers to see the value of the package and make an informed decision.

6. Other package details: more flexibility in the options available to the user, allowing them to customize their package according to their needs and preferences within the set itinerary.

7. Final Price & Pay Now: Time to seal the deal! User has now picked their perfect itinerary and now it’s time to make it official.

Explore the Prototype

Detailed Design Process

Now that we’ve explored the solutions, let’s dive into the design journey that led us to it.

🧐 Understanding FabHotels

The very first step, before starting the challenge was to traverse the app thoroughly and understand the app and its functionalities. These were some of the key insights I could gather:

  • Fabhotels is a budget hotel chain in India, with a focus on providing affordable, high-quality accommodations for travelers. They aim to make it easy and convenient for travelers to book and manage their hotel stays through their online booking.
  • Their target audience is primarily budget-conscious travelers who are looking for comfortable, clean, and convenient lodging options.
  • While FabHotels offers a “Discover” page for users to explore and gather inspiration for trip planning through several blogs and articles, they currently do not have the capability to offer trip packages.

A potential issue with this flow is that after a user has finished exploring and reading the blog, they are required to return to the home page and start their hotel search over again. This could lead to a high drop-off rate and potentially negatively impact conversion rates.

👇 For example, in the flow below after exploring and discovering a travel plan on Rajasthan → we click on ‘book now’ → get back to the home page → and are required to begin our search again.

📚 Desk Research

As part of my desk research, I came across an article by Morning Consult which highlighted the growing trend of young adults relying on social media influencers for travel recommendations. The article emphasized the impact of influencers in promoting travel destinations and shaping consumer travel decisions, providing valuable insights for my study.

FabHotels targets to provide services on a budget, their largest age group of customers are 25–34-year-olds (https://www.similarweb.com/website/fabhotels.com/#geography), which fall under the bracket of GenZs & Millenials. A potential collaboration with influencers could prove to be highly beneficial for both FabHotels and its users.

💡 Ideation & Wireframing

Coming to ideating and wireframing my ideas,

  • I made the decision to offer itineraries and travel packages after the user begins their search for a destination.
  • The idea is that most travelers already have a place in mind before they begin looking for accommodations and travel packages.
  • Incorporating a dedicated tab for itineraries and travel packages on the hotel listing page ensures that users will have easy access to this service, increasing the likelihood of them exploring and utilizing it if they feel uncertain about their travel plans.

👇 I created a low-fidelity wireframe to visually outline the basic flow of my design concept-

🎨 UI Design

With all my research done and dusted, it was finally time to get my hands dirty and start designing those sleek UI screens!

For this, we actively collaborated in our groups. I sought help and learned from my group members who had more experience with UI design. My team and I worked together to create a common style guide and also helped each other with the prototyping process.

Style Guide
Component Library

⏱ Since there was a pressure of performing within the time constraints, I used screenshots from the app wherever possible. But all the interactive elements of the prototype and the newly introduced screens were made from scratch.

🔎Usability Testing + Iterations

Now with my prototype for the first iteration ready, I went ahead and conducted comprehensive usability testing with 3 participants to validate if my design worked.

Based on the insights gathered through testing, I made several iterations on my design to address the key issues and improve the user experience. Here’s a breakdown of how I applied these insights to my design:

Conclusion

And just like that, we’ve reached the end of the most exciting 48 hours! This experience was truly exhilarating, with an overwhelming amount of learnings. Although there were certainly challenges along the way, the feeling of crossing the finish line is truly satisfying. Now, I’m ready to tackle the next challenge head-on!

As I conclude, here’s a brief on the future scope and key learnings for the project,

🔮 Future Scope

I needed to narrow down my scope for this project because there's only so much that I can achieve in 48hrs, but if I had the opportunity to work on this further in the future these are some of the things I’d like to incorporate;

  • Work more on the user journey, and establish a connection between the “discover” feature and travel itineraries.
  • Work more on how the packages would be customized.
  • Design a more seamless UI and prototype.

✨ Key learnings

  1. The importance of meeting deadlines and knowing when to stop working on a design.
  2. The value of team collaboration.
  3. The significance of understanding and defining project constraints early on, and sticking to them.
  4. The realization that the design thinking process is non-linear and requires iterative problem-solving, rather than simply following a set of predetermined steps.

Back to Top 🔼

Thank you for reading 🌼

Feel free to leave your feedback in the comments section.

Connect with me:

--

--