The role of maps in products
Back in 2014, I started working on Piinpoint, a spatial analytics tool to help retailers expand their physical stores. There were many great resources on designing maps and building products, but I couldn’t find much about how to put the two together — how to build great map products. Later on, I started working on location targeting for Facebook Ads to help businesses connect with the right people at the right places. Here’s what I wish I knew when I just started designing with maps.
Why maps?
When I first started working with maps, I was excited and overwhelmed by all the choices. There were so many options with the colors, styles and functionalities. Now I recognize the importance of taking a step back and looking at the problem you are solving. By understand the problem you are trying to solve, you can see how maps can help.
Here’s examples of how maps helped with visualizing and exploring:
Visualizing
Over 500 people died during The Broad Street cholera outbreak of 1854.
Physician John Snow plotted the outbreaks on a map and found that cases of cholera were centered on a contaminated water pump. He also used this map to identify unaffected areas and found that residents who drank beer instead of the contaminated water did not get sick. This discovery paved the way for improved sanitation facilities.
Exploring
Google maps can actually prioritize different information by looking at the coordinates and zoom level on a map, the user can understand where they are looking and what is nearby. This information also helps us know what to show and hide on the map.
Google Maps takes advantage of this to show you information inside a building when you zoom in far enough.
The roles of maps
Here’s 4 main roles I’ve seen with maps. Based on the problem you are trying to solve, your map could fit into one or multiple of these roles.
- Explorative— Manipulate spatial data
- Informational — Visualize spatial data
- Supportive — Provide spatial context
- Showcase — Tell a story spatially
Explorative
This type of map helps you dig deep into spatial data. The functionalities of the tool take full advantage of explorative nature of maps. These products help us connect data to real life through the physical context of maps.
Example: Planning transit routes with Remix
Informational
This type of map helps you visualize spatial information. The user can navigate and understand the relationships between the data more effectively with the map.
Example: Understanding neighborhoods with Trulia
Supportive
This type of map supports the rest of the interface by providing context. The map shows the locations, but most of the information and filtering are on the rest of the interface
Example: Finding a place to stay with Airbnb
Showcase
This type of map makes spatial data look like art. The map is focused on showcasing a few key pieces of information really well. There are less ways interact and more time to observe and understand.
Example: Exploring climate change with Audubon (by Stamen Design)
Designing different maps
Different maps present different benefit and challenges. To make the right trade-offs, you need to understand the problem and the role of the map. Here are two examples with the map products I worked on.
Organizing functionality around an explorative map
With Piinpoint, the map is definitely the hero. However, it can only function with support from the rest of the interface. When we started to add more features, the interface became more and more crowded. This was what the tool looked like in February 2014.
Two months later, we’ve doubled the number of features but the interface did not feel more cluttered. Simplifying and reorganizing the rest of the tool allowed this explorative map to shine even more.
Fitting a supportive map into an established product
The location targeting map for Facebook Ads fits into the tight constraints of the interface while providing visual feedback. The map only shows when a user edits the location and hides with the click of a button. When a supportive map is displayed at a small size, other parts of the product will need to handle more of the interactions.
Resources
There are tons of great resources online but here’s 3 I found particularly helpful.
Learn about about how maps solve complex problems:
Get inspired by the works from Steman, a map-focused agency:
Start making your own map with the resources on Mapbox:
