Overview
A redesign of a series of web pages for the documentation site of Cloud Elements. The areas explored included:
• A clear call to action on the homepage
• Improved site-wide navigation
• An information architecture restructure within consistent design principles and brand standards
• A clear call to action on the homepage
• Improved site-wide navigation
• An information architecture restructure within consistent design principles and brand standards
ROLE
UX Researcher
UX/UI Designer
UX Researcher
UX/UI Designer
SCOPE
Agile, 3-week sprint
Team of four
Team of four
Platform
Responsive Website
Tools
Sketch, Adobe Illustrator
What is Cloud Elements?
A company that provides an application programming interface (API) - based service with a catalog of over 150 pre-built connectors, or “Elements”. These allow customers to set up integrations between software platforms that otherwise would not be able to communicate.
A common use case is a customer using Cloud Elements to connect Salesforce to Slack to notify employees about the closing of a recent deal.
“API Integration – it's that pesky part of making a product that no company actually wants to do. Who can blame them? It's not so easy!”
- Greg, previous Lead UX Designer at Cloud Elements
- Greg, previous Lead UX Designer at Cloud Elements
To Cloud Elements, integration is more than just one connection, by fully using its services you are able to do thousands of other functions. Their philosophy revolves around three main "pillars".
The Challenge
Currently, they have 9 different sources of documentation including guides, reference materials, and FAQ content. This is a major issue for users to onboard effectively and minimizes the likelihood that they'll return to the site. Upon the first arrival, most users are not clear on what they should do.
This increases user frustration and translates to a lower conversion rate of new customers. Are there ways to improve the documentation experience to ensure the success of new users, while providing a point of reference for helpful content?
Initial state of the Cloud Elements Documentation website
Research
Competitive analysis
Although documentation is an invaluable resource for users, all documentation sites have different approaches to displaying intuitive, efficient, and up-to-date content. Analyzing UX delights and pain points for a variety of competitors and industry leaders was an essential part of my design process.
Bootstrap
Slack API
MuleSoft
Delights
• White/grey contrast draws attention to content
• Symmetrical three column layout
• Sticky global search sorted by category
• Symmetrical three column layout
• Sticky global search sorted by category
pain points
• Right-hand nav has no current placement indication
• Inconsistent search bar placement
• Cluttered left nav with unnecessary icons
• Inconsistent search bar placement
• Cluttered left nav with unnecessary icons
Who's Using this Documentation?
Eric is very knowledgeable in his craft and is proficient in multiple computer languages. When his company closes a deal with Cloud Elements, Eric is tasked with learning and utilizing their software. He needs to do so quickly and efficiently. He arrives on their documentation site, despite his reluctance to learn yet another series of steps and sift through seemingly endless information.
Below is Eric's journey using the documentation of Cloud Elements. Outlined in red is his experience with the current version of the site. In contrast, the blue line showcases a much more positive experience as Eric utilizes my solution.
Information Architecture
The image above shows the initial map that my group and I came up with for the existing site. There were 12 parent menus with some of them going 5 levels deep. Client communication and refinement of pages redundancy helped solidify a more straightforward architecture. Below is the redesigned sitemap in which relevant documentation is accessible within 2 clicks or less.
Infographic Exploration
During an initial stakeholder meeting showcasing early concepts, the idea of an interactive – or even animated – educational infographic was advocated for. This evolved from a minimal triangular-shaped diagram emphasizing the three pillars of Cloud Elements' business model as well as their logo.
After additional research and information gathering, I determined that developers, like Eric, would rarely be interested in something like this. They just want the quickest way to get coding.
Wireframes
After synthesizing data and consolidating visual design ideas, I moved to wireframing. I experimented with symmetrical, 3 column layouts with a focus on content hierarchy. This led to the creation of the prototypes in which I conducted user testing.
Usability Testing
I had 10 members of the development team walk through various flows to obtain feedback about their overall experience. This was broken down into three main comparisons outlined below:
Column Navigation
Users preferred the left-hand setup. They found navigation was easier and liked the control of being able to see what was in each section by using progressive disclosure.
Key terminology
Users preferred the right-hand layout. They found bolding was enough of a difference to emphasize important content. In contrast, they found the bright blue highlighting alarming to their vision, this prevented the inclusion of a possible accessibility issue.
Catalog layout
Users preferred the right-hand choice. They utilized the column on the right and enjoyed the overall layout of the page. They claimed it felt familiar to the rest of the site.
High Fidelity Mockups
After implementing design changes based on testing results, I moved to high-fidelity mockups. I worked with Cloud Elements' product branding, guidelines, and icons.
Next Steps
Consideration of a Personalized Doc Site
Users would have the ability to:
• Save and Bookmarked Relevant Content
• Company Login/Shared Content
• Social/Community Based Features
• Save and Bookmarked Relevant Content
• Company Login/Shared Content
• Social/Community Based Features
