Foursquare: maps designed for functionality
Foursquare users will notice a cool web update today: beautiful new maps, using a totally custom style we designed in collaboration with an amazing team at Foursquare. In addition to being designed around the Foursquare brand, using their colors, fonts, and iconography, these new maps are specifically designed for functionality. With 60 million venues in its database, Foursquare is the place to discover a trending new bar for an after-work drink, the search engine to find the best taco stand in a new city you just landed in, and your space to track all your favorite coffee shops. It’s unique, and its maps need to be designed to make it even easier for users to engage in this unique social searching. The details matter — from better references for neighborhoods and highlighted public transportation to a look-and-feel that’s 100% integrated with the rest of the platform. The map is the context for the app.
Maps make up a significant proportion of the Foursquare web interface, so it was important to create a seamless aesthetic between the maps and the rest of the app. To do this, we created a color palette that is similar to that of Mapbox Streets (previously used by Foursquare) but derived from Foursquare brand colors. We kept the colors lighter and more desaturated than the rest of the Foursquare UI though, so that key elements like place markers and headers remain in the foreground.
We typeset the prominent labels — such as country, city, and neighborhood labels — in Gotham, Foursquare’s display typeface. For smaller, less prominent labels — such as road labels — we used Helvetica, Foursquare’s body typeface:
We incorporated subtle patterns for parks and bodies of water, inspired by the design of Foursquare icons:
We did more than just customize colors, fonts, and patterns to match the Foursquare brand, however. One of the more interesting aspects of designing a custom base map is our ability to customize the information hierarchy, to highlight the most important information for users at each given zoom level. This map more prominently features the neighborhoods and local landmarks (important POIs), providing a more helpful point of reference. A slight decrease in the density of road labeling helps maintain this hierarchy:
At higher zoom levels, more road labels appear to help direct users to specific places:
Instead of departing radically from the existing map (our out-of-the-box Mapbox Streets, which already functioned well on the Foursquare platform), we focused on the subtle elements that really elevate this custom design. I’m excited to see Foursquare take advantage of our capability to customize their maps, down to the smallest of details.
Map data: © OpenStreetMap contributors.
