Hoptale App Redesign

·Inspire ·Plan ·Travel

2e73be5821da2ea72ee4537b1eb5ae2c.png

ABOUT

Hoptale

TIMELINE

TYPE

ROLE

TEAM

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)

TOOLS

Paper and pen, Figma, Miro, Google Sheets

 
608cc172297f8d33d2aca4f6_VS-p-1600.png

Our Process

The Background

Scoping business and product goals during initial client meetings

Gaining a basic understanding of Hoptale users and their needs

607d873c8a8ab02a07e4cf20_Persona-p-800.p
Screen Shot 2021-05-09 at 11.50.12 PM.pn
607d87397c677741b1e76e01_Lean UX Canvas-
Screen Shot 2021-05-10 at 2.17.53 AM.png

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

Persona.png
Persona copy.png

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

608ca9163d180f30fbfcb98c_recommend-p-160

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 Design

our high-fidelity prototype

the CTA changes from bright Hoptale red to grey to decrease discoverability

608cbe5c8a327b94a977600f_browse-p-1600.p
608cc00ea85b26c5b2a01733_Favorite-p-1600

iphone users who has the means to travel and document travels with mostly their iphones

607d873c8a8ab02a07e4cf20_Persona-p-800.p

from doing heuristic evaluation before user interviews, we identified the highs and low points of the user journey for discovery and travel planning

Screen Shot 2021-05-09 at 11.50.12 PM.pn

product goal: evaluate current browsing and discovery, and travel planning flow - make them as seamless and simple as possble.

607d87397c677741b1e76e01_Lean UX Canvas-

business goal: integrate local retail and vendors (include ratings) with places

Screen Shot 2021-05-10 at 2.17.53 AM.png

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

Persona.png
Persona copy.png

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

608ca9163d180f30fbfcb98c_recommend-p-160

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?

The Design

testing our high-fidelity prototype with Hoptale users

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.

608cbe5c8a327b94a977600f_browse-p-1600.p
608cc00ea85b26c5b2a01733_Favorite-p-1600

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