🧠 How to build an awesome SaaS onboarding flow
Tags: webdev, saas, tutorial, frontend
Published: 2023-08-24 21:37:58

Hey all, [Charlie](https://twitter.com/IdeaHubTweets) here! 👋

Today we’re talking about at **onboarding**.

First impressions matter - so ensuring your customer’s first few steps with your product are legendary should be a top priority.

Plus, it’s rare that a customer will fully grasp what your product can do for them from just your landing page - there’s likely **plenty of value they are still unaware of even after signing up.**

_This week in IdeaHub…_

- **Tailored onboarding:** Allow customers to choose their first product experiences based on their specific use-case

- **Product tours:** Show your customers how to get started using your product

- **Onboarding checklists:** Ensure your customers have everything they need to start succeeding from day one

_PLUS_ - the 3 best tools to start building a rock-solid onboarding process this weekend.

Let’s jump in… ⬇️

![IdeaHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rkmg9dxuwophu4p4bfo.png)

> Join 350+ tech peeps learning to build SaaS products every week for free on [IdeaHub](https://ideahub.beehiiv.com/subscribe?utm_source=devto&utm_medium=blog&utm_campaign=how%20to%20build%20onboarding).

## 1. Tailored onboarding

It could be the case that your user base will be made up of **segments of customers** using your product in different ways.

By giving new customers an option to choose their preferred path through your onboarding process, you make it **more personal** to their specific needs which can greatly **decrease the chances of them churning.**

**HubSpot** is an awesome example to learn from when you’re considering how to approach any product feature, but for onboarding in particular - they do a great job.

Take a look at how HubSpot **asked me about my use case** before letting me into the platform when I signed up this week:


![HubSpot onboarding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d39pm32kbmscitu5u7dc.png)

Then, I was asked how I would like to get started, ensuring I **only go through the onboarding steps that matter the most to me.**

I chose to get started with HubSpot’s sales tools:


![HubSpot onboarding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o7oufnv57gq7773ylnq.png)

This not only **personalises my experience**, but it allows HubSpot to collect more data on me, something they will no doubt use to analyse my behaviours and suggest new products.

![IdeaHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rkmg9dxuwophu4p4bfo.png)

## 2. Product tours

A product tour is a way of showing your customers around your product just after they complete the signup process. This can help you **convey the purpose of your product** and help your customers start using it to its full potential from day one.

You know your product better than your customers ever could, so this is your opportunity to **show them its power!**

Here’s the tour I got in HubSpot after I chose to set up sales tools:

{% embed https://player.vimeo.com/video/856953320?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479 %}

([link to video](https://vimeo.com/856953320?share=copy))

Here are the key takeaways if you just want the TLDR:

- I was guided through a **worked example** of using HubSpot that relates to the reason I choose when tailoring my onboarding experience - to track new leads.

- I was shown how HubSpot **integrates with my existing processes**, like sending emails to new leads  - something that I might find difficult to visualise just from a sales page.

- The tour featured **my personal details**, including the company name I set up as part of the signup flow. This naturally led to a **more engaging experience.**

While this is all relevant to HubSpot’s particular features, the core strategies are relevant to your products too. It’s all about **conveying your product’s mission.**

Filling in this template will help you define the story to tell to your customers during your tour:

> _“My customers struggle with  _____ and use my product to solve it by _____. Without features _____, _____ and _____, my product would be useless and without setting up _____ first, my customers would struggle to get started.”_

![IdeaHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rkmg9dxuwophu4p4bfo.png)

## 3. Onboarding checklists

Lastly, when your customers enter your platform, consider adding an onboarding checklist to gain **better control over their first few steps.**

Even if a customer doesn’t feel that all the steps are necessary for them right away, having a checklist gives them the first place to look for **how-to’s and guides** when they want to try out a new feature.

Here’s the checklist I got in HubSpot after my product tour:

![HubSpot onboarding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lkkkew8501inruvjn3v.png)

This is successful for a number of reasons:

- The checklist is **split into sections** making it seem more palatable

- I’m told up front **how long each section will take** to complete

- I’m incentivised to **setup my key account data** like my contacts and teammates first, which without, I would struggle to use HubSpot

- I’m able to **track my progress** through the completion bar at the top of the checklist

![IdeaHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rkmg9dxuwophu4p4bfo.png)

## The best tools for onboarding

Obviously, HubSpot’s onboarding flow is super-optimised from experience with their many thousands of customers!

But really, if you break it down like we have today, and **implement the 3 strategies above**, you can create a really good starting point.

What’s more, it doesn’t need to be difficult nowadays - **so there is no excuse!**

There’s plenty of options that allow you to get started without writing any code if you're happy to pay for an onboarding-as-a-service platform:

- [UserGuiding](https://userguiding.com/)
✅ Support for tailored onboarding, tours and checklists
👨‍💻 No code required
❌ Expensive…

- [ProductFruits](https://productfruits.com/)
✅ Cheaper than other full-service platforms
👨‍💻 No code required
❌ Not as many integrations

- [Dopt](https://www.dopt.com/)
✅ Start for free!
👨‍💻 Some code required
❌ Missing some features

If you’re bootstrapping and are happy to write a bit of code yourself, then I’d go for [Dopt](https://www.dopt.com/).

You will miss some features that the bigger platforms offer, but with excellent JavaScript SDKs and documentation, you can easily get started in a weekend.

## You’ll want to read this…

- [How to tailor onboarding with Dopt](https://blog.dopt.com/tailored-onboarding-playbook) - A guide from the makers of Dopt on how to create a tailored experience

- [How onboarding reduces churn](https://neilpatel.com/blog/sauce-to-reducing-saas-churn/) - Neil Patel writes about the importance of churn and how onboarding is essential to keeping it under control

That's all for this time!

---

![IdeaHub Newsletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi2dcscmhsgdkc2f4efa.png)

Hey! Charlie here 👋, thanks for reading this article! I hope you enjoyed it and learned something new.

Each week I send out discussions like this to **over 350 tech peeps** interested in building their own software products.

Being a Product Manager in B2B SaaS, I built a lot of software and **share my lessons learned** that you can apply to your own building journey.

If that's something you're interested in, click below to sign up to IdeaHub!

[Subscribe here](https://ideahub.beehiiv.com/subscribe?utm_source=devto&utm_medium=blog&utm_campaign=how%20to%20build%20onboarding)