Interactive Walkthroughs in 2022: The Ultimate Guide for SaaS

Interactive Walkthroughs in 2021: The Ultimate Guide for SaaS

Most SaaS businesses recognize that interactive walkthroughs are a helpful onboarding tool, but few use them to their best potential.

They are a much more interactive version of traditional linear product tours, where customers are left confused as to why they are being shown features they don’t need, all at once.

In this article, we’ve put all our insights from building walkthroughs with thousands of SaaS companies in one place.

Let’s get into it.

TL;DR

  • An interactive walkthrough is a step-by-step product guide leading to activation. They’re much better than product tours!
  • SaaS companies use walkthroughs to onboard new users, highlight secondary features, and train new staff.
  • Walkthroughs have a measurable impact on just about every SaaS metric, including activation, retention, engagement, adoption, and Time to Value.
  • To build a good walkthrough, segment your users with your welcome screen, then send them to perform the specific key actions they need in order to activate.
  • Building a walkthrough using a dedicated tool like Userpilot is much easier than coding it from scratch.
  • The best walkthrough software on the market is Userpilot. Other options include Appcues and Userguiding.

What are interactive walkthroughs?

An interactive walkthrough is a step-by-step, interactive guide to your product that will ultimately lead your users to activation.

Exactly what constitutes activation will vary for different use cases of your product.

That’s why we often advise SaaS companies to segment users prior to their walkthrough, to make sure that customers only see features during their walkthrough that make sense for their individual use case.

In practical terms, a walkthrough consists of a checklist of a handful of key actions.

userpilot checklist. Get a demo here: https://userpilot.com/userpilot-demo
Userpilot onboarding checklist

The user is tasked with performing those actions one by one, with each one triggering contextual help for the next one as it is completed.

It’s a bit like a dialogue between you and your customer, in the sense that you wait on the user to act before giving them the next set of instructions.

By the end of the walkthrough, the user should have experienced the value of your product in a visceral, first-hand way.

What are interactive walkthroughs used for in SaaS?

There are 3 main areas in which SaaS companies use walkthroughs:

New user onboarding

You’d be shocked at how many users SaaS companies fail to retain past Day 1 of the customer journey.

The point of a walkthrough in this instance is to get the new user to experience the value of the product first-hand before they get bored and lose interest.

Speed is of the essence here.

We sometimes refer to this as “reducing Time to Value.”

Secondary/continuous onboarding

Given how much time and money you’re spending developing new product features, it would be a great shame to have nobody want to use them.

The best SaaS companies, therefore, recognize that onboarding is a never-ending process of educating customers, and pay as much attention to creating walkthroughs for secondary features as they do to initial onboarding.

During secondary onboarding, walkthroughs are used to:

  • Highlight new or secondary features that are relevant to a customer’s individual use case.
  • Encourage the swift adoption of those features.

Employee onboarding

Many SaaS products have complex internal systems which are not immediately intuitive to use for new employees.

To get new hires up to speed, companies often use interactive walkthroughs.

This is more effective than an employee handbook since humans tend to retain more information when they actively participate in something, as opposed to passive reading.

Employee walkthroughs can be used to induct new hires into the company’s own product, or teach them to use complex third-party tools such as Hubspot or Salesforce.

At this point, you’re probably thinking: “this sounds like a lot of work to set up.”

I hear you.

But here’s why you should care about setting up walkthroughs.

Benefits of interactive walkthroughs for SaaS

Our SaaS customers that use walkthroughs have managed to achieve:

Higher activation rate

Let me be real with you here for a moment.

If there is no interactive walkthrough when new users sign up for your product, most of them will leave.

Yes, even if you think your product is intuitive and easy to use.

Conversely, if you create a walkthrough that lays out the actions a user needs to take in order to activate, there is literally no way that a user can follow the steps and then NOT activate at the end.

activation formula

For each user that activates, that’s one more monthly subscription, and one more person who could become a future brand advocate.

So the effects of your improved activation rate will compound upon each other over time. Neat, huh?

Increased engagement and retention

To retain the users you’ve activated, you have to continue to offer them value, even in the latter stages of their customer journey.

By creating a walkthrough about secondary product features, you can show customers a side of your product that they haven’t seen before.

Humans appreciate novelty, so this will keep them engaged.

If your walkthrough shows a customer how to use these features and they adopt them, there’s a good chance that the customer will stick around.

For each month you retain that customer, that’s one more monthly subscription payment. Nice!

And it’s in the compounding of those subscriptions, month after month, that the riches of the SaaS world can be found…

money meme

More upsells

Studies have shown that upselling to existing customers is 4x cheaper than selling to new ones.

A well-placed walkthrough that highlights a secondary feature can encourage a satisfied user to upgrade to a more expensive monthly plan.

Alternatively, your walkthrough might show off an optional add-on, which the customer can then go and purchase.

Both of these examples would increase the lifetime value of that customer, as well as take the pressure off your sales team to close new business.

Lower support costs

Paying a team of salaried support staff gets expensive quickly.

So the more you can get your users to work things out on your own, the fewer support staff you will need to employ.

Enter the interactive walkthrough.

Since the customer is such an active part of the walkthrough process, there’s a good chance that they’ll retain a lot of the information they learn.

That takes the pressure off your support team — and your budget.

At this point, you might be tempted to rush out a whistle-stop tour of all your product features.

But hold your horses. There’s another important nuance you need to understand first.

What is the difference between an interactive walkthrough and a product tour?

When most SaaS companies think of an automated guide through their product, they often build something which:

  • Dumps tons of information on users all at once
  • Shows users ALL the product features in one go (yes really!)
  • Goes through the features in the same linear, pre-scripted order each time (too bad for you if your preferred feature is at the end!)

This is not an interactive walkthrough, but rather a product tour.

And users hate them!

product tour hate

And it’s no wonder. No one likes having tons of information dumped on them all at once.

It’s a boring, unengaging experience that’s reminiscent of that old lecturer who used to drone on for hours back in college…

Since the order in which the customer is shown features is so arbitrary, you can sometimes end up with product tours that are entirely nonsensical.

Look at this example:

product tour fail

Here, an email marketing tool is asking the user to create their first newsletter BEFORE uploading an email list. Hmmmmm…..

All this product does is highlight how confusing and complex it is. Hardly something that will encourage the user to activate.

Worse still, product tours don’t have activation in mind as an end goal.

So they don’t drive the customer towards value. In fact, it’s quite the opposite!

Since product tours lack interaction with the user, they are unengaging. Actually, there’s a good chance that the user will remember nothing from the tour just a few minutes later.

By contrast, an interactive walkthrough would be inconceivable without the actions of the user.

Each step in the flow is triggered by the preceding actions of the user in completing the previous step.

Since the user is actively learning how to use the product to get the result that they signed up for, activation is the natural result.

Hopefully, you’re starting to see why walkthroughs are so valuable.

If you’re wondering how this applies to your business more concretely, the next section is for you.

How to build a good interactive walkthrough in SaaS

A successful walkthrough is a bit like a cake recipe.

You can deviate from the recipe according to your personal taste, but generally, you need to follow certain steps in order.

Here is our recipe for a good interactive walkthrough:

Interactive walkthrough tip #1 – Start from the welcome screen with a microsurvey

A good walkthrough begins with a screen that welcomes new users.

Here’s how social media scheduling app Kontentino does this:

kontentino microsurvey

It’s friendly, warm, and makes the user feel at home.

Note that a welcome survey is not just an opportunity to be cutesy with your customers. It’s also a powerful commercial tool.

Smart SaaS companies use their welcome screen as a way to segment new users, often by embedding a microsurvey that asks them some simple questions.

By figuring out what segment they’re in, the company will be able to customize the rest of that user’s onboarding experience to the specific reason they signed on as a customer.

Again, let’s see how Kontentino does this:

kontentino segmentation

Kontentino knows that brands tend to just have one set of social media accounts, while digital agencies will manage dozens of them on behalf of their many clients.

They ask their new clients directly which group they belong to, right at the outset, so that they can attend to the needs of each user accordingly.

Interactive walkthrough tip #2 – Pick 2-3 key activation points for each segment

If the goal of your walkthrough is activation, you’re going to have to define what this looks like for each segment.

Otherwise, you have nothing concrete for your users to aim at.

To define activation, look at your existing user cohorts and compare the product features used by your most active customers against those used by your customers who churned.

Which core features does each active customer use, without fail?

There’s a good chance that those features are the ones that a particular cohort needs to experience in order to activate.

Often, this corresponds to the core value proposition of your product — the reason you built your business in the first place!

In Kontentino’s case, they’ve learned that brands need to accomplish two things to activate:

  1. They need to connect a social media account. One will suffice, for the purposes of activation.
  2. They need to schedule a social post.

So the question arises: how can Kontentino get their users to experience these two steps?

The answer lies in a versatile little piece of UI — the humble tooltip.

Interactive walkthrough tip #3 – Create tooltips pointing to each activation point

First of all, Kontentino has a tooltip pointing to the section of their product that allows users to connect a social profile:

kontentino connect social

Once the user has managed this task, they will then see a second tooltip encouraging them to make their first post.

Important: unlike our previous product tour example, this second tooltip will only display once the user has finished the previous action: in this case, connecting their social media account.

Kontentino managed this by creating a custom event called “connect social profile,” and setting their walkthrough software to only display the tooltip to make a post once this custom event has been completed.

Here’s what that second tooltip looks like:

kontentino new post

There’s even a supplementary tooltip that encourages users to save their content once it’s been written:

kontentino tooltip

Interactive walkthrough tip #4 – Use an onboarding checklist

To ensure that your users follow along with the activation pathway you’ve laid out for them, it’s a good idea to create an onboarding checklist for them.

This checklist should contain the main elements from the walkthrough.

Here’s what Kontentino’s looks like:

kontentino checklist

Note that they’ve already given you credit for creating an account.

It’s motivational to have already ticked one item off from your checklist.

And the rest of the checklist plays on a psychological phenomenon known as the Zeigarnik effect.

This describes the observation that humans are more likely to remember incomplete tasks than complete ones.

So Kontentino’s checklist is not only keeping track of the walkthrough activities you have completed, but also staying top of mind to ensure you finish the rest.

With a walkthrough like this, activation is almost guaranteed!

You can read more about Kontentino’s walkthrough here.

Of course, setting up a system this automated requires the right tools.

Kontentino’s was built with Userpilot, by the way. (Yours can be too if you click here!)

But if you think you’d rather reinvent the wheel and build this from scratch, I’ve got news for you.

Why is it important to use walkthrough software to build interactive walkthroughs in SaaS?

If you wanted to build your walkthrough manually, even the simplest of UI elements turns into a nightmare.

Look at this humble tooltip:

tooltip example
Source: Educba

Seems simple enough…

… until you see the code needed to build it:

<html>
<head>
<title>HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:100px;">
<div class="arrowpopup" onclick="myFunction()">Tooltip Demo Click here!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip helps you to display extra information of element.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>

Ouch. And that was a comparatively simple tooltip.

Can you imagine what coding all the elements of your walkthrough at once would be like?

Unless you’re a coding genius, it’s much easier to skip the code and use code-free walkthrough software.

Your non-technical product managers and product marketing managers will certainly thank you!

By using walkthrough software, they’ll be able to make minor UI changes at the push of a button, without bothering your development team.

This allows for a lot of agility, leading to regular product experiments.

The lessons from all of those experiments will translate into a better product experience for your customers.

With less work for your devs and an easy way for product marketing to iterate, it’s clear that walkthrough software is much more scalable than going it alone.

But the million-dollar question is: which software should you choose?

Best Tools to Build Interactive Walkthroughs for SaaS in 2022

Here is our pick of the crop:

Top interactive walkthrough tools #1 – Userpilot

userpilot homepage. Get a demo today https://userpilot.com/userpilot-demo

It’s super easy to build an interactive walkthrough with Userpilot. And you won’t need any code to do it!

Any successful walkthrough begins with working out which user segment the new customer belongs to.

Userpilot offers a wide range of metrics by which you can segment, including:

  • user attributes (plan, ID, email, signup date, web sessions, etc)
  • custom events and event attributes
  • NPS score
  • individual vs company account
  • location and app language
  • whether or not a user has interacted with a UI element or experience flow, or a specific feature (using feature tags).

If you want to segment your users via the welcome screen, as Kontentino did, Userpilot has you covered there as well.

This is what the welcome screen microsurveys you can create with Userpilot look like:

userpilot microsurvey. Get a demo today at https://userpilot.com/userpilot-demo
Source: Postfity

For step-by-step instructions on how to build a microsurvey in Userpilot, click here.

Having determined which activation checklist you want to serve a particular user segment with, it’s also easy to build that checklist in Userpilot:

userpilot checklist. Get a demo today at https://userpilot.com/userpilot-demo

Where Userpilot really excels is through the level of personalization it allows in your walkthroughs.

Whatever UI element you want to build, whether it’s a tooltip, a slider, a modal, or anything else, Userpilot will let you do it in just a few clicks.

Here’s a tooltip, for example:

Userpilot tooltip. Get a demo today at https://userpilot.com/userpilot-demo

All of these elements are interactive, and you can even combine them in branched sequences as well.

It’s very easy to customize the look and color of these elements to your brand too.

userpilot customization. Get a demo today at https://userpilot.com/userpilot-demo

As you can see, the level of complexity is only limited by your imagination.

Because no onboarding process is perfect the first time you build it, Userpilot’s intuitive analytics panel allows you to set goals for your walkthroughs and see how many customers hit them:

userpilot analytics. Get a demo today at https://userpilot.com/userpilot-demo

The analytics will show you the points where users are dropping off from your walkthroughs, allowing you to step in and fix them.

Userpilot will even let you A/B test your walkthroughs over and over until your activation rate is where you want it to be.

Userpilot starts at $249 per month for up to 2500 MAUs. Unlike the other tools on this list, all product features are available on all plan levels.

Get a demo today!

Top interactive walkthrough tools #2 – Appcues

appcues dashboard

When Appcues first came out in 2013, it completely transformed the potential for non-technical product marketers to build interactive walkthroughs.

Appcues introduced the SaaS world to staples such as tooltips, checklists, and slideouts.

Today, 8 years later, it’s still a great tool, and a worthy inclusion on this list.

Their analytics are solid, particularly their data visualizations, and it’s easy to segment users and track which features they’ve adopted and which they haven’t.

The age of the technology sometimes shows itself, notably in the range of UI elements that are available code-free.

Unlike Userpilot, in-app styling is restricted to basic elements such as height or color.

For anything more complicated, you need to use custom CSS, which might put off some less technical users.

Like Userpilot, Appcues’ pricing starts at $249 per month for their Essentials plan, covering 2,500 MAUs.

But this price is somewhat deceptive.

If you want to build more than 5 audience segments, you will need to upgrade to their Growth plan, which starts from $879 per month.

This means that Userpilot is more than 3x cheaper, with a broader range of contextual onboarding tools available without needing to code.

For a more detailed review of Appcues, we invite you to check out this article.

Top interactive walkthrough tools #3 – Userguiding

userguiding dashboard

Every SaaS business has to start somewhere, and we startup veterans know very well that budgets are often low in those early days.

For businesses in this position, Userguiding is a solid choice.

It’s simple to start using, with an intuitive UI that you’ll pick up in no time.

Features include:

  • Product tours
  • Tooltips
  • Hotspots
  • Checklists
  • and more

My biggest issue with Userguiding is that it doesn’t offer branched interactive walkthroughs.

Instead, you are limited to the kind of linear, feature-by-feature product tour that most users dislike.

Building checklists and segmenting users are also noticeably buggier and more challenging than on Userpilot or Appcues.

Nevertheless, some user onboarding is better than no user onboarding, so if you really can’t afford a more expensive tool, this could be a good place to get started.

Speaking of the price, it starts from $82 per month (paid annually) for 2500 MAUs.

Again, you won’t get as many features for that price as you would on Userpilot’s basic plan.

Sometimes, the saying that you get what you pay for rings true.

If you still don’t know where to start with your interactive walkthrough, I want to leave you with some examples from other SaaS businesses to get your creative juices flowing.

Top 5 SaaS Interactive Walkthroughs to Inspire You

Interactive Walkthroughs Example #1 – Rocketbots

Rocketbots is a messaging tool that enables you to connect all of your inboxes on one platform.

Here’s what their welcome screen looks like:

rocketbots walkthrough

Note the simple UI, with minimal form-filling.

Rocketbots has clearly decided to stay out of their users’ way, in an effort to reduce Time to Value and encourage them to get on with using the product.

Next, I want to show you their checklist for their interactive walkthrough:

rocketbots checklist

It’s worth highlighting that Rocketbots already gives you credit for “creating a space.”

This gives you a feeling of accomplishment as a user, and those remaining three items on the checklist don’t look nearly as intimidating once you’ve already completed the first one.

Note also that Rocketbots want you to both “create a space” and “connect a channel.”

My sense is that these are the key two activities you need to complete in order to activate.

The platform won’t run if you don’t have a space to put all your inboxes into, and in order to really experience their value proposition first-hand, you will need to connect one of your existing inboxes.

Including a task on the checklist for inviting a collaborator adds an element of virality to their product marketing, which is smart.

Here’s what adding one of your other inboxes looks like, once you get to that stage:

rocketbots tooltip

Note the tooltip which highlights the “Add Channel” CTA.

That just makes it that bit easier for the user to jump through the hoops needed in order to activate.

Interactive Walkthroughs Example #2 – Salesflare

Salesflare is a CRM whose USP is automating the process of keeping your contacts up to date.

Their welcome screen subtly highlights this USP by promising more sales with “less work.”

salesflare welcome screen

If you look closely at the bottom, they give users the option to skip the product tour if they want to.

I like this. If you’ve been burned by boring product tours in the past, you’re bound to appreciate this as a user.

Next, a handy tooltip highlights their USP a second time, this time in a different way:

salesflare tooltip

If I’m a salesperson, I’m going to love the fact that I don’t have to import all my contacts manually.

Often, salespeople have contacts from past jobs, especially if they have a few years in the profession behind them.

As I read this tooltip, I’m feeling the “Aha Moment” and starting to understand why this tool might be a good fit for me.

Next, I want to share a screenshot of the columns in the CRM:

salesflare tooltip 2

As part of the walkthrough, the tooltip encourages you to move the dummy sales lead to the “won” column.

This not only teaches users how to move leads between deal stages, which is a core feature of any CRM, but also lets them experience the euphoria of winning a deal!

Once the salesperson has customized the titles of the deal stages with data points that reflect their own unique sales funnel, this tool will really start to feel like an extension of their existing team.

Finally, the software prompts you to connect your calendar and email:

salesflare activation

From an activation point of view, this makes a lot of sense.

Salespeople want their emails to be pulled directly into their chosen CRM, and they want their appointments to be sent to their calendars automatically.

So in both cases, Salesflare is getting the user to experience how their tool can save them time. Nice job.

Interactive Walkthroughs Example #3 – Demio

Demio is a webinar hosting service, designed to make sharing your webinars as easy as possible.

Their interactive walkthrough is rather unique, in that you actually join a fake webinar!

Here’s what that looks like:

demio webinar dummy

During the webinar, a Demio team member explains that this is an example of the sort of webinar you can produce.

Then, somewhat surprisingly, she hands over the reins to you.

While you are in control of the webinar, you can share your webcam or slides.

Demio has prepared dummy slideshow data in advance to save you from thinking about creating that at this stage.

My personal favorite feature of this webinar is the fake guests who talk in the chatbox on the side 🙂

That’s an unbelievably creative approach that I have not seen elsewhere before.

You can see some of their “excited” dialogue in the popup screen at the end of the fake webinar:

demio webinar end

This is a somewhat unusual walkthrough in that there’s no checklist for you to work through.

Instead, Demio allows you to experience first-hand what hosting a webinar on their platform might be like.

They do this in a safe environment with fake users, so there’s no risk if things don’t go to plan.

Interactive Walkthroughs Example #4 – Tallyfy

Tallyfy is a project management tool for documenting and automating business processes.

The walkthrough presents you with two key actions, which are shown in the format of project management tasks that the tool is known for.

Here’s what that looks like:

tallify checklist

The first one is extremely simple. Just click on the Open button.

This gives the user an easy win and makes starting the walkthrough straightforward.

It also lets the user experience the value Tallyfy offers, which is easy, intuitive project management.

If you click the second task, the following screen pops up:

tallify task

There’s a little bit of text explaining how dropdowns work in Tallyfy.

If that were all there was, this would be quite a boring walkthrough.

The interactive part comes at the end, where the user is asked what they see on a beach: sand, bacon, or cheese.

The playful humor is a nice touch, giving this interactive walkthrough a bit of character.

Once both tasks are complete, you’re left with this prompt to try making your own task:

tallyfy next steps

There’s just one CTA, so it’s very apparent what Tallyfy wants you to do next in order to activate.

It’s not necessary to show off any more features than this.

Just what the user needs in order to activate. Simple.

Interactive Walkthroughs Example #5 – Trello

Trello is a versatile piece of software that lets you organize tasks and collaborate with other team members.

Its welcome screen highlights its versatility:

trello welcome screen

When you write the name of your board, you are subconsciously reinforcing the fact that, as Trello puts it, “you can organize just about anything with a Trello board.”

Since Trello boards don’t function without lists to populate them, the walkthrough next asks you to make some of your own:

trello lists

This is another example of a walkthrough that leads you as a user to experience the value of the product, not merely understand it intellectually.

Lists need to be populated with individual to-do cards, and so this is what Trello makes you create next:

trello cards

Once that’s done, you’re taken to the board you just created, where you can keep exploring on your own terms.

trello get started

But you already have that board, and you have experienced the fact that it only took you a minute or two to build.

This is powerful, and one of the reasons why Trello has become so popular.

Conclusion

We hope you found value in this ultimate guide to interactive walkthroughs!

Having read the article, you should now be able to:

  • Explain what a walkthrough is and why it’s important
  • Understand what distinguishes an interactive walkthrough from a product tour
  • List common components of walkthroughs
  • Choose walkthrough software from the top options on the market
  • Draw inspiration from other companies’ interactive walkthroughs

If you’re looking for walkthrough software, we hope you’ll consider Userpilot. It offers a diverse range of features for a very competitive price.

Click on the banner below to book a free demo today.

[/vc_column_text][/vc_column][/vc_row][/vc_section]

previous post next post

Leave a comment