Design Integrations



tl;dr: 
Strategic partnerships and 3rd-party integrations that drive product awareness, adoption, and activation into complementary, yet untapped audiences. Impacts product usage and sign-up metrics, adds customer value and product touch points improving Sales and Customer Success conversations. While remaining self-contained initiatives that do not pull from internal Engineering resources.
I was tasked by Mapbox CEO to empower more visual decision makers with the Mapbox platform. While Mapbox is a platform by developers and for developers, designers are crucial in the ideation and differentiation process that Mapbox products offer.

Mapbox has long inspired designers, however the learning curve has blocked general adoption by the greater design community. I saw an opportunity in prototyping software that could both lead more designers to Mapbox and also ease the design to production hand-off for many of our current clients.



BACKGROUND
Framer X, a prototyping design tool, services thousands of design and development teams with goals to focus on enterprise level enablement. 

Framer has long been a creative coders tool of choice. Users had previously mashed Framer Classic and Mapbox APIs creating workflows, walk-thrus, and demos. Framer X, built on React.js as is Mapbox Studio, was a seamless match for Mapbox integrations.

My task was to partner with Framer and create an integration that enabled designers, empowered developers, and allowed Mapbox to monitor activation and usage. The goal was awareness, adoption, and activation. We wanted new designers and churned designers and teams previously blocked by the learning curve.


 . 
Framer + Mapbox prototype.                        Framer X canvas designing prototypes.




MY ROLE
In my role, I managed designers, engineers, brand marketing, marketing ops, and front-end developers. Owning this project from end to end and also tracking and monitoring adoption, activation, and usage. Reporting directly to the executive team.

My responsibilities included establishing the architecture and functionality for component, designed the promotional materials and content for launch, and managed the entire marketing campaign for the product release. I was also the strategic partnership liaison between Framer and Mapbox.

MVP & STRATEGIC PARTNERSHIP
My first task was to create a minimum viable product or MVP for the Framer X launch. While I was not a React.js expert, I hacked together a barebones component that allowed users to pull in custom Mapbox map styles and set the map location on latitude and longitude locations either from a list of cities or by entering the values directly.

I had to move quickly to make sure the Mapbox component shipped with the launch of Framer X. This also allowed Mapbox to become a heavily featured component in the Framer X Store. And be mentioned at the Framer X user conference, Loupe in Amsterdam.

At the Framer X user conference, I heard from designers from Lyft, Slack, Facebook, and TomTom. I was able to gather intel on the design tooling space while making connections with top designers in the industry.

I also connected with the Framer team; including Framer CEOs about continued collaboration opportunities between Mapbox and Framer.


Framer’s Loupe Conference 2018, Amsterdam, The Netherlands.




V2 PROCESS &
TARGET AUDIENCE
This integration was focused on designers building with Mapbox. Pulling from the user research on Designer Personas, I targeted two of the five segments: Product Architect and Product Designer.

The Product Architect personas typically lead teams of designers and engineers. They needed better internal systems and workflows that kept designers unblocked, but also kept engineers from constantly working on small, incremental changes.

The Product Designer persona owned and iterated on the flow and UX of an app or online experience. They worked closely with engineers and needed to express more of their motion and vision in their prototypes and mockups as their projects moved into production.


Product Designer and Product Architect personas.


Armed with these two personas, the process included: establishing desired outcomes, abstracting the workflow into modular parts, then building those components into the integration. I also wanted to add better tracking and a more guided route to activation.

I pulled resources from the Sales Engineering Service Owner to establish the functional needs for these updates. I began by identifying how users would ideally use this integration. This included an enterprise user interview and learning to use Framer X. 

Once I’d established a few end goal prototypes, I worked backwards to abstract this functionality into requirements and acceptance criteria. Then I drafted a Scope of Work document including the technical requirements, acceptance criteria, and timeline and requested a project budget from the VP of Brand Marketing.

The functional specs included: a watermark for Mapbox account log-in, only core map styles revealed without Mapbox account log-in, an expanded “designer map styles” list revealed when users log-in for Mapbox accounts, a functional geo location search box, the ablility to add custom location JSON file and assign markers designed in tool, and the ability to animate from location to location controlling duration and speed. 

I managed the product build coordinating with an external team of engineers for the one month project using video chat and GitHub tickets and branches to build the component.


Sketches: City location map 


Sketches: Location stack
 




PRODUCT LAUNCH &
ENGAGEMENT 
Once the component was complete, I managed an internal team of five-- a technical writer, video manager, videographer, copyeditor, front-end developer, and marketing ops to roll out landing page, marketing content and social media campaign.

This campaign was aligned with push from the Framer Growth team. We hosted a joint webinar with 89% promoter score and co-marketed our integration on the Framer blog, weekly newsletter, and via social media.

The update launched April 2019, boosting downloads by 225% over one month and growing activations 3x to our Mapbox platform coming directly from Framer. Active developers grew by 168% within 30 days. Our total downloads making Framer’s Top Ten list with a whooping 15,000+ downloads of the Mapbox component to date.



The portfolio of Amy Lee Walton.