c.etz

A Redesign of

The Hoptale App

Creating Features to Simplify Trip Planning

Role: Project Manager, Client Outreach

HoptaleHeader@3x.png

Project Type: Consulting

Duration: January - May 2021

Hoptale

"Inspiring travelers to seek inspiration, plan their own adventures, and document their journey."

Hoptale encourages travelers to remember their adventures through their social sharing feature and inspire others to go out and go. Trip planning became a natural step for Hoptale as travelers wanted to not only document the trips they had taken, but also plan their next trip.

 
 
 

Challenges

Before beginning, we faced the following three challenges: 

1. Figuring out how an app that focuses on trip documentation capitalize on their current product suite to take the burden out of trip planning?

2. Through user testing on Hoptale's current iteration of a trip planning feature, it was addressed that users were overwhelmed by the number of steps and amount of information they were faced with when planning a trip.

3. Users did not see any clear direction on how the inspirational content they saw on the rest of the app could serve them when they were beginning to plan their next trip.  

Goals

From these challenges came a goal:
Simplify the trip planning feature and build clear workflows so users don't feel as though trip planning is a hassle or a burden.

Responsibilities

responsibilityIcon_4x.png
  • Create personas

  • Conduct user and competitor research 

  • Implement user testing 

  • Create high fidelity prototypes to present to Hoptale

Tools

h6Icon_4x_edited.png
  • Miro for ideation and team brainstorming 

  • Adobe Illustrator for icon creation

  • Adobe XD for prototyping

  • Figma for collaboration

 

Serve as a project manager alongside team of four other UX designers and researchers.​

  • Facilitate all communication between team and client

  • Built project schedule and determine prioritization for tasks

  • Create MVP presentation to show to client

  • Work alongside team to create high fidelity prototype 

Role

roleIcon_1_4x.png

The Process 

Discovery

Identify user needs and motivations in order to define effective solutions 

  • Create User Personas 

  • Create Journey Maps 

  • Perform Competitive Analysis 

Design

Create a style guide to create brand aesthetic and identity

  • Create Styleguide 

  • Create Low-Fidelity Prototypes  

  • Create Mockups 

Test

Test to ensure the discovery and design phases were effective

  • Usability Testing 

  • Iteration

 

Discovery

Research was first conducted in order to get a better understanding of the type of user we would be designing for.

Key Findings

  • Visual signifiers which would direct users to the trip planning feature weren't clear enough

  • Users had difficulty pinning things of interest to refer back to later

  • Users were overwhelmed by the amount of information presented in trip planning and wanted more customization options to simplify the experience to fit their needs.

Personas

Two unique personas were created to help guide design and were kept in mind throughout the rest of the design process. 

guilherme-stecanella-_dH-oQF9w-Y-unsplas

Mary Parker
“My favorite part about traveling is taking pictures that I can take home with me. By capturing those moments I can relive my adventures anytime I want.”​

My Story:
I've taken many business trips throughout my career which makes me confident when it comes to planning my next vacation. I know the type of destination I like and take a trip every summer.

My Goals:
Document my adventures
Share my experiences

Learn more about new places

ray-berry-Btc3Woa1dFc-unsplash.jpg

Nolan Jones
“There’s nothing better than exploring new places with my friends and planning trips that the whole group will enjoy.”

My Story:
Ever since I was young my friends and I loved spending time outdoors. Now that we’re adults who can afford to spend money on trips, we’ve made it a mission to backpack in as many countries as we can. As the planner of the group, it’s my job to scout out our next destination.

My Goals:
Discover new places
Plan worthwhile trips

Share plans with my friends

Journey Mapping

A user's journey was mapped in order to understand the workflow of using the Hoptale app.

The Journey of Trip Planning

What goes through a user's mind when planning a trip: 

Where? 

Where am I traveling?

When?

When am I going?

How Much?

What is my budget?

What?

What are my interests?

Have I been there before?

Could the dates change?

What does it include?

What is the place known for?

Am I going with anyone?

Can my travel partner come?

Does everyone have the same budget? 

What do others want to do?

Competitor Analysis

Three competitors, all involved in trip planning were analyzed in order to identify feature segments, market gaps, and trends. The following were our takeaways:

  • Keep the design of the workflow simple and cohesive between each step

  • Include tutorials and onboarding to introduce users to trip planning

  • Show maps to help users understand the distance between the things they are planning

  • Allow for easy collaboration between those embarking on the trip

Prototypes

Paper Prototypes

It was a priority for our team that after conducting research, we'd all play a role in creating paper prototypes. The value of this was that our own unique perspectives would play a part in the design process adding more value to the solutions that would later be drafted through the mid-fidelity prototypes.

Screen Shot 2021-05-02 at 2.09.10 PM.png

Mid-Fidelity Prototypes

After paper prototypes were tested with users to ensure the information architecture made intuitive sense, medium fidelity prototypes were created to start developing the functional elements that would be used in Hoptale's mobile experiences.

quickAccess_edited.png
addPlace.png
editPlan_edited.png

Getting to High Fidelity

Developing a Style Guide

The current Hoptale style guide was used as inspiration for our designs. It was also important for our team to support both light and dark mode as Hoptale adjusts based on their user's systems settings. 

Colors
 

#F65950

Primary

#F57169

#878D96

#1E2022

#F76637

#E7E7E7

#343A3F

Secondary

High Fidelity Prototypes

Below are high fidelity prototypes for the mobile app experiences. Screens shown represent the Hoptale trip planning dashboard, map view, and the process of adding an activity to an itinerary. 

hoptale-hi-1@3x.png
hoptale-hi-2@3x.png
hoptale-hi-3@3x.png

Takeaways

1. The value of user research

This project provided an opportunity for our client to see the value of user research, especially user research which engages real-world users. At the beginning of the project, this value was not realized and there was hesitance to conduct research. However, by showing videos of user interviews, the client began to realize the potential insights that could be delivered only through user research and provided Hoptale users to interview for the second phase of our project. 

 

2.  The importance of clear workflows

In creating an experience which empowers users to plan their next trip or vacation, the importance of providing a clear workflow was realized. Through this project, it became evident that it is necessary to first diagnose every step a user looks for in planning and then provide these steps so there are intuitive and easy to work through. In addition, customization is another important element as not every user wishes to plan in exactly the same way as their fellow users.

3. The power of storytelling

In drafting presentations for our client, priority was given to creating a story in which we could detail our work. This element of storytelling was pivotal in onboarding our client and demonstrating the value the UX design process and user research could have on developing products which best serve the user and business goals.