Hoptale is a smart travel app for documenting trip journals and creating itineraries. Our team aimed to redesign the trip planning feature.
Lead UX Designer
Team of 5
Project Type
UXΒ Consultant
Being implemented!
Get to know Hoptale

‍Hoptale is an all-in-one content platform for travelers to explore, document, share, and plan their trip stories. On Hoptale, users can browse travel blogs, search for destinations, and plan their next trips.Β 

Get to know Hoptale target users

Travelers who have a mind of traveling soon and want to prepare for the trip.
We met with the client initially and learned more about the Hoptale user, business model, and the product goal.
Get to know the design process
πŸ’‘ What's wrong with the current trip planning feature?
We conducted 17 task-based Zoom interviews to investigate users' behaviors, browsing and planning trips, and 6 in-person observations to determine what stops them from using Hoptale and how we can help.
"You're planning a trip to NYC and still deciding what places you'd like to visit. Please browse Hoptale to find your interests and then add some fun activities to the trip plan."
Thus, we framed the design challenge:How might we design a simple trip planning feature for travelers to save inspirations and edit detailed activities?
✈️ What are the user groups and their needs?
We expect travelers would be able to
Get personalized trip plans and easily edit detailed itineraries
πŸ“ However, Personalization is a tricky one
Compromise we made
At first, to make the process as simple as possible, I introduce a customized trip planning template according to the user's preferences and give the user the option to either plan a trip manually or edit a template.
However, after we catch up with Hoptale, we were aware that the algorithm might not recommend what customers really want, which might cause disappointment.
So, we change the personalization to
Designing a "discover" feature for travelers to explore top attractions near the destination
πŸ“Œ Enable users to pin things and refer back when planning
Indicate users that they can either save a whole trip or a place.
Allow users to add places from their saved lists and provide evident feedback (status bar) on what has been added.
πŸ”– Enable users to add activities to the itinerary effortlessly
Iterate to increase the accessibility of creating a trip and adding places.
βœ‚οΈ Usability testing with Hoptale users
Thanks so much to our client, who provided us a list of Hoptale's daily active users. We conducted 8 usability testing sessions over Zoom to verify our solutions and figure out what aspects could be improved further.
πŸ–ŒοΈ Production-ready, high-fidelity deliverables
Browse other travelers' blogs and get inspired
Either save the whole trips or specific places
Add activities from your favorite list
Provide noticeable feedback on how many activities added
πŸ₯³ What I learned working with industry client?

Communication matters!

Always keep all group members on the same page. Collaboration-wise, I had thought that the best scenario would be every team member has their portion of work and take responsibility for that. But when I finished the wireframe, two group members got confused about some of the design flows. If I can do the project again, I will get to know what others are doing, and of course, ask questions.

Design system matters!

We started working on paper sketching without a design system, and very quickly, we notice some gaps, since when we made changes on a screen, we sometimes forgot to change other screens accordingly. After that, we realized the importance of defining a design system beforehand. Starting from the iteration, I leveraged the existing design system Vapor on Figma community to keep consistency.

Next Step

Hoptale is implementing our design (excited!). We'll involve more stakeholders in the research, testing, and design phases.
Is this what the end looks like? Yes, yes it is.
Β© 2021
Designed by Yolanda Tian