JJ TSO

JJ TSOJJ TSOJJ TSO

JJ TSO

JJ TSOJJ TSOJJ TSO

Spotlight

Docs redesign

Any time we can reduce friction in the customer experience, we reduce the chances of a customer churning. Documentation turns moments of frustration into moments of value.

Problems

Our users couldn’t grasp quickly what PubNub was offering and what it meant to implement PubNub.

You had to choose from the start whether to read our concepts or follow one of our tutorials. Users eventually feel lost after struggling to decide which paths they should take on depending on the level of their knowledge of our services.

We were using a lot of PubNub jargon.

That was not helping our users project themselves into our product. We often used feature names as titles instead of guiding our users toward what the feature was used for.

Our users were confused because our documentation was spread around five websites with different UI.

We had one primary documentation and a lot of different community websites for every project that popped up the past few years at PubNub, such as our Demo libraries or our integration plugins. If you wanted to build a chat app implementation of PubNub, you had to go back and forth between two different websites that followed other guidelines.

Principles

To resolve those problems, we decided to completely change the philosophy behind our documentation, which resulted in three main choices:

A single website for all PubNub documentation.

We decided that pubnub.com/docs should be our unique entry point for all PubNub technical documentation. We decided to consolidate the content and migrate to Contentful. Now, in the same place, our users can go through all the steps of a PubNub implementation: publish their first message through PubNub and discover what real-time features they want in their app. More than just providing a better flow, this integration of the front and back end helps with the quality of the content now that they share the same architectural and writing structure.  

Moving away from a section-centric documentation.

Instead of asking our users to choose between reading concepts or doing A-to-Z tutorials, we introduced a landing page with dynamic content (depending on if you were a first-timer or a returned user based on cookies stored in your browser) with guided navigation that walks you toward all the steps of a PubNub implementation and how to make the most of your real-time application.

Addressing all our audiences.

Our technical documentation is not read by only one single profile but indeed many. From the decision-maker who wants to quickly evaluatePubNub’s offer to the curious who wants to know if X is possible with us, from the CTOs trying to hunt for more reliable real-time communication solutions, to developers in the process of implementation. Some are newcomers looking to have their first PubNub implementation up and running within minutes for the developers. Others are advanced users who go back and forth with the documentation to improve their current performance. And let’s not forget to mention PubNubbers themselves, who internally rely on our documentation to serve our customers.


One major shift was to introduce the concept of hubs based on their use cases. No matter the profile of our users, every topic they arrive at when navigating with the sidebar should be accessible. Then, depending on who they are, they will have the ability to deep dive into our content. It could be reading some how-to’s if developers are interested in copy-and-pasting some code snippets or exploring in-depth guides when looking to master a specific subject. Our technical writers also set specific writing choices we made that serve both Technical and Non-Technical Readers.


Those three fundamental principles drove all later choices we made, whether it be the information architecture we put in place or the user experience we wanted to offer. 

solution

A landing page with a guided journey for each profile

A landing page sets the stage by summarizing a problem and describing, in a general way, the how, why, and what of our solution/feature. With that background, readers could take the following next steps: stop reading because they only needed a summary; go to a how-to page that gives exact implementation details; go to an in-depth page that digs deeper into the problem/solution.

Solution

New UI component library to keep the look and feel consistent and unified

Marketing Design involves informing users of your product or service's value and making a pathway to sign up. The UI is generally flashy and attractive with animation, video clips, and attention-getting copywriting. UI design for Docs sets an entirely different environment as in Docs; users search for information, read product specifications, follow the tutorials, and find answers to how to implement PubNub.


In a joint effort with the writing team, we started listing every kind of content we wanted to display, see what they contained, and attach high-level objectives and expectations to each one. A bit like Design System builders, you don't start with many small components that hopefully work together as a whole; instead, you start with one template, focusing heavily on the objectives you want to achieve. Therefore, I started with one of our heaviest pages, which included many UI components like extended text areas, alerts, warnings, side notes, code snippets, links to additional resources, a feedback form, and videos. The idea was that if I could find a design that worked for this page, it would work for 90% of the docs.


The UI library I created for Docs carried a slightly different tone from our marketing site. The colors are less saturated, and fonts are smaller and lighter with an increased line-height for better readability. The padding between paragraphs has to be spaced out to give users to take a break and think.  

Best practices

Usability over aesthetics

  • Using a pretty narrow content width to display short lines of text makes it easier to read than having full-width sentences that get lost in users' eyes and tire them when going from one line to the next. The best standards are to keep within 600 and 700 pixels wide. I chose to stay in the middle, maintaining an average of 150 characters per line.


  • Our technical writers already did a fantastic job at splitting their content, giving us small paragraphs to work with instead of delivering vast walls of text. Most users are OK with scrolling by now, especially developers who are big fans of Cmd/Ctrl-F navigation and prefer having everything on a single page. Let your content breathe, make it readable by understanding how your intended audience likes to read.


  • To make long reading sessions comfortable, I went for a font size manageable for the reader's eyes. For example, users should not have to zoom in to read, especially not an audience that will skip over your product if it's not up to their standards. Don't let them break your layout because they feel the need to zoom in and out—usability over aesthetics.


  • We designed with accessibility in mind: do not rely on colors that attract attention; make sure our color scheme brings value and comprehension to color-blind people; and finally, check our primary contrast ratio to ensure good readability even on low-resolution screens.


  • Developers love dark mode! It not just reduces battery drain significantly, also it is relaxing (and hence more appealing) to the eye, especially when most of us have our eyes glued to the monitor 8 hours a day and no longer want to bear the white strain at night. For the system background, I deliberately use accented neutrals instead of a pure-grey palette due to 2 main reasons: 1) Pure greys are not found naturally, and so its an excellent option to have some tint on those neutrals to give it a more natural vibe;
    2) Tinted neutrals could help give the UI an overall emphasized tone and emotion to look forward to.



After dozens of tests, we finally reached a balance that was pleasing to developers and aligned with our company's branding—thus, delivering a consistent message with the same tone and atmosphere of all our online content.




Next steps: optimization and iteration.


Now that the new design has been rolled out, it's all about keeping an eye on our important metrics, ensuring the main issues were correctly addressed, and that our decisions will positively impact the business.


We couldn't say more about how important it is to keep track of all feedback—good or bad—to map our design's overall experience and performance continuously. This enables me to know where the strengths and most-used areas are in your UI/UX. Even when the project is done, it is good to know which issues remain and to have them simmer in the back of our minds as we passively think about solutions. Keeping some customer journeys up to date will help me identify and communicate quick wins and clean up negative perceptions with only a few resources.


Copyright © 2021 JJ Tso - All Rights Reserved.

Powered by GoDaddy

This website uses cookies.

We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

Accept