Mai K. Nguyen
Artboard Copy 2.png

Mapbox Documentation Redesign

The goal of this Mapbox documentation pages redesign was to improve user experience with a thoughtful information architecture, consistent design patterns, and a unified site navigation across all pages.

As lead designer, I worked closely with the documentation team to build wireframes, run usability tests, and deliver final assets.

 

Mapbox Documentation Redesign

The goal of this redesign was to improve the user experience across all of Mapbox's technical documentation by addressing some major friction points throughout the system. Some of the issues I tackled included: the use of multiple types of site navigation, inconsistent design styles, and the ever-changing information architecture.

 I worked closely with the documentation team to build wireframes, run usability tests, and deliver final assets.

 

Problem

Mapbox's technical documentation was suffering from a confusing and inconsistent architecture that prevented developers from finding what they needed. Our customer feedback showed that developers were unsure about how to navigate all of our documentation due to the drastic style changes between pages, the 8 different kinds of site navigations, and constantly shifting information architecure. 

The variety of styles used just for Mapbox documentation pages

 

Exploration

After auditing the different types of site nav used through out types of documentation, I identified content components that were high priority for users to gain and maintain context across pages. We explored different layouts to organize all of this information in an intuitive and scalable design. I stress-tested each design with content from our current pages to make sure it could withstand the amount and type of content technical documentation would require. 

mbx-docs_3.png
 

Usability Testing

After narrowing down the direction, I ran some quick internal usability tests. While most of the sessions went smoothly, there were some details around wording that was unclear and unintuitive to some of the developers. In addition, we also gained some valuable feedback about what type of documentation developers gravitate towards when they are in a problem-solving workflow.

 

Solution 

After further iterations, I worked with our technical writer and developer to slice the designs into what would become react components. With a consistent site navigation, unified design system, and clear information architecture, developers will be able to  find what they need to build their apps. In addition, our design also lays down a template for our technical writers to easily publish their documentation without having to reinvent the wheel each time.

mbx-docs_4.png