Hitmap

Building a platform for
friend-sourcing travel recommendations
Hitmap mobile app
Process

Discovery
User survey
Interviews
Affinity diagramming
Insights

Strategy
Competitive analysis
User personas
Feature prioritization
User experience mapping

Design
Information architecture
Wireframing
User testing
Usability testing
Visual design
Prototyping

The problem

Travel planning can be overwhelming, frustrating, and time-consuming. Weeding through clutter, fake reviews, and toxic rating systems hinders the research process. And organizing information from scattered sources can be chaotic.

How might we improve the travel planning experience, exchanging recommendations in a way that is easy, enjoyable, and trustworthy?

The solution

Hitmap is a friend-sourced travel platform that provides a standard, easy, and seamless way for tracking and sharing travel recommendations.

The best recommendations don’t come from strangers or critics, but from people that know and trust each other and share the same taste—friends.
The experience of exchanging travel recommendations varies from person to person. Some people share Google Docs, others send Yelp links, and some even still use paper. Hitmap eliminates the need for scattered lists in different apps and keeps all recommendations in one centralized place.

Users can curate map-based hit lists with points of interest, travel wisely knowing where things are relative to each other, and share with friends to help them plan their trips as well as inspire them to explore the world.

Jump to Hitmap prototype ↓
My Role

UX designer
Product designer
Visual designer

Tools

Sketch
InVision

Discovery

User survey & interviews

I started by surveying people who travel to better understand their needs, motivations, behaviors, and pain points during the trip planning process.

I sent out a Google Form containing a mix of closed- and open-ended questions. Although I didn’t receive enough responses to be statistically significant, I received 22 responses in a short amount of time—one day— which gave me valuable qualitative data.

This survey also allowed me to recruit and screen participants for follow-up interviews where I learned more about their pain points and needs.

View travel planning Google Form → View survey results in Google Sheet →

Affinity diagramming

I created an affinity diagram to narrow down and organize the research findings, identify key themes, and create insight statements. Afterwards I developed “How might we” questions to define opportunities for design.

Delights ☺
  • Most people like picking points of interest/restaurants/activities.
  • Most people like the anticipation and excitement of exploring new places and experiencing new things.
  • Some people like being efficient and knowing what to expect by creating
    an itinerary.
How might we make the travel planning experience more exciting and efficient?
Pain points ☹
  • Building an itinerary—figuring out the timing, sequencing, and routing—can
    be overwhelming.
  • Weeding through tourist traps and unreliable ratings to find good local spots is challenging.
  • Looking through multiple sites for information causes choice overload.
How might we find the best personalized local spots and easily build an itinerary?
Mobile & integration
  • 82% of participants use their mobile phones during the planning process.
  • Most people use TripAdvisor, Yelp, Google Maps, blogs, and Instagram to find points of interest/activities.
  • Most people use Google Maps, Docs, and Sheets to organize their trip information.
How might we integrate different sources/tools while improving the mobile experience?
Sharing recommendations
  • 100% of participants would be willing to share travel recommendations with friends or relatives.
  • People exchange recommendations in various ways.
  • Some people have trouble finding time to compile recommendations.
How might we standardize and facilitate the exchange of travel recommendations?

Strategy

Competitive analysis

I analyzed the top competitors to identify opportunities for Hitmap. Combining the advantages of Google Maps and Google Docs/Sheets seemed like a step in the right direction.

Barbellona competitive analysis chart

User personas

To further synthesize all the research findings and inform all design decisions I created personas based on two types of travelers: detail-oriented planners and loose planners.

Hitmap persona: Josh Sato
Hitmap persona: Zoey Clark

Feature prioritization

I used the MoSCoW method to define and prioritize the features for Hitmap.

Must have
  • Create custom map for each trip
  • Search to add points of interest
  • Stylize with color-coded icons/labels
  • Filters and tags
  • Write notes/details
  • Add links and images
  • Request map/recommendations
  • Share map/recommendations
  • Log in and create profile
Should have
  • Social network and tool integration
  • Import data
  • Automation
  • Recommend sequence/route
  • Save map routes by day
  • Offline access
  • Follow people (friends)
  • Collaborate
  • Copy and edit map
Could have
  • Comments
  • Messages
  • Calendar
  • Sync reservation confirmations
  • See friend activity
Won't have this time
  • Navigation
  • Transportation mode
  • Booking
  • Ratings
  • Budgeting/comparing prices

User experience mapping

With all the research insights and personas in mind, I mapped out the experience of planning a trip to discover opportunities for resolving frustrations and imagining interactions with Hitmap.

Hitmap user experience map

Design

Information architecture

I designed the app’s content to match users’ needs and expectations ensuring easy navigation and usability.

Hitmap mobile app site map

Wireframes

I created wireframes for the main flow of the minimum viable product (MVP).

Upon opening the app, the user would see a list of all maps. To add a new map the user would tap on the plus button, name it, and search for the location. A map of the location would appear along with recommendations already created by friends synced from social networks. The user can then browse through all the recommendations, view notes and photos, and add them to the map. The user can also search and add any place to the map.

Hitmap mobile app wireframes

Visual design

I designed Hitmap to be clean and minimalist. The palette is energetic and earthy; typography is both functional and modern; and navigation in the bottom tab bar is clear and intuitive.

App icon

Hitmap app icon

Colors

Typography

Work Sans typeface

Tab Bar

Hitmap tab bar

Final prototype

View Hitmap prototype on InVision →
Barbellona mobile app training screens

Track training sessions

After a self-care check-in, users complete their programmed workout with the help of a weight plate calculator. Users can also record form check videos and take notes.

Barbellona mobile app screens for analyzing progress

Analyze progress

Users can dive deep into their training log and form check videos, share them with their coaches to analyze form and technique, and work on how to improve and get stronger.

Barbellona mobile app program screens

Manage training program

Users can easily view their individualized program designed by their Barbellona coaches. Programs are updated every cycle and continuously adjusted based on progress.

Barbellona mobile app community screens

Connect with the community

Users can access a forum where they can connect, help, and inspire each other. Discussions vary from training to mental health. Conversations with coaches and other lifters is key.

Barbellona mobile app self-care screens

Focus on self-care

Users can create their own affirmations to promote positive thinking, journal to improve mental health conditions, and set reminders to practice self-care.

Previous project

← ThinkBetter

Next project

Qualcomm →