Navigating a Path to Better Travel

Mapping

Social

In August 2016, TripAdvisor acquired Citymaps with the task of switching their entire global map over to Citymap’s proprietary map engine. I was tasked with unifying the map and developing a system that aligned with their strategy. After switching over, the ongoing task moving forward was to design the world's best map – optimized specifically for the traveler, providing unique features and functionality to offer the best experience whether planning a trip or discovering a destination.

Role

Associate Director, Product Design

Timeline

Sep 2016 - May 2018

Responsibilities

  • Map design

  • Cartography

  • Prototyping

  • Defining design system

  • User research

Redefining a Travel Map

Although competitive in the review space, TripAdvisor and Google have had a positive long-term mapping partnership. Over time, TripAdvisor wanted to grow past the constraints of what the Google Maps API was offering and build mapping features that were unique for the TripAdvisor audience.

My Role

I joined TripAdvisor in 2016 as the Head of Map Design. Working in a cross-functional team of 15 Engineers, Product/Project managers, and QA. I led the end-to-end planning and hands-on execution of the map design vision. In my role, I was responsible for integrating the overall design system for the full map experience, across 20 different zoom levels, throughout the TripAdvisor ecosystem.

Doing One Thing Well

After acquiring Citymaps, TripAdvisor now had the opportunity to replace Google Maps and offer the traveler with a customized map experience. With access to the full map data, TripAdvisor could customize everything within the traveler’s map journey, and provide them with a tailored experience.

High-Level Goals:

  • Show travelers the right information at the right time.

  • Available online and offline.

  • Most advanced yet acceptable – innovate without breaking map mental models.

Map Core

Under the Hood

Defining the Map

The Citymap's engineering team built the map engine from the ground up. On the design side, that allows full freedom to customize the cartography of the map. For this project, I designed all 20 different zoom levels and applied custom iconography globally.

Zoom 4

  • Show topography and elevation

  • Introduce labels for states and cities.

  • Represent larger cities differently from smaller cities

  • Display labels for large bodies of water (e.g., seas)

Zoom 7

  • Display minor highways, thinner than major highways

  • Display custom designed highway badges

Zoom 13

  • Begin showing building outlines

  • Introduce ferry routes labels

  • Distinguish between secondary and tertiary roads

  • Show bike routes

  • Show frequent street labels

Zoom 17

  • Begin showing park labels

  • Begin showing tertiary roads faintly so as to distinguish between major and minor roads

  • Begin showing ferry line routes

  • Begin showing labels for rivers

Highway Badges

Hot Areas

Map Elements

Previous Map Design

The previous Tripadvisor map was constrained by the limited customization capabilities that google maps offered at the time.

Feedback from Users

Base Map

  • Participants were most surprised about the type of attractions on the map and often expected a higher density of restaurants.

  • Participants expect to be able to understand where they are relative to known places.

  • Google map POI labels and icons contributed significant value to the participant and were attributed to TripAdvisor.

Hotels

  • Price is the most important thing, alongside review score and count.

  • Price helps them stay in budget, so seeing it sooner rather than later saves a lot of time.

  • Liked that they saw fewer pins but still thought it was too many.

  • They liked how they could search within the map (nearby).

Experiences

  • 3 out of 5 users mentioned using the map before prompted.

  • They assumed the black pin on the map (pinned location) was their location.

  • Review Score and Review Count was important.

  • The amount of pins on the map is overwhelming, they liked to zoom in just so they could see less.


Picking a Pin

It was important to have a pin shape design that could accommodate all pillars within TripAdvisor. We started from a minimum target size of 44 px wide 44 pixels tall. We then iterated on pin shapes that would scale from mini to selected.

Making the Most of Metadata

Collision detection will ensure that the metadata is placed on the side of the pin that makes the most sense for the map view at the time. Dynamic Metadata will alternately show the default metadata and social proof validation

Base Layer Pins

  • Base layer POI iconography is familiar with a white background and color icons. The goal is to not break the mental model of how the icon is handled around mapping products.

  • Saved POI will appear with a red heart as a way to highlight your saved places from other POI on the map.

  • Sponsored icons will appear with the logo.

Booked Base Layer Pins

  • Booked hotels, purchased tours and reserved restaurants will always appear on the base map.

Landmark Icons

  • The goal is to help travelers quickly orient themselves in new destinations.

  • Represent all the world’s major landmarks with this special iconography.

  • Collision detection will ensure that landmarks and POIs co-exist on the base layer without cluttering the user experience.

Defining the Preview Cards

The details were incredibly important for the different iterations of the preview cards. Each pillar brought to the table their own relevant data for each state. We worked closely with all pillars to align on metadata.

Map Features

Defining the Traveler

The travel journey is not linear, it is fluid. This fluidity is dictated by trip type, not traveler type. A traveler's travel journey path (i.e., the order of and participation in a step) varies by 583 unique paths taken by travelers surveyed. A traveler’s personality, economic or social status is not the key determinant of a journey, rather trip type factors define.

Trip Types

  1. Dream trip (e.g. once in a lifetime trip, bucket list trip)

  1. Necessary trip (e.g. travel for a specific event or activity)

  1. Planned annual trip (e.g. summer trip)

  1. Getaway trip (e.g. needed to get away from it all)

  1. Local/Near my home (e.g. things to do near my house)

  1. Last-minute (e.g. decided to take a trip a day or two before going on the trip)

Traveler Journey

  1. Planning - Defining the destination & researching + booking key elements

  1. Pre-Trip - Planning & logistics

  1. On Trip - Map focused

  1. Post Trip - Dreaming of the next trip

First Days

Overview:

Upon arrival, most want to “settle in” at their destination. This is also a time to gather on the ground information (ex. Maps) and advice from locals or the concierge. This information is leveraged throughout the trip.

Pain-points:

Difficulty in finding info on local events, Unreliability of wifi and phone service.

Mid-Trip

Overview:

Travelers fully immerse themselves in experiencing their destination. This step is more about doing, than the research. They act on recommendations and the activities they want to “post” about.

Pain-points:

Inconsistent info on the best “local” experiences. Difficulty with navigating the destination (travel time, directions).

Last Days

Overview:

Time is short. You want to fit in capstone experiences while maintaining a relaxed state. When you return home, trip activities are ongoing on social media, which influences writing reviews and thinking about the next trip.

Pain-points:

Challenge to check every last thing off the list, Stress of repacking / returning to “real-life”.

On Trip Features

Quick Filters

Neighborhoods

Routing Options

Places You'll Pass

Offline Maps Download

Comparing with the Past

Old

New

The Impact

We built and implemented a custom map style and design elements that blended seamlessly into the new look and feel of the TripAdvisor redesign that was happening alongside our work. We introduced new mapping features, such as downloadable offline maps, that were designed to help customers in all life-cycles of their vacation and trip planning from mobile to desktop. Ultimately, we achieved our goal and were able to entirely replace Google Maps in over 400 cities across 70 countries worldwide.

  • iOS page views increased +70% for attractions, +42% for restaurants. 

  • iOS restaurant engagement increased +47%.

  • Android attraction revenue increased +16% per user app-wide.

  • Android restaurant page views increased +19%.

TEAM

Elliot Cohen

Aaron Rudenstine

Adam Eskreis

Bob Matsuoka

Nicole Brown

Eddie Kimmel

Raja Hamid

Pavel Shub

Peter Roach

Anthony Campagna

James Marababol

Sami Badawi

John Tan

Ben Gundersen

NEXT

Project