Designing Interactive Maps

Over the course of our careers, Andrew Possehl and I have designed for many mediums and dealt with all sorts of data and content types, turning them into successful design experiences. But in 2021, we found ourselves working simultaneously on different interactive map projects for Probable Futures and Audubon, and we were struck by how much we learned on these projects. 

Designing for interactive maps requires a different mindset than designing for static maps and comes with a learning curve that neither of us expected to encounter. Each project is unique, but we’ve broken down our learnings into eight buckets in the hopes that sharing our experiences will help shorten your own learning curve.

1. Basemaps

Although there are many important decisions to be made when designing interactive maps, the basemap is a crucial foundation and the first item to check off your list. A basemap is the reference layer of an interactive map — everything else will be built on top of it. Your options will depend heavily on the tooling and platform you choose. Most platforms have out-of-the-box basemaps that are ready to go but offer only minor customization options. For fully customizable solutions, Mapbox is a great platform, and it’s what we chose to use at Postlight.

When customizing your basemap, make intentional choices to select colors, typefaces, and topographic alterations that serve the interactive needs of your project. For example, if your project is about navigation, you may be able to turn off topographic features and choose colors and features that emphasize roadways. You will most likely be updating your basemap as your project progresses and you learn more about what’s needed, so don’t worry about getting your customization perfect from the outset.

2. Projections

A map projection is the act of taking a 3D rendering on a globe and making it into a map that works on a 2D plane. Most map projections have different amounts of distortion to achieve this. Two of the most well-known map projections are Web Mercator and Robinson. 

Web Mercator projection is used in many modern mapping applications (Google Maps, Mapbox, Apple Maps) because it does a good job of establishing straight lines between two locations. The distortion on this map increases the further you move away from the equator, so it’s not preferred by scientists who need to show global views. 

The Robinson projection does a better job of dealing with distortion further away from the equator and does a better job overall of representing the globe on a flat plane. However, it is not the best map for navigation because of its curved areas. 

3. Audience

As with any project, defining your audience is essential. The discovery work here will cascade into other decisions later down the road. A good place to start is by gathering a list of existing mapping products that are used similarly to how your map product will be used. If there are no real-world comparisons, that’s okay — start by writing down a few key features you anticipate needing to support. From there, you can tap into your personal network to see whether anyone you know uses the products or features you have drafted.

Schedule a time to talk to these people and hold an informal interview session. Write an interview script that includes questions that help you learn about how they use the specific product or feature you are trying to learn about. These can be prompts like, Tell me about the last time you used said feature, or, What is something you wish this product did that it does not do? You can treat these interviewees as a blueprint for the users of your map. If you design your map to support them, you’re on the right track.

4. Information density

If you’re starting to feel like mapping products can be complex, you’re not wrong. Not only do these products try to convey ideas visually using data, but oftentimes the map itself is the interface that users will interact with to navigate around the product. This is where contextual information density becomes very important. At any given point in your user’s journey, there are specific things they should learn from what they are looking at. Use this to your advantage.

Tip: Craft your design patterns around context

Take mental stock of the different pieces of your interface. Are there any pieces that need to be displayed at all times for optimum usability? These can be things like primary navigation, branding, the basemap, etc. What interface elements could be designed to show or hide based on the context?

Information panels are a great example of these types of elements. Information panels are used to display data after a user interacts with elements on the map. They don’t need to be shown at all times. Identifying and grouping your interface elements based on importance can help group these smartly.

Tip: Utilize zoom and pan

You can take the same approach with your data and information density as users zoom in and out. Giving users an overview of data at high zoom levels is a much better viewing experience than showing them everything. This view allows them to zoom into areas of interest and uncover more data as it dynamically shows upon zoom. Think of it almost like a frame for information and only include what is necessary to convey the intended takeaways at each zoom level.

5. Binning

Before designing maps, I made charts and graphs with data that came to me in set increments or bins (the way the data was broken down). Until working on interactive maps, I had never had to think about how the bins could influence the story the data told and how changing the bins would influence the data. 

For the Probable Futures map project, the team thought heavily and explored how breaking up the data would affect the story being told through the map. We wanted to make sure the breakdown of the data in the key (aka the binning) was displayed in an intuitive way that didn’t distort the data. We looked at the data in incremental increases and doubling the data for every bin.

It’s amazing to see how much the data changes or shifts. Through this exercise, I learned that how you bin the data is just as important as the colors and visualization of the data. 

6. Color

Color has a big influence on the story the data tells on a map and holds a lot of power in what the user walks away knowing. For example, when working on the Probable Futures platform in collaboration with Moth Design, we did a deep dive on data color palettes. We were surprised by how different the colors could make the data look and feel for the user. 

Color palette experiments:

Color to display binning:

We chose a unique color palette that allowed each data bin to show up distinctly and illustrated the progression from one bin to the next. The palette also ensured a strong distinction between the first bin (zero) and the second bin by using bright green against a neutral gray. This helped clarify when a location was moving from never having experienced a heat event to beginning to have one — which is a big deal through the lens of climate change.

We also made the color palette as accessible as possible. We researched color-blind-friendly color palettes and ran our colors through color-blind simulators to develop a color palette that is accessible to red-green color-blind users and blue-yellow color-blind users.

7. Typography

Typography is such a valuable tool in design and does a lot of clarifying work on maps. For Probable Futures, we first picked a sans serif font that was a little condensed. This type of font is easier for people to read, and we could fit more text in a smaller space. Next, we made sure our font read well at small sizes and that each letter was distinct and unique so that users could read it quickly and clearly. Finally, we examined the kerning of the location labels to ensure that there was enough space between each of the letters so it would be easier to read at a smaller point size.

Next, we thought about what would appear at different levels on the map since the user can zoom in and out on the map. When the user is zoomed out, we don’t show any country names or cities. We wanted the user to focus on looking at the data — the map lets the user know where things generally are in the world. We consciously decided to strip out political boundaries on the Probable Futures maps, which allows the user to focus more on the data and use country and city names as a wayfinding tool when needed at closer zoom levels.

8. Data display

Your project, when complete, will allow users to interact with data, so it’s essential to determine precisely how you want this data to be displayed. The optimal solution is a flexible library of consistent patterns to pull from. These patterns should have clearly defined behaviors, constraints, and use cases so that your product feels cohesive when complete.

It may help to take an inventory of the types of information your users will see at any given time. You don’t have to capture every piece of information; the goal is to have broadly defined categories. Think about how best to display this data. Nothing is more disorienting for a user than interacting with a UI element and expecting one thing but having a completely different result. Consistency is key.

We’ve learned so much about how interactive maps work and how best to present complex data to users. If you have a project involving interactive maps, we would love to hear about it. Please reach out if you’d like to chat further.

Andrew Possehl (he/him) is a Lead Product Designer at Postlight. Kirsten Sorton (she/her) is a Director of Product Design at Postlight. Looking to bring your digital product to life? Get in touch.

Work for Postlight! Love making exceptional digital products? We’re hiring engineers, PMs, designers, and strategists. Let’s grow together. See openings.