Mapbox for Designers



Adding custom, interactive location to your designs & prototypes made easier with Design Integrations.



While Mapbox is a platform for developers by developers; designers are crucial partners in delivering the brand promise of custom location experiences.

Design Integrations were created to meet designers where they are—inside of today’s most popular design tools. Unlocking live location directly inside the modern designer’s workflow.



Vacay Finder app screens in the Framer UI


Vacay Finder app prototype built with Framer X + Mapbox




THE CHALLENGE

Custom location experiences distinguish brands and delight users for Mapbox’s top customer apps. But the tech ramp-up required to get quick “design wins” blocks many teams from leveraging the full Mapbox promise in the early stages of app design and ideation.

While our core tool Mapbox Studio is powerful for map design, many designers use standard design tools to invision full mobile and web app designs. Designers are rarely creating solo custom map styles; but designing harmony across app UIs and interactions alongside location. We needed to bridge these offerings in a frictionless way. 


MY ROLE

I drove this initative from end to end. Collaborating with internal engineers, solution architects, marketing ops, documentation, and analytics, and worked with cross-company growth and marketing teams, and managed external engineering teams.

I now manage internal and external designers across product design and prototype work as we maintain and scale our offerings.

SOLUTIONS

I built the first design integration in prototyping newcomer, Framer X. The Framer X codebase was built on top of React.js, like much of Mapbox and integrates live data sources with production ready component frameworks. Here’s an outline of the offering:

Add a Mapbox map (with search)
Lets users embed any Mapbox map style into their Framer project, set the location, and add a functional search box with autocomplete and the choice of six search lanuages.

Animate a Mapbox map
Lets users move the camera to custom locations around the world. They can zoom, twist and tilt the map, while controlling the speed and duration with progression by click or autoplay.

Add points to your Mapbox map
Lets users upload custom locations directly in Framer X, set marker designs, and popup content. Search boxes strictly search uploaded data; allowing users to show or reveal data as needed.

Deep dives into the full product design process available upon request.



Framer X + Mapbox components screens unlocking live location in power prototype design
 




IMPACT

Integrations in Framer X, and more recently Figma, have driven over 2.5% of overall active developers. Spiking Mapbox Studio usage by 6%.

We’ve also seen an uptick in talented designers and external teams leveraging and building Mapbox workflows for design tools. More designers are creating custom location experiences and identifying how the Mapbox platform can unblock not only their teams but design industry at large. We’re scaling crowdsourced collaborations to expand use-case coverage and grow awareness.



Figma + Mapbox plug-in created by Product Designer, Chris Arvin.
Portfolio of Amy Lee Walton