2024

Mapbox Studio

Product Design, Figma, React

While at Mapbox I led design for Mapbox Studio, a web tool that helps developers, cartographers, and designers create beautiful and functional map experiences. I shipped dozens of features in my time there; here is a small selection:

Weather Data Visualization

One project I worked on was enabling weather visualization for engineers in newsrooms and at weather organizations. Raster MTS provided new support for GRIB files, and other standard weather formats. My job was to learn what users needed from this feature and provide support for it in Studio.

Mapbox Studio raster colorization feature. A map on the right shows temperatures with a warm color palette. The product UI shows a list of color stops with different values.

I added features to support:

  • New categories of default color palettes to help distinguish between use cases for the colors (categorical, divergent, continuous)
  • Modernized UI that supported creating color stops and assigning custom colors to different values coming in from the weather data
  • Ability to step through different “bands” of the data (this usually encodes timestamps such as the rainfall every 6 hours) to preview styling with different values.

Developer Console

I was part of a tiger-team tasked with uncovering ways to improve the developer experience for Mapbox customers. We identified several improvement opportunities for the company, one of which was to have a more cohesive home for developers.

Previously we had a generic “account” page that new users landed in after signing up. With the new Developer Console, users were dropped into a home that would serve as the jumping off point for whatever Mapbox services they chose to work with.

The mapbox developer console is a dashboard that shows recent styles, a summary of service usage with small sparklines, and a sidebar allows for navigation between projects.

MTS Usage Data

Mapbox updated how they priced the usage of Mapbox Tilesets. As part of this effort I supported ways to visualize the new usage metrics in Studio.

I added a small usage indicator to each tileset that showed whether a tileset had any usage and what amount. And I added a sidebar to the list page that showed the distribution of active and inactive projects by the new pricing definition.

A view of a Mapbox customer's Tileset list page. The right hand side shows a bar chart that indicates the number of active and inactive projects, and each listed item has an icon and a number that indicate the number of times that tileset has been used in the past 30 days.

Map projections

As part of our launch of Mapbox projections, I created a set of icons to help users understand what different projections mean.

All of the projection icons that mapbox supports in a grid showing their default, hovered, and active states.

I then implemented the popover into the product with these icons adding the ability to switch between map projections in Studio.

A popover in Mapbox Studio shows some of the possible projections including Equal Earth, Equirectangular, Globe, and Lambert. Each item has a custom icon that visualizes the projection type.

Back to all projects
;