Creating a Travel planning experience for a Travel Booking app: Product design Case Study
Building a new travel planning feature in 48 hours
Table of content
📑 Problem statement
🎯 How did I go about selecting the business metrics to measure the impact of the feature?
📱 Comparing the existing UI with the Redesigned UI incorporating the feature
💎 Creating a design system to streamline the process of creating the UI
The process of arriving at a solution.
- 🤳 The use cases that I have identified and the process of selecting specific ones based on the available time and the reasons for choosing them.
- 🧩 Creating wireframes to have brief understanding of placement of elements
- 👥 Creating the Initial UI to test with the users
- 📋 User feedback to improve the final UI
- 🚀 Preparing the Final UI considering the feedback from the users.
⚡ Try using prototype your self
📑 Problem statement
“Tripadvisor” aims to improve the user experience of trip planning by addressing the pain points of excessive research time and difficulty in finding trustworthy information. The company seeks to develop a feature that utilizes influencer recommendations to provide pre-planned itineraries that are credible for users. As a result, the company hopes to increase user engagement, conversion rates, and revenue.
🤷♂️ How did I come up with the problem statement ?
In a 48-hour product design challenge, a team of 8 members worked to improve the “Tripadvisor” travel booking app by each focusing on a new feature. For my part, I aimed to create a feature that allows users to plan their trips using inspiration from travel influencers.
🤔 Why did I chose this problem statement ?
I selected this problem statement because I had little knowledge about how this concept would function and its potential impact on users’ trip planning. Additionally, I had not encountered this feature before, so I wanted to explore its potential by developing it as a part of the project
🎯 How did I go about selecting the business metrics to measure the impact of the feature?
🤳 User engagement
This feature can impact user engagement by providing users with inspiration and ideas for their own trips. By featuring pre-planned itineraries based on the recommendations and experiences of influencers, the feature can spark users’ interest and imagination, making the travel planning process more enjoyable and motivating.
✅ Conversion
By providing pre-planned itineraries based on the recommendations and experiences of influencers, the feature can help to inspire users and provide them with ideas and inspiration for their own trips. This can increase users’ confidence in the quality and value of their travel plans, which can make them more likely to proceed with the booking process.
👇 With the problem statement in mind, let’s compare the current UI with the newly redesigned UI that incorporates the feature.
I have chosen to include a section named “Inspiring travel plans from influencers” on the home page. The objective of placing this on the home page is to make it easily discoverable, particularly for users who are seeking to plan a trip but are indecisive on their destination.
- I titled this section “Inspiring travel plans from influencers” for clear user understanding that they can find travel recommendations from influencers here.
- I decided to put the influencer’s profile details at the top, so that users can easily recognize the influencer and know their area of expertise, thus making it easier for users to find influencers that share the same travel interests.
👉 I also included details like the length of the trip, so users can plan their budget accordingly and also the time when the influencer visited the destination, to help users understand if it’s still a good time to visit that location.
I have added an additional page, the “Itinerary page” which will be displayed when users tap on any of the destinations listed on the home page.(1st and 2nd image of above diagram)
Also, users will have the ability to access the day-by-day itinerary details for more information.(3rd and 4th image of above diagram)
- I decided to include an “About” section on the itinerary page, so users can have a general idea about the destination. I also added tags like “exotic”, “relaxing”, etc. to briefly describe the place’s characteristics.
- I included a day-by-day summary of travel plans on the itinerary page, so users can have a quick overview of the places they will be visiting during the trip to that specific destination.
👉 Additionally, users will have the option to tap on “Know More” button to access detailed information about each day of the itinerary.
3. I added a CTA (call-to-action) button named “Browse Hotels” at the end of the summary, so that users can easily start looking and booking hotels if they decide to proceed with the itinerary’s plan
- I included a section on the itinerary page called “Nearby Restaurants” that will display a list of restaurants that are located in close proximity to the places included in the itinerary for that specific day, this way user can have a smooth experience with the food choices as well as travelling.
I added a feature for an Influencer’s profile page where users can view all itineraries created by the influencer to assist in identifying destinations that align with their interests, such as cultural-related travel. For example, on the current page, if the influencer Shivya Nath has an interest in cultural destinations, users can view all the cultural destinations he has visited.
- I added the social media handles of the influencers so users can visit their accounts and verify their credibility as a genuine travel influencer, and also connect with the influencer on social media through this feature.
- A brief overview of the influencer is also included to give users a basic understanding of their interests, allowing them to determine if their travel interests align with that of the influencer.
- I included a list of past travel destinations visited by the influencer to allow users to view all the locations, and also included details such as the length of the trip to help users plan their budget, and the time when the influencer visited the destination, to assist users in determining if it is still a good time to visit the location.
💎 Preparing the design system for existing elements of the app
After each team member selected their individual problem statement, we decided to proceed by developing a design system to simplify the process of creating the UI at a later stage.
We proceeded with determining the typography, color styles, icons, buttons and cards that can be used repetitively by all team members while developing the UI.
👇 Now that we’ve gone through the design system, let’s take a look at how I got to this solution.
Initially, I identified the various ways in which users might use the feature by outlining the different use cases for it. This helped me to understand the different ways in which the feature could be utilized.
Here are a few examples of the use cases that I identified.
1. This feature can allow users to find new travel options that they may not have previously considered.
2. Users can use this feature to create their own travel plans, either by taking inspiration from plans posted by travel influencers or by customizing existing plans within the app to fit their specific needs..
3. This feature can allow users to find budget-friendly travel plans that have been recommended by influencers.
4. Users can utilize this feature to book accommodations, logistics, and restaurants if they are inspired by a certain plan.
As I only had 48 hours to develop the feature, I chose to narrow down the use cases and concentrate on the following two cases. 👇
👉 Users can create their own plans by taking inspiration from itineraries posted by influencers or by customizing existing plans that have been shared by them.
👉 Users can utilize this feature to book accommodations, logistics, and restaurants if they are inspired by a certain plan.
🤷♀️ But why I decided to chose only these 2 plan
✦ Enabling users to create or personalize their trip using influencer’s plans would enhance user engagement on the app.
✦ Providing a booking option within the app would increase the conversion rate. This is because it allows users to easily book accommodations, logistics, and restaurants without having to navigate away from the app. This added convenience would make it more likely for users to complete their bookings.
👇 After identifying the specific use cases, I created preliminary wireframes to visualize the layout and elements of the feature. The following is the initial wireframe that I developed.
As I created the wireframes, I realized that I needed to further narrow down the scope of the feature. I decided to only focus on the booking aspect, where users can directly book accommodations, hotels, and other logistics, after reviewing the plans. I chose to not include the option for users to create or customize their own plans.
👇 After creating the wireframes, I moved on to design the user interface (UI) so that I could conduct user testing. The following is the UI that I developed.
After finishing the initial UI design, I decided to proceed with testing it with users to evaluate their understanding of the screens.
As I did not have a fully functional prototype, I chose to conduct comprehension-based usability testing. This involved showing users the screens and asking them to explain their understanding of what they see.
👇 The feedback I received from the users was as follows:
User was not aware about the word Itineraries and hence couldn’t understand about the feature initially.
Uses initially couldn’t understand the rating circles
User felt a need of more Photos or videos on the Itinerary detail page for day by day plan. when he first saw the Day by Day Itinerary section instead of reading he just scaned through it.
Day by Day Itinerary section didn’t inspire the user to think about going to that destination for the trip because he felt there were more proof required for the plan
User was misunderstanding the word “6 days trips” as something was related to the review. he understood that it is an average days users spend on that particular destination.
User was curious to know what was the date of visit to the destination.
User initially couldn’t understand the list of destinations visited by the Influencer on the Influencer’s profile page.
👇 After taking into account the feedback, I developed the final UI, which included the following changes:
- I changed the word from “itinerary” to “ travel plan” because one of the user was not able to understand the meaning of itinerary.
- Users expressed a need to know the date of the influencer’s last visit to the destination, so I included it in the final UI, to allow users to determine if the destination is still suitable to visit or not.
- I included the pictures of places along with the day by day summary so that user can have more context to understand.
- I altered the button from “Book now” to “Browse hotels” because the users were interpreting “Book now” as booking a time slot for a conversation with an influencer.
- I added the option for users to view the social media handles of the influencers, so that they can verify their authenticity.
👇 After completing the UI, I decided to make the prototype, You can use the prototype by yourself
Thank you for taking the time to read through my case study. Please share any feedback you have!
You can contact me at uxridham@gmail.com or on LinkedIn.
