Mapping All the Places You Will Go

Mapping

Social

Introduction

For the first four years, Citymaps existed solely as a native app with a focus on local map discovery. In 2015, I was hired as the Head of Design to expand the product to web and refocus the user goals across all surfaces. I led the product design across all screen sizes and map design across all 20 zoom levels from the start of 2016, leading up to the acquisition of Citymaps by TripAdvisor in August 2016.

Role

Lead Product Designer

Timeline

Jan 2022 - Sept 2022

Responsibilities

  • Product leadership + vision

  • Setting product definition

  • Expanding brand patterns

  • Defining design system

  • Launched Beta product

Brand

Unifying the Brand

Citymaps didn’t have a unified brand color set across all platforms – the mobile product was blue while web was green. Given that Citymaps is a social discovery platform for reliable recommendations, I recommended that blue, which indicates trust, was the right direction over green, which tends to be more tranquil. I also gave the brand one unified mark that would allow a single color to stand out. This opened up the opportunity to apply that color to the primary actions across the products.

Colors & Typography

With the primary brand color set, we worked on a style guide to unify the rest of the colors and the typography for the product.

Aligning Social Actions

The social terminology and iconography across the brand was inconsistent and often times repeated itself for multiple actions. I worked to separate social actions and applied text to help describe the function.

Saving Maps

Collecting Points of Interest

Following a User

Problem Solving & Strategy

The Problem with Local

Local discovery is a crowded market - without unique data points, Citymaps failed to separate itself from the competition. How will we stand out to users inundated with local discovery?

Social Mapping Vision

Rather than focusing on select cities and local points of interest, Citymaps opened the doors to a global travel platform. Citymaps would be the go-to source for planning, experiencing and sharing our users' travel experiences. Instead of focusing on doing all things across all platforms, Our team revised the web-based Citymaps product to focus primarily on planning and discovery and the Citymaps mobile app to focus on the in-destination use case, including offline services and local city guides.

Insights & Ideation

We started with our users. Alongside our Chief Marketing Officer, I worked to focus the language of our welcome email to showcase the reasons new users were signing up for our platform. To address the needs of frustrated users, I partnered with our project manager to attempt to gain insights from our existing user base. Together we made outreach phone calls to frequent users and gained feedback about their Citymaps experience. Both of these tactics translated directly into the planning of new concepts that specifically addressed our user's behaviors and motivations.

The Strategy

Using this data, I created wireframes and prototypes to share the vision, strategy, and design principles – helping to sell ideas, gain alignment and drive decision-making. I worked with our CEO, President, and CMO to define the monetization goals and strategy for our product moving forward.

Web

Rethinking the Website

When I started at Citymaps, desktop had just been redesigned for the second time. It was optimized for SEO, had a new brand color, and had a homepage feed. The product was mimicking elements from Pinterest, Facebook, and Foursquare and lacked a real purpose and direction. I reworked the architecture of the product, driving users down the funnel and guiding them through the product.

Top of the Funnel

For most Citymaps users, this was the first page they would see on the web. As a global travel platform, we wanted to drive them down the appropriate path as well as explain who we are.

Find What You Want

As part of the homepage redesign, we needed to rethink the navigation and build it responsive. The previous navbar consisted mainly of a search box and users often were confused how to search within it. We set a goal to design the navbar in a way that would lead users down the right path without needing to search. Through the web navigation, users were better able to focus on curation, and planning of their next adventure.

Map Your World

Map collections were the main driving factor for most users coming to Citymaps. They wanted a map first approach to plotting their next adventure. We were successful at delivering this experience for years on the mobile app but weren't able to make the transition to web. Once we asked users how they were using each product we found that desktop was used more for planning and native for on-the-go.

Your City Homepage

For the users that weren't finding us organically and landing on our homepage first, we needed a page for the sideways user finding us through SEO. The regional lander was created to be a cover page for the users to pick up halfway down the funnel. If the user already knew what destination they wanted to look in, we delivered an experience that was optimized for them to find what they want.

Native App

Take Your Maps With You

The native app had been in the app store for 5 years before I joined the team. The app was focused on local discovery and map collections, what we now had enhanced on the web. Our users demanded not only functionality but, real-world practicality while globe-trotting. With the addition of some new features and tweaks to the UI, I was able to transform the product into a true on-the-go global travel companion.

Quickly Filter Your Map

We found that users wanted to customize their map view. Having a normal two tap filter was a more cumbersome process than what was needed. We developed the quick filters concept so that users could filter their map view with a swipe and a click without leaving the map view itself.

Concierge at your Finger Tips

When visiting a city for the first time, sometimes you just want to see the top-rated attractions and restaurants. We created the city guides page of the native app for just that. These curated guides allow our users see what the top map collections are or check out the best spots in that city.

Routing Door to Door

After you find the perfect place, the next logical step in for venue search is to navigate your way there. Our routing system could handle four forms of navigation; driving, public transporting, walking, and biking. In app navigation allowed CityMaps to be house all necessary functionality for a travel app.

No Service, No Problem

Allowing users to save points of interest offline meant they could map out their trip in advance. For our international users, this was a sticking point. No more getting lost while in a foreign country, and no more expensive international data plans.

Map Style

Under the Hood

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.

The Impact

After a successful year and a half with the Citymaps team, we were acquired by TripAdvisor in August of 2016. In the time since joining I'm pleased to share some of the key metrics.



Key Metrics

  • Monthly Active Users Increased by 700%

  • 105k social shares of map collections per month

  • Apple Editors' Choice

  • Google Editors' Choice

  • ~200 publishing and developer partners

TEAM

Elliot Cohen

Aaron Rudenstine

Adam Eskreis

Bob Matsuoka

Nicole Brown

Anthony Campagna

Eddie Kimmel

Raja Hamid

Pavel Shub

Anton Akulov

Peter Roach

Anthony Campagna

James Marababol

Sami Badawi

John Tan

Ben Gundersen

John Yue

NEXT

Project