Mapbox

As lead product designer for Mapbox Studio, my goal is to make map design approachable for beginners, capable enough for pros, and inspiring for all.

The Data Visualization Component

About

The Data visualization component makes it easy and fast for users to create advanced visualizations in Studio, such as election or public health maps. It breaks down what once took domain knowledge of data visualization and advanced Studio expertise into an approachable yet powerful workflow. 

Whether you are a technologist in a newsroom who’s proficient in Mapbox gl-js or a visual designer at an agency who’s new to data visualization and mapping, the Data visualization component helps users: 

  1. Visualize your data on a map: You know you want to make a choropleth map with your own data and want Studio to guide you through the steps.

  2. Explore different data visualizations: You are not quite sure how you want to style your data and want Studio to help explore the options. 

  3. Quickly prototype: You are going to use live data for the visualization and want to quickly prototype how to style the data in Studio with minimal effort. 

  4. Make it effortless: You want to have confidence that your map is not only beautiful, but that it’s colorblind-friendly.

Read more on the Mapbox Blog.

Making the Data Visualization Component

Discovery

This project kicked off with interviews of internal stakeholders & customers with a range data visualization experience. I asked users to walk me through their most recent visualization projects to identify pain points. A card sort helped gauge user’s understanding of data viz concepts and determine the best language to use.

Design

With clear insights from customers, I ran a week long design sprint with a cartographer and front-end engineer. Through several rounds of wireframes and reviews, a leading concept emerged that satisfied the needs of our target users. After the sprint, I continued to collaborate closely with the cartographic designer as a domain expert and with the front-end engineer to push the technical boundaries of what would be possible.

Validation & Launch

I realized early on that this feature would be unique to usability test because it is highly interactive and dependent on user data. We decided to run several rounds of internal testing with prototypes, refine the interactions, and then build the component to put in front of customers so they could try it with their data. From here we iterated and refined the feature with their feedback before expanding the beta and finally launching to GA.

 

Process & Leadership

I’m passionate about design. At a company where design is a new discipline, I’ve worked to secure design a seat at the table with engineering and product.

I’ve lead many efforts to keep our team running and thriving, such as:

  • Representing design in strategic planning for our product

  • Setting a high bar for quality by establishing a design process that includes: user-centered problem framing, iterative design, usability testing, & beta periods

  • Building empathy for the user in a engineering-focused organization by including engineers in customer engagement sessions

  • Cultivating a culture of collaboration and inclusivity with engineering & product through design sprints

  • Partnering with account managers to access customers & understand their needs

  • Developing hiring & onboarding processes to grow the product design team to 4

  • Evangelizing the impact of design across the company by creating a user centered design guide for anyone

  • Leading team design critique and monthly cross-functional design meet ups

My Role

I’m in charge of everything from the design of complex features, strategy, hiring, mentorship, and whatever needs to get done.

Team

  • 4 Product Designers

  • Cartographer

  • Front-end Engineers

  • Back-end Engineers