Earlier this summer, Stamen collaborated with the team at MetroMatch to update the look and feel of their transit-first navigation tool.
MetroMatch is a transit-focused travel planning and discovery site that connects travelers to destinations that are only a short walk from rail stations. MetroMatch’s pilot focuses on Washington, DC, taking advantage of the region’s extensive rail network and transit-oriented development to demonstrate how easy it is to access hundreds of hotels, restaurants, attractions, and other destinations without needing a car. For more extensive planning, you can follow itineraries crafted by locals for a day in the DC area along any Metro line.
Our collaboration
Stamen first encountered MetroMatch at the State of the Map US conference earlier this year in Boston, MA (read our post about SOTMUS here). MetroMatch founder David Schneider presented about the project and how it primarily uses OpenStreetMap data. Watch his presentation here.
With our specialization in web cartography, Stamen saw an opportunity to invest a small amount of effort with major returns for the tool. Conferences are a great place to make connections and identify projects where a collaboration may be helpful!
Modernizing the map
Stamen specifically focused on updating the basemap to use vector data instead of raster tiles, customize what features are visible on the map as you zoom in and out, and use a modernized color palette that better supported the bright, bold colors typically used for transit systems.
Before our collaboration, MetroMatch was using Voyager, a style designed by CartoDB (now Carto) over a decade ago. They were using Leaflet, a popular Javascript library, to render raster tiles. This common approach is fine, but it does limit the user’s ability to smoothly zoom in and out of the map.
We decided to switch to an easily maintainable style, which we created in Mapbox Studio and would be easy for the MetroMatch team to adjust later as needed. This would also integrate nicely with Mapbox GL JS, which has many similar interactive features as Leaflet.
From a cartographic perspective, we wanted this map to feel clean and polished, while providing a contextual background for transit line, station, and destination data featured on top of the map. Moving to a slightly more neutral palette allows colors that might have been hard to see on the previous map to be highly visible.
Since we are focused on Washington, DC for this initial release, green space and water felt like the obvious features that could depart from the neutral palette. Many of DC’s main visitor attractions are museums on the National Mall, the large park occupying the center of the city on the map below.
Alongside basemap updates, we made a handful of small but powerful tweaks to the layers on top of the basemap. For transit routes, we offset lines to give an appearance more similar to a transit schematic, where it’s easy to see which lines run along each track. Now, it’s much clearer where the Orange, Silver, and Blue lines converge and diverge across the DC area.
We updated the icons used for destinations on the map to change size as you zoom in/out and implemented colors that better align with the basemap palette. Something as simple as a background for each icon can make it clearer that destinations (like hotels, coffee shops, and so on) on this map are clickable, whereas features on the basemap are not.
We also introduced labels for destination icons and transit stations so users need to do much less clicking to get information about places on the map that they may want to explore.
What’s next?
After launching in DC, MetroMatch plans to continue to improve its design and features based on feedback from users and hopes to expand to additional cities in the United States later this year.
MetroMatch is available in the App Store and Google Play Store now. While the map only has destinations and navigation data in Washington, DC for this launch, you can download the app and explore the basemap from anywhere.
If you’d like to receive additional updates from MetroMatch as they continue developing their app, you can sign up on the site to become a friend of MetroMatch, follow the team on LinkedIn, or email connect@transitdiscoveries.com.