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.
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.
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.
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.
To resolve those problems, we decided to completely change the philosophy behind our documentation, which resulted in three main choices:
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.
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.
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.
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.
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.
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
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.