Overview

MongoDB's Documentation Website receives over 1 million visitors. On a weekly basis, we receive thousands of edits on documentation. It's the main point of reference for developers building MongoDB-based applications and one of the main resources for MongoDB developers.

Go to MongoDB's Documentation.

My Role

I was the only UX Designer on the project working directly with the VP of Education, product marketing, and engineering to redesign their website.

I used a combination of Sketch, InVision App, good old paper prototypes, and Google Analytics. Due to not having an official UI Engineer, I also wrote CSS and HTML to communicate the exact pixel perfect layouts and styles.

Process

  • Google Analytics analysis
  • User Personas
  • User Journeys
  • UI Design System
  • User Testing and card sorting
  • Wireframe (Sketch)
  • Prototype (Invision)
Untitled drawing (2).png

Research: Understanding the User

Many people would land on the page where we list our products, but very few knew where to go from there. Many went straight to the manual but would get frustrated with where to go next. 

v1

The Problem:

There wasn't a guided experience. The documentation was only targeting an advanced MongoDB user.


The Goal

Build a site of Tutorials and redesign their Documentation Page to provide a good on-boarding experience for new developers and great first impression for those evaluating the technology. 


Define Personas

We reviewed the support tickets and feedback forms and then we decided to focus on two main personas – Newbie Nate and Evaluator Ellen.


User Flows

We defined our personas and user empathy mapping and Google Analytics to find the area in which they were getting stuck. We found that they were in desperate need of tutorials. Through that exploration we realized that users don't need a list of our products, they need us to show them what MongoDB can do through tutorials and step-by-step guides. 


Designs: Sketch, Wireframe, Prototype and Build

The team and I spent a series of meetings sketching possible ideas for the website layout. We spent time looking at competitors to see how they formed their information hierarchy and how they guided their users in their documentation. After rounds of Sketch files, Invision App links, and Jira comments, we finally landed on a set of landing pages and a design system for their website.

Why a design system in addition to landing pages? Rather than updating the website one page, one view at a time I thought it best to provide a design system that covered all of the bases. Since we were a small team of designers, developers, and product leads, we could improve the foundation of the design. I even provided some code samples to help illustrate further how designs can be implemented. I worked closely with the developer to execute the designs.

COLORS.png
Paragraph Styles [Code].png

Measure and User Test

With the new implementation of the website redesign, we've installed Fullstory, tracking software, to see where people click and which parts of the site are confusing. We've conducted 15 user tests to see how comfortable users feel with the new designs and onboarding materials, such as user tasks, user interviews, and card sorting activities.