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
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