See Docsie Teams' favorite documentation examples, and how to replicate these examples in your knowledge portal
Documentation is an integral part of the product development process. As the product moves from a proof of concept to a reality, explanatory documentation is essential for educating customers on how to use your product.
What are the first things a customer needs to know when choosing a product? What is it for, what does it do, and how do I do it? Let’s use Docsie as an example!
Docsie is a product documentation platform. It allows users to create, edit, annotate and publish documentation in an online knowledge portal. It’s as simple as logging in, creating a new Docsie Book, and typing your first piece of content!
Admittedly, we kept it simple. For product documentation, however, complex features and functions require more comprehensive explanations to drive the concept home.
In this article, we will explore 10 of Docsie teams’ favorite examples of amazing product documentation. Better yet? We will also show you how to make amazing product documentation of your own (inspired by our amazing examples!)
Let’s dive in! 🤿
10 Amazing Product Documentation Examples
Below, you will find 10 amazing product documentation examples selected by the Docsie team. We will explore how to replicate features and functions, and create similarly amazing documentation of your own in Docsie!
1 - Docker
Docker is a container virtualization platform that enables software hosting within tiny, modular and individually isolated IT environments. The concept allows for multiple disparate services to be hosted on a single host operating system by splitting and sharing operating system resources between containers.
Docker has a clearly formatted product documentation portal, and presents all the essential information needed to download, install and get up and running with Docker containers. It also shares multi-lingual product documentation, API reference documentation, and a frequently asked questions (FAQs) section at the bottom. For the visual learners, there is also a video section in the bottom right.
To create a Getting Started section, let’s use Docsie as an example. To start in Docsie, you must create an account, confirm your email address, load the Docsie Workspace dashboard, create a new Shelf, create a new Book – that’s the basics done! Create a framework of header titles for each section, write instructions, add pictures and hyperlinks and you will end up with a similar structure to below!
The best part? Docsie does this for you auto-magically!
2 - Stripe
Stripe is an international payment processing platform with technical functionality that enables custom integrations and payment parameters using the Stripe command-line-interface (CLI). Its mission statement is to increase the GDP of the internet by building virtual economic infrastructure that streamlines eCommerce.
This Stripe page is known as technical product documentation. It explores how to use a CLI to create Docker containers (hello again!) and communicate with Stripe using nothing but terminal commands. On the page you will see a Table of Contents, code blocks with copy-paste functionality, and in-text hyperlinks.
Docsie has code blocks, so let’s explore how to use them
Copy this code ready to follow our example -
In your Docsie Portal, code highlighting is applied to improve clarity for technical readers. Users can even copy the code with the handy clipboard icon!
3 - Apple
The ubiquitous Apple! No, not the edible kind!
Apple offers some excellent product documentation for its popular iPhone line of smartphones. In our Apple product documentation example, we have a version picker, table of contents, text and headers, and finally in-line images.
Let’s explore version control in Docsie!
When reading documentation in a Docsie knowledge portal, readers can select a version using the version picker plugin.
This allows readers to view historical product documentation – you know, for those slow pokes at the back who haven’t updated yet!
To create a new version in Docsie, use the version management tab in Docsie Editor.
From here, click Add version + .
Next, choose a version number and version name before clicking the Add version button. It’s that easy! Update the new version document with any feature changes, and let your customers find the latest (or late-ish) information!
4 - Parse
Parse is an excellent full stack software platform that provides open-source frameworks for application backends. Simply, it offers pre-made code resources that developers can trust when integrating with any development project.
In the Parse documentation portal, there is a great documentation example in the form of compatibility tables. This monitors the compatibility of different architectures like Node.js and MongoDB with the Parse platform.
Let’s make this in Docsie!
We can make a four column table similar to the Parse example using table blocks in Docsie.
Select the table block icon, then the four column option.
As you type, use the Enter key to move along the columns. Use Ctrl + B on the keyboard to make text bold. Finally, add emojis using the symbol option.
This is an easy way to write API documentation and technical software documentation. You can go further by adding hyperlinks to the Node.js website, or internal links to relevant user guides. Deliver your next API compatibility table in Docsie!
5 - Flutter
Flutter is a UI toolkit created by Google to drive consistency in user interface design across mobile, web, desktop and embedded devices. It promotes fast UI design and development with an online code editor, and a layered container-based architecture allows for full customization.
Flutter hosts a range of videos for users to watch and learn about the platform. As the platform is made by Google, YouTube is the logical choice for our example!
You can emulate this design in Docsie using video embed blocks!
Simply click within your Docsie Book, select the video embed icon, then copy the YouTube URL into the text field. You can do the same with Dailymotion, Vimeo and a range of other video hosting websites.
We have a GIF showing this process so you can add your own videos into Docsie – give it a try!
6 - Ionic Framework
It integrates with popular frameworks like Angular, React and Vue with various UI components, native device functions and theme support.
Ionic has a great mobile phone example embedded in its site. Let’s add a similar example to our Docsie Book using iFrame embeds!
First, copy the code below:
<iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe>
Next, click the code embed block in the Docsie Editor. Paste the iFrame embed code here, then click Save to continue. We have a GIF illustrating this process below.
7 - DigitalOcean
DigitalOcean is a cloud computing services platform that enables clients to host servers, virtual machines, databases and more. It offers dedicated Kubernetes services for scalable container applications, and managed solutions for web hosting, mobile apps, big data lakes and VPN services.
DigitalOcean offers feedback functionality on its docs to collect user feedback and iterate on content. Let’s explore how to do this in Docsie!
Vocally is the equivalent feature for collecting feedback in Docsie. It allows users to leave a star rating, text feedback and even a video recording – sweet!
Here, you can access any submitted Docsie Vocally feedback. Users have the option of a 1-5 star rating, and a short text explanation. Some users may be willing to leave a screen recording, helping you pinpoint the exact problem!
Every Docsie customer gets access to Vocally, and it’s invaluable in revealing the strengths and weaknesses in your documentation. You can’t always get it right the first time, but you can get it right-er with the next iteration when your writers use Docsie Vocally!
8 - Slack
Slack has arguably become the Whatsapp of the business world. The popular business instant messaging (IM) platform offers voice and video calls, image and GIF sharing, comment reply trees and more to organize and simplify business communications.
Slack offers tooltips throughout its documentation portal to highlight important information, and callout related features. Let’s replicate this in Docsie!
We can make a tooltip like above using quote blocks in Docsie.
Simply navigate to the Docsie Editor toolbar and select the quote block icon. Here, you can choose info, warning or question block types. We illustrate this in the animated GIF below.
Here are some variations using info, warning and question quote blocks in a live Docsie Portal. You can additionally use question and warning blocks to create question-and-answer statements – flex your creativity using quote blocks in your next Docsie Book!
9 - Rust
Rust is a programming language designed with speed in mind. It can prevent segfaults and guarantees processor thread safety. Rust can be used to create REST-API frameworks, communicate with database solutions like PostgreSQL and much more.
The Rust Standard library contains in-line code snippets that work to simplify API documentation browsing. Let’s match it in Docsie!
The in-line code snippets include
Option<T> . We can do this in Docsie using the markup button.
To markup text as code, simply click-and-drag to highlight the text, then click the markup button. We have a GIF illustrating this process below.
The markup text also contains hyperlinks. This link should redirect to a glossary of terms explaining what the code snippet does.
10 - Yoast
Yoast is a search engine optimization (SEO) platform designed to help business optimize their WordPress sites, and improve knowledge on SEO best practices. The Yoast SEO plugin optimizes websites for better performance in Google search engine result pages (SERPS) to drive customer engagement.
Yoast offers step by step guides using list headers in its documentation portal. We can replicate this with list headers in Docsie!
To do this in Docsie, first create a Book and open the Docsie Editor.
Next, click in the text field and select the list header option in the Docsie Editor toolbar. We have a GIF below illustrating this process.
List headers are part of the HTML specification. In Docsie, list headers are great as they allow you to create direct links within your documentation. This means when users click a link, they are taken straight to the list header (rather than having to scroll or swipe!)
Use These Docsie Features to Your Advantage! 🏆
These 10 documentation examples show how beneficial user guides can be. Next time you create a user guide, use these Docsie tips and tricks to your advantage! Our chosen examples are great, but we know yours will be even better! 📐👌
Docsie is an end-to-end documentation management platform that businesses use to create web-based FAQs, product docs, user guides, help-docs and user manuals. The platform features customer-centric collaboration, extensive embedding, tailored translations, and powerful publishing at your fingertips.
Start onboarding today, and deliver delightful digital documentation with Docsie!