LiveAPI Devlogs Part 3: Transforming User Onboarding with 3 Industry-Inspired Methods

Here, we will explore the new updates and improvements in LiveAPI from the past few weeks.

Developers rarely have time to document their code properly. Projects are rushed to meet deadlines, which makes documenting the codebase challenging.

While Swagger helps, it's not a complete solution; it has considerable setup and maintenance costs. Additionally, an exposed Swagger endpoint can introduce security threats. LiveAPI addresses all these issues.

LiveAPI provides a Super-Convenient solution by providing the following.

• Using AI to automate documentation.
• Staying up-to-date with revisions and interacting with APIs through widgets.
• Ensuring end-to-end code security.

Even though all these features have been developed and used, some new users may find difficulty to use everything without proper guidance.

So we were faced with a new problem: How to onboard users easily without friction?

In this article, we will demonstrate how we addressed these issues using three methods inspired by other products.

The Difficulty We Faced with Onboarding New Users

When speaking of the difficulty we have been facing, there were 3 issues.

1. Difficulty in Getting Users to Sign up and Use the Product

Merely using signup can be a barrier for new users to get familiarized with the product, as they will seek simpler ways to use the product.

So we had to think of a solution that would get people to use the product in the easiest way possible, without barriers.

2. Difficulty of Keeping the Users Engaged

Even if the user signs up, if there is no proper guidance for beginners, they won't know what to do and may eventually drop off.

So we need to make sure that there are some beginner-level activities for the user to do, to understand the product more and engage.

3. Difficulty of Explaining the Features

The user signed up and has some guidance on what things to do, but some users won't properly understand what is written and will find it difficult to use the product.

In such cases we need a proper tour around the UI, highlighting the areas to be interacted with and how to properly use it.

To address these problems, let's explore how existing products in the market handle them.

Case Study 1: How Picwordify Gets Users to Signup

Picwordify is a tool for generating alt text for images.

Let's check their website.

As you can see, even though there is a sign-in button, there is an area where the user can directly start using the product.

When I try to upload an image here, this happens.

This will get the users interested, and eventually will lead them to signing up by clicking the Try for free button.

Case Study 2: How Loom Onboards New Users Effectively

Loom is a tool for recording and sharing videos. So when using this platform, users will need some guidance on how to use the tool.
To aid that Loom has Get started checklists.

This provides clear guidance on where to start, ensuring users are smoothly onboarded without much confusion.

Applying the Industry-Inspired Methods

Method 1: Public Repository-Based Signup

Based on our first case study, we decided to add a textbox and a button on the landing page for API documentation generation.

The steps involved in this method are:

1. Selection of Git Repository: The user visits the landing page, where there’s a textbox and a button. We provide pre-determined example URLs to help people get started.

2. Signup Process: After clicking the button, users are directed to a signup page where they enter their credentials to create an account.

3. Redirection to LiveAPI: Once the signup is completed, the user is automatically redirected to the LiveAPI website, where they can view their freshly generated API documentation.

Method 2: Get Started Checklist for New Users

To ensure a smooth and comfortable onboarding experience, we introduced a step-by-step checklist for new users based on the second case study.

This approach is designed to guide users through the setup without any confusion.
This is how it works

1. Start with a Simple Task: The first item on the checklist is something easy to accomplish, like generating a documentation from a public repo. This gives them a sense of accomplishment and lets them know they’re making progress right from the start.

2. Guiding the User to the Next Step: After completing the first task, the user is prompted to proceed to the next step: connecting a Git repository. Once they complete it, they are guided to the next task. This process continues until all tasks are completed, ensuring users gain a well-rounded understanding of the product while staying engaged.

Method 3: Guided Tours for Each Item in the Checklist

Sometimes the items in the checklist might be difficult to do for some users,
so we decided to include guided tours using React Joyride Library. This will highlight the areas to be interacted with, and the user can just follow along.

This is how the method works

1. Interactive Walkthrough: When user clicks a link on the checklist, it will trigger the guided tour
2. Highlighting Interactive Areas: React Joyride highlights the parts of the page that require user interaction, such as buttons or input fields.
3. Step-by-Step Guidance: The user is walked through each action to complete the task, ensuring they don’t feel lost or frustrated.

Conclusion

By the end of this article, you've seen how we identified and tackled specific problems in user onboarding. A common approach throughout has been to look at existing products in the market. It's a good practice to learn from others, but also think for yourselves and innovate on top of their methods in your daily actions.

If you want to go more deep into such onboarding techniques, check out our article on Onboarding-Techniques.

There is also a Part 1 and Part 2 to the LiveAPI Devlogs series. If you're curious about how we address the complexities of automating API documentation generation and keeping it up-to-date, be sure to check them out.

If you want to give LiveAPI a try, visit the LiveAPI page and try to generate a doc!