Case Study
Developer Experience
In December, 2016, we started an overhaul of our entire developer experience, from onboarding flow to the documentation system. The primary goal is to increase SDK activations and create a more engaging experience for developers across all the platforms. I had the opportunity to collaborate with many different teams at Mapbox, from support to business. Here is an overview of three individual projects that's part of this endeavor:
1. Developer Onboarding
My Role
UI
Team
Tom MacWright (UX & engineering)
Saman Bemel-Benrud (UI & engineering)
David Clark (engineering)
Release Date
March, 2017
View this live
Mapbox enables developers to control the entire experience of their applications, from the visual design of the map style to interactive features like spatial analysis and turn-by-turn navigation. Making the entire integration experience seamless is crucial to the success of our products.
Developer Onboarding flow
Initial wireframes of steps users need to go through to install Mapbox SDK.
1. Select a paltform
2. Set up the dev enviroment
3. Select a map style
4. Complete and explore more examples
5. Analyze API usage from the dashboard
6. Explore other Mapbox products
In early days, the onboarding flow focused heavily on professional GIS users and cartographers. As the product focus shifts to be more developer-oriented, we needed a method to help people start building and tinkering right away.
For the new on-boarding flow we focused on a very simple task: adding a basic map view. After the install flow, we guide users to more complicated examples. A discovery through user interviews is that code examples, not documentations, are a primary source of how people get started with Mapbox tools.
After the launch we've seen an increase in new account activations, mobile SDK adoptions, and other metrics. Platform separation also allows us to collect more accurate persona information for targeted marketing campaigns. The open/click-through rate of our on-boarding emails increased significanltly with an CTA of 30% for Android developers.
Three versions of the signup page
The signup page was the main entry point to the onboarding flow. Each version focuses on a specific selling point of the SDK, including customization, ease of use, and search/navigation features.
2. Help Redesign
My Role
UI
Team
Katy Deborah (engineering)
Colleen Mcginnis (UX & engineering)
Release Date
July, 2017
View this live
Help Redesign Wireframes
On home page, better search results formatting. Clear separation of categories.
Group tutorials based on language and difficulty levels.
Organize step-by-step guides based on three main user groups.
Mapbox has an incredibly complicated product system. It allows people to build powerful things, but it can also be a bit daunting to learn it at first. Our amazing support team has produced hundreds of narrative guides and step-by-step tutorials. But it can be challenging to navigate those content sometimes. Our help page at some point simply became an index page containing hundreds of links. Two questions we asked ourselves at the beginning of this project are: How can we help users find the content? How can make the existing content shine?
How can we help users find the content? How can make the existing content shine?
One significant improvement of the redesign is definitely better search and navigation. We color-coded articles that belong to different categories and show those tags in the results listing. Moreover, the search input and the dropdown navigation are visible throughout the entire site. No matter which page the user is browsing, they will be able to find the information they are looking for. The article page is redesigned with better typography to help users focus on the content. Small details like floating sidebards makes links to related context more visible.
Guide oage illustrations
Illustrations I created to help explain concepts and make the page more friendly.
3. Documentation system
My Role
UI & UX
Team
Nadia Barbosa (iOS)
Cameron Mace (Android)
Dan Swick (Unity)
Release Date
Work in progress
View this live
Documentation System
Documentation system consists of a main developer page and documentation pages for different SDKs.
Developer home page.
iOS SDK documentation
Unity SDK documentation
Documentation is the most crucial part of our developer experience. In the past, the technical documentation is managed separately by individual teams, with very different visual and content styles. Sometimes users were confused by the lack of consistency when they try to use more than one building block or develop on multiple platforms. We realized that the separation of teams should not be reflected in our documentation system. And the organizational structure should not prevent us from providing a cohesive product experience for our users.
Standardization offers us a unique opportunity to rethink the content architecture and visual design. One unique challenge for Mapbox is it has a complex product structure. There are usually multiple SDKs for each platform and not all platform has the same features. To reduce the complexity, we allow users to pick a platform first before diving deeper into what they can build. We also created a few page templates page with reusable components such as top menu, left navigation, and sidenotes to ensure visual consistency.
Two-level navigation system for documentation
Allow users to pick a platfrom fisrt before diving into specific building blocks.
Nested navigation component
A reusable navigation component that's being used across all SDK pages.
Built with React, Next, and Tachyons