Aiming to maximize user engagement on Tripadvisor app with the help of categorical recommendations.
A 48 hrs. product design challenge experience.
‘Travel!’ the word itself is so exciting that you go all ears. But everyone will agree how tedious the planning and booking process can go, right? That’s where these travel apps ease your experience, but what if I ask you that have you :
▶️ Ever felt overwhelmed with the many options provided on travel apps that you find it difficult to browse and plan a trip for yourself? 😦
▶️ Faced problem on finding what is best for a place (say Mumbai for eg.) to plan (suiting your requirements) and to avoid jumping apps to see what’s trending? 😞
Well, then don’t stress more as that’s certainly few of the many things that went into consideration for creating a solution. How? Read below.
Table of contents
DAY 1
Introduction: What is this challenge?
Problem statement selection and advantage of AI
Building assumptions and developing insights
Building wireframes
Lets Prototype
DAY 2
Testing with users
Updated prototype
Future scope and learnings from the project
Introduction: What is this Product design challenge?
A 48 hour marathon(challenge hosted by UXM community, mentored by Anudeep Ayyagari) understanding the app, working around the problem statement, building assumptions, creating new UI, user testing and iterations with the final leg coming to an end with a presentation. The Aim was to deliver an MVP (minimum viable product) by the end of 48 hrs.
Participants were divided into teams and assigned different travel apps. A team of 8 members worked to improve ‘Tripadvisor’ (travel booking app) with each focusing on a new feature. All group members helped each other solve UI doubts and worked on building the design system together.
Problem statement selection and advantage of AI
As a group working towards the same app, we were presented with a set of problem statement areas to choose from and put our preferences. I chose to work with ‘categorical recommendations’ (having gone through the app, the entire ‘collections’ segment for researching a place and booking seemed fragmented throughout different flows in the app.)
TripAdvisor works primarily on booking and providing collective suggestions. It lets users :
👉To research and book travel experiences, including flights, hotels, and activities.
👉The target user is anyone who is planning a trip and seeking inspiration, information, and deals on travel experiences / things to do nearby.
Leverage AI? Yes, you heard it right. ChatGPT is doing news all around, why not make use of it?
To get more clarity and move forward, I took help of AI to generate a brief for myself. It helped me to structure my thoughts and take faster decisions.
💡Core idea of the feature: To use algorithms to track past search behaviors of user to provide personalized recommendations.
💡Business metric to target: User engagement & Conversion.
This feature can impact user engagement by providing inspiration, knowledge on what is trending to plan their trips thus making it a one stop space to find suggestions on basis of location, budget, duration, people.
With so much to find at one place, it can boost confidence and save user’s time to take decision and thus making it more likely for them to proceed with the booking process.
It could also lead to an increase in customer loyalty and repeat bookings.
💡How it will help users: The Categorical Recommendations feature will make it easier for users to find and book the perfect travel options, saving them time and effort.
Constraints: One constraint to consider is ensuring that the recommendations are accurate and relevant to the user.(Thus relying on location access is one way of overcoming this constraint)
Building assumptions and developing insights
👉 Assumption: It is assumed that users will be more likely to book travel options that are recommended to them based on their past behavior.
1- Users of the travel booking app prefer to browse options within a specific category, such as budget travel or luxury getaways, rather than having to scroll through a long list of options that includes a mix of different types of travel.
2- Most users of the travel booking app have a specific type of trip in mind when they begin searching for options, and so they prefer to be able to filter their options by category in order to find what they are looking for more quickly.
3- Users of the travel booking app are more likely to book a trip if they feel like they are getting a wide range of options to choose from within a specific category, rather than just a few options that might not be the best fit for them.
4- Young audience can run tight on budget and look for group booking options. Recommendations can be based on - budget, location, people as these are primary concerns while booking and depending on the nature of trip.
5- Users set up profile with a location, thus it can form a good base to present recommendations with all relevance to user behavior through browsing history .
6- Users generally tend to rely a lot on social influence, looking for booking hotels, to have other touristy attractions etc. As engagement can increase through such ways, recommendations can be integrated like that. Social proof is a key indicator for such apps as per Tripadvisors latest annual report.
Insights:
With having limited time, I opted to go forward with secondary research and understand about travel apps through news articles and finding other inspirations.
- As I was working towards ‘personalized feed’, apps like Instagram (feed section) and Zomato (Vibe check feature) served as inspiration basis the assumptions created.
- A review of Tripsy (travel app to pin places) mentioned a suggestion for a use-case of “having a feature actively recommended places to add when you’re first starting to put an itinerary together, at least famous, must-visit landmarks. Auto-populating these landmarks on the app would’ve saved a lot of time.” (Source: https://yourstory.com/2022/10/app-review-tripsy-travel-planning-locations-hotels-trip-ios)
✅Thus validating my assumption- Users tend to rely on social proof while looking for preferences in most cases, suggesting this saves their time. They look for preferences in associative manner, where multiple things get solved or answered for them (eg. hotel booking suggested with nearby eateries/sightseeing etc.)
❓What problem am I trying to solve with this feature?
I am trying to solve the problem of excess time consumption while booking which can lead to delayed planning and leave users with confusion.
Multiple ways of searching can create confusion.
As the app currently provides users to store information/notes for a trip under PLAN SECTION (No. 3 in the picture). It can be useful to associate search through recommendations as a new feature acting intermediary between no.1 and no. 3 to have a streamlined flow and avoid directing users to multiple ‘explore segments’.
❓How do I expect this feature to solve the problem?
Interactive media ensuring what many people are doing helps users to be more informed and help make planning faster and easily.
Linking hotel/stay booking with offering activities or other sight seeing attractions based on user’s behaviors at one place for a particular search (city), can help them make quick decisions.
❓What does a user do while using feature ?
User will get to explore all things in the city. Short form videos can act as social proof and help in better search. User will be able to wishlist all things from the recommendations and share them (No. 2/3). Categorical recommendations will work as a city/place specific list. ( No. 1)
(Redirecting from here user can go to PLAN feature where more lists of cities can be added.)
Ideating & Wireframing
A brief run through of all screens led me to decide on a particular set of screens that would define the flow for the user that can have recommendations incorporated-
Existing flow(in the picture below): It is observed that it displays multiple sections which can be clubbed to maintain information balance.
Explore from displayed categories >> Select a particular collection >> Selected collection page with details.
New flow: (in the picture below)
Home >> Location and explore >> Selected collection page (categorical recommendations) >> Favourites /Wishlist
Idea: To minimize the long scroll options on home page and minimize it. Additionally providing ‘explore tab’. The main categories can be searched in explore.
(As users know to some extent what they are looking for, this can help in smooth journey than provided a lot of suggestions on home page)
Idea (on left): To provide top priority categories to have faster decisions.
Giving the actual view/how it will work (video formats) helps to know the place better. Short-video apps are optimized for the scroll and there’s no space for decision fatigue.
Short form content can be introduced by collaborating with travel enthusiasts(sponsorship and loyalty gaining).Idea (on right): Allowing flexibility to keep a wish-list and edit/share it for a particular city/place
Separating two tabs of ‘hotels’ and ‘other things to visit’ because of the nature of its business.
Lets prototype!
It was time to make the screens and with all the understandings done till now, were put to use to make the following:
1- The explore is made as an active UI element to ensure users can explore the main ‘categories’ (city wise). (Users have some idea of what they want to find so general recommendations can be concised and more detail categories can be given in explore.)
2- Location visibility makes it easy. Editing it is flexible.
1- Giving a map CTA to display map as an overlay. The idea was to allow access to map on top as compared to existing UI. Users can find it easy to quickly track on map what they are viewing when given simultaneously with the media.
2- Introducing gif format idea/video formats of the city (Makes it more interactive and a mark of social proof when posted by people with credibility)
Photo replaced with Gif format idea/video formats to have city experience. Video cards with showing IDs bring more accountability and users feel legible
3- A person travelling to a new city will look for these main categories- stay, restaurants, activities to plan initially. Thus the idea was to declutter the existing UI to ensure user can focus on what’s to be searched primarily. Reviews ensure proof and thus each I have tried to let reviews be an element in the category showcasing its rating than a separate listing to view at the end.
4- The app works on - aggregator model for hotel booking and in-app booking to participate for activities or events in the city. Thus a distinguishing feature can help in smooth experience and minimizes back and forth from third party screens.
5- Users like when they are displayed with relevant content and thus an idea for prompting similar activities (‘don't miss out on’) in the wish-list is created.
Testing with the users
By this time it was already 24 hours into the challenge. After the prototype was ready, I approached people who could volunteer as my users. I interviewed 3 people- Kunika, Moksha, Sanath who were kind and agreed to participate post midnight! (consisting of different professional backgrounds like HR,UX)
Due to time constraints, we decided to go ahead with comprehensive usability testing. I ensured to keep the conversations open and friendly. The testing calls consisted of users speaking of their understandings of what’s displayed to them and comprehend on the same.
This way of interacting with users brought interesting UI feedbacks.
Testing Inference:
- Spacing between elements is not informing if they are grouped. (Visual/gestalt principle of grouping title info and card on page C above)
- Words like ‘events’ didnt give a clear meaning. Users felt it were like places to book for events. (The idea was to showcase events happening in city) (page B)
- Text hierarchy (city name, restaurant name) in the the cards was causing confusing in wish-list page. (page D)
- Contrast and text hierarchy. At some areas users found things associated even if they weren't.
- Favorite Icon placement at some places felt unnecessary. Caused confusion to do a further action or no. (page D)
- Profile Icon on videos was not clearly indicating what it meant. (whether uploaded jointly or alone - page C)
- Images in the card in categories can be darker, it gives a feel that its no available due to less opacity. (page B)
❓What insights am I prioritizing and why? What have I decided to work upon further?
Major insights focused on text hierarchy and contrast which is important for visuals.
❓How did the testing go?
The testing helped to gauge their understanding and whether they were aligned on the same lines.
I noticed a similar pattern of understanding from them which meant they were grasping the idea (especially the idea of interactive visuals).
Got insights which added to the functionality better in terms of display, layout.
Updated Prototype
1- Location button with edit icon changed to search field for easy understanding to type/edit.
2- ‘View maps’ button highlighted to grab user attention.
3- Minimizing steps and avoiding additional screen, the ‘categories’ are displayed on top. Whatever selected will take the user to that section.
4- Taking the visual spacing feedback, the title and the cards are differentiated accordingly.
5- Earlier UI showed favorite icon on this screen which confused users that there is more wish-listing option which was contradicting to the idea. Its removed in the new UI.
6- In the earlier UI, users did not understand that it is clickable (hotels, places). It has been changed to make it more visible and change the name from ‘places’ to ‘things to visit’ to provide better clarity.
7- All users got confused between restaurant name and restaurant place, thus this was incorporated by highlighting the name first followed by place.
In page D- This addition brings in easy access to store information and access anytime.
City specific detailed planning ensures quick decision making.
This screen opens up in ‘things to visit’ as default to display in-app choices first.
8- A prompt list overlay has been created (page E) with a CTA button to quickly add into the wishlist. The card shows important information like event name, distance and type to save user’s time
In page E-Specific prompt displays at the end of process similar to ‘checkout’ ensures that users don’t miss out anything. It can boost engagement, retention.
The designed flow takes the user from page D (above image) to the existing ‘plan’ section (below). It is tweaked by adding segments like wish-list and notes.
Want to explore the city of Mumbai? You can have access to the prototype below.
Future scope
Phew!! And that’s a wrap to the project. I would like to state some aspects that can be worked on for future scope:
The integration with the ‘plan’ section can be detailed out further to provide more visibility to the user informing them how can they work on multiple trips together and manage it.
Learnings from the project
Its true when people say, when you focus on one thing and set yourself in motion towards that, it reaps in productivity and great results! Well, that’s exactly what this 48 hour weekend did with so much to learn in such less time.
- When you ask questions and work in a team, you learn how to put your points forward and come to conclusions.
- A team effort makes the work much efficient.
- Leverage AI for saving time is a great way to proceed ahead. Your base concepts can be elevated with help of AI to nuance it further individually. Learning how to prompt is very important with the changes AI can bring in technology improvements.
Thank you for giving your time and reading till the end! I hope you enjoyed it as much as I did by having the most productive start to the year!
I love to have a space to hear and share thoughts!
Lets connect at :
Email- shah.jinal0498@gmail.com
Jinal Shah- LinkedIn
