top of page
.png)
ABOUT
Hoptale
TIMELINE
TYPE
ROLE
TEAM
TOOLS
3 months, Feb - May 2021
Client-based UX Consultancy
Hoptale is a smart travel app for documenting trip journals and creating travel itineraries to share travel stories with users around the world. Our team aimed to redesign the end-to-end trip planning feature for the new Hoptale launch. We worked with the client to refine and optimize the discovery and travel planning experience of the IoS mobile application during the spring of 2021.
Our final deliverable was an iOS MVP showcasing the complete travel planning feature with an automated template.
End-to-end Product Designer
Team of 5 (PM, 2 researchers, 2 designers)
Paper and pen, Figma, Miro, Google Sheets
Anchor 1
Our Process
The Background
Scoping business and product goals during initial client meetings
Gaining a basic understanding of Hoptale users and their needs
Discovery
What can we learn from how users interact with the current version?
17
user interview
participants
After the 17 interview sessions, we mapped collected findings to opportunities. Then, we ranked opportunities based on level of difficulty (production cost and feasibility) and severity (for user experience) scale.
In the end, we decided to focus on two main usability issues as shown on the right.
How might we simplify the bookmark flows?
How might we simplify the trip planning user flow?
The Users
diving deep into user behaviors and needs
what did we learn from Cherry and Mary?
During user interviews we found out that introverts and extroverts plan trips differently. Ambitious planners and casual explorers interact with the trip planning functions differently, too.
However, both would want to discover new places and trip itineraries, bookmark interesting trip inspirations, and seamlessly plan for future trips.
Instead of starting from scratch, we wanted users to be able to mix-and-match trip itineraries they saved, and customize into their own personalized template.
Technical Constraints
some of the best ideas cannot be executed
unfortunately, this was one of those times
After catching up with our client
We were told that the algorithm might not recommend what customers really want. Customers still won't get the simple solution to easy and seamless trip planning. Users still are required to manually add trip details. Now. what can we do to make it easier for them?
Ideation
paper prototypes to mid-fidelity interactive mockup
In this prototype, I tried to explore how we can enable users to "bookmark" a location without having to click into a trip itinerary. Would it be easier for them if they can save on the home page, where they generally spend the majority of their browsing time?
adding an easy option to "save" on the home page
the yellow region shows a bookmark on the top right corner of each post
save a trip to list
save a place to list
Initially, users can bookmark: place, hop, or trip. After going over 5 variations\, participants were still asking: "What is a hop?" and telling them "hop is a leg of a trip". I tried adding on-boarding screens and a pop-up including illustrations, but users were still confused. At first our client insisted on keeping "hop" since it ties back to their brand recognition, but after reading her quotes from user testing, she agreed to simplify "bookmarking".
simplifying the 'bookmark to list' flow by eliminating hop
What should a "bookmark" look like for a travel planning app?
the CTA changes from bright Hoptale red to grey to decrease discoverability
iphone users who has the means to travel and document travels with mostly their iphones
from doing heuristic evaluation before user interviews, we identified the highs and low points of the user journey for discovery and travel planning
product goal: evaluate current browsing and discovery, and travel planning flow - make them as seamless and simple as possble.
business goal: integrate local retail and vendors (include ratings) with places
Discovery
What can we learn from how users interact with the current version?
17
user interview
participants
After the 17 interview sessions, we mapped collected findings to opportunities. Then, we ranked opportunities based on level of difficulty (production cost and feasibility) and severity (for user experience) scale.
In the end, we decided to focus on two main usability issues as shown on the right.
insight from remote interview
"I wish I could pin things I found to refer back to when planning or when searching through the app"
How might we simplify the bookmark flows?
observation from in-person interview
Users have to log all places one by one manually to the plan, which is extremely time-consuming, and frustrating too.
How might we make travel planning more intuitive?
How might we simplify the trip planning user flow?
The Users
diving deep into user behaviors and needs
what did we learn from Cherry and Mary?
During user interviews we found out that introverts and extroverts plan trips differently. Ambitious planners and casual explorers interact with the trip planning functions differently, too.
However, both would want to discover new places and trip itineraries, bookmark interesting trip inspirations, and seamlessly plan for future trips. Both value time and efficiency, so we then focused on combining discover and bookmarked travel inspirations with trip planning. We envision the user's journey's significantly simplified when they can easily pull places and trips they saved everyday when they are planning an upcoming trip.
what if: instead of starting from scratch, we wanted users to be able to mix-and-match trip itineraries they saved, and customize into their own personalized template.
Technical Constraints
some of the best ideas cannot be executed
unfortunately, this was one of those times
after catching up with our client
She said the algorithm would not be optimized for user's personal interests due to technical constraints. Users still won't get the simple solution to easy and seamless trip planning. Users still are required to manually add trip details. Now. what can we do to make it easier for them?
Ideation
paper prototypes to mid-fidelity interactive mockup
In this paper prototype, I tried to explore how we can enable users to "bookmark" a location without having to click into a trip itinerary. Would it be easier for them if they can save on the home page, where they generally spend the majority of their browsing time?
adding an easy option to "save" on the home page
the yellow region shows a bookmark on the top right corner of each post
save a trip to list
save a place to list
Initially, users can bookmark: place, hop, or trip. After going over 5 variations, participants were still asking: "What is a hop?" and telling them "hop is a leg of a trip". I tried adding on-boarding screens and a pop-up including illustrations, but users were still confused. At first our client insisted on keeping "hop" since it ties back to their brand recognition, but after reading her quotes from user testing sessions, she agreed to simplify to two bookmark types: place and trip.
a conflict on interest between branding and user experience
What should a "bookmark" look like for a travel planning app?
using color contrast to increase discoverability and visual higherarchy for the "save trip" CTA
the design emphasizes on the locations over photos in posts with rounded corners, smaller photos (unlike Instagram)
"saved to " banner changed from Hoptale red to consistent dark grey to lower stress for users with dementia and stress issues.
from testing we found out that users may accidentally click "search" when trying to "add from list" so we increased distance
if the user search by location they will find places and lists; users are able to quickly pull places from saved lists, hassle free
another very helpful feedback was that users expect to see personalized content generated under search
the grey does not have enough contrast with the black in the background to help users stay focused and establish layers
next steps: I would try to explore if there is a definite need to use slide down (it wasn't 100% clear what would happen when you slide down vs when you click
Reflection
what did I learn from this project?
what would I have done differently?
From working remotely with team members, I learned the importance of team synchronicity and setting up reasonable amount of checkpoints.
Another thing I learned is that a team is most productive when everyone have ownership, feels challenged but also passionate about their tasks.
Lastly, it's important to relax. Great team work is like your fingers playing the piano together. Have faith in your team. Check in often and knowing everyone's strength and preference are the key to collaboration.
team collaboration
When we simplify things in the bookmarking and trip planning flows in my design, many times I find myself adding new features, new buttons, more boxes. However, next time, I would like to ask myself:
What can you subtract? From the user flow, from the interface, from the content.
If it does the same, or better yet, increases efficiency and ease of use for the end-users, then have a bias for action to start with subtracting then adding.
simplifying
Our client was resistant to let us test with Hoptale users in the beginning, because we haven't built trust with her yet. Also, she wasn't sure what we meant by "interviewing".
In the future, I would try to earn trust from stakeholders during on-boarding by proactively explaining what UX is and how we plan to streamline the UX experience for end-users by starting off with a more in-depth understanding of the current users and use cases.
When handing off our final design, our client wanted us to share more feedback from usability testing. We discussed a possible secondary color to compliment the catchy but a little too strong Hoptale red. She really appreciated us putting our findings and deliverables in one document for her to pass on to the next design team, and keep for her records.
receiving feedback from stakeholders
bottom of page