Documentation Site |  Redesign | Web

Redesigned pain-points in Cloud Elements’ documentation site. The key changes explored were: a clear call to action for users landing on the site for the first time; improved the overall navigation by simplifying the site’s information architecture and making all documents accessible from anywhere in the site; implemented deliberate design principles to pages for improved readability and overall content management.

“API integration -
it’s that pesky part of making a product that no product company actually wants to do. 
Who can blame them? It’s not easy!”

To cloud elements, integration is bigger than just one connection, by fully using its services you are able to do thousand of other functions.

Cloud Elements 3 Pillars of Integration

 

HERE'S WHAT WE KNOW

Cloud Elements (CE) current documentation site was built as an all in one place for guides, reference materials, and FAQ content. Currently, they have 9 different sources of documentation and having so many sources makes it challenging for users to onboard effectively. It is also evident that users are not clear on what they should do when coming to the site for the first time or exactly what Cloud elements are all about. This increases user frustration translates to a lower conversion rate of new customers.

Cloud Elements Current Site

The challenge is to improve the documentation experience to ensure successful onboarding of new users, while providing a point of reference for helpful content.

HOW DO OTHER

DOC SITES MANAGE IT?

Documentation is an invaluable resource for users . When it comes to documentation sites, they all seem to face the same challenges; intuitive, efficient and up-to-date documentation.

 

Bootstrap

Delight #1: Sticky global search sorted by category
Delight #2: Symmetrical three column layout

 

Pain Point: Right hand nav has no current placement indication

Slack API

Delight #1:  White/grey contrast draws attention to content
Delight #2:  Symmetrical three column layout

Pain Point:  No search bar

MuleSoft

Delight:  Right side navigation with color indicator
Pain Point:  Cluttered Left nav with unnecessary icons

A CLASSIC SCENARIO

The sales staff has closed a deal with a SaaS company to use Cloud Elements to solve their integration problem.  Sales typically sells to a Product Manager, Product Owner, VP of Product, or CTO. Most often this information is then dumped on to “the developer” who has already got a lot on their plate and is now tasked with finding out who Cloud Elements is and learn more about the product in order to use it and be successful.

 

"The Developer"

ERIC

“I want the API to be simple to use, a system that is scalable and accessible.”

Eric is a developer and has been working in the tech industry longer than he wants to admit

Goals

  • Want to get working with code ASAP

  • Don’t want to read a ton of docs

  • Quickest path to ‘Hello World’

Frustrations

  • How much documentation am I going to have to go through before I can get started?

  • What kind of payloads or data am I working with - need to know quickly

  • What kind of security do you have with my data?

 

Objective Key Results

Homepage Revision

Inform user and provide guidance

 

Navigation

Provide a clear method of finding a desired page

 

User Interface

Present a scannable and digestible layout

INFORMATION ARCHITECTURE

Consolidating all sources of documentation into one dedicated site was the first recommendation agreed upon. Now the challenge was to sort an already large amount of information into more manageable and relevant chunks for the user. The image above is the initial map of the existing site we plotted. There were 12 parent menus with some of them going 5 levels deep. Collaborating with the client, a lot of refinement of redundant or duplicate pages helped solidify a more streamlined site. Below is the redesigned architecture and the idea is that the content window can be filled with relevant documentation and have the rest accessible within 2 clicks or less.

 

THE DESIGN PROCESS

We started out by mapping Cloud Elements' existing doc site structure and visually exploring the project brief and user needs.

WIREFRAMES

From synthesizing the data and combining ideas, I moved on to wireframing and created the first prototypes. With this initial prototype we conducted our first batch of user testing.

 

USER & A/B TESTING

We talked through our design thinking and lead users through various flows to obtain feedback on their overall experience. There seemed to be some confusion on how the global search feature would work given that one item may be in various documents as well as may mean different things in different setups. This was something we hadn't thought about and would have to researching further.  Users and the Product Owner felt the landing page was still not clear enough and the CTA needed to be more prominent. But the main takeaway was that all users agreed that the proposed navigation setup was clear and intuitive. The general feedback about the content layout was that it was easily scannable and manageable. found particular delight if the document site could be personalized being able to save relevant docs, book mark, comment and share. This feedback was invaluable and was used to revise the prototype.

Column Navigation A/B Testing

2 Levels in the Left Column with less content on the right

1 Level in the Left Column with more content on the right

Users preferred this setup.  They found navigation was easier and like the control of being able to see what was in a section by using progressive disclosure.

Key Terminology A/B Testing

Highlighting of key terminology

Bolding of key terminology

Users preferred this setup.  They found bolding enough of difference to emphasize key or important content and found the highlighting offensive to their senses.

Catalog Layout A/B Testing

Layout Option 1

NB. Although the layout was not the one chosen, all users prefered the way the search and top filters were laid out on this page. We took note and added this the final page.

Layout Option 2

Users preferred this setup.  They liked the right hand column and the overall layout of the page. It felt familiar to the rest of the site.

HIGH FIDELITY MOCKUPS

After testing and refining new ideas - from wireframes, we moved to High Fidelity Mockups.  I applied product branding, grid structure, typography, color schemes, and icons.

 

ITERATIONS

Home Page  - Landing page CTA and Layout

Having the "Getting Started" tab expand offered the user more options and a clear understanding of the next steps needed. The infographic or design meant to show the relationship of the 3 pillars of integration changed the most, eventually ending on the stripped down version with a clear call to action and the steps clearly numbered to show their order and relationship to each other. All the "more" information is now tucked below the fold to reduce clutter and to have in case the user needs to know more.

Page Layout - Asymmetrical Columns & Column Width

One of the major changes was making the 3 columns Asymmetrical. This helped with the overall hierarchy of the left and right navigation as well as made the page more visually appealing. The main content column got reduced to 700 pixels in width - this is the optimal width that users comfortably track from one line to the next when reading. More padding on the sides of the document helped with breathability especially on the more content heavy pages.

 

NEXT STEPS

Home Page Animation

Interactive/Animated Infographic

Visually communicate who Cloud Elements is and the relationship of the "3 Pillars"

Personalized Doc Site

The User will have the ability to:

Save and Bookmarked Relevant Content

Company Login/Shared Content

Social/Community Based Features

 

NEXT

LET'S

GET

IN

TOUCH

© 2020 Mark Chittenden.