.jpg)
What’s an Interactive Guide?
An interactive guide is a step-by-step, on-screen tutorial that provides real-time guidance to help users navigate and understand a product or software.
Unlike static tutorials or written instructions, interactive guides are embedded directly into the user interface and dynamically respond to user actions.
2 Types of Interactive Guides ⤵️
💻 In-app experiences: Help new users get familiar with your product or discover new features. Use tooltips, pop-ups, and hotspots to guide them to specific actions or educate.
Examples 👇
🕹️ Demos: Guide prospects and existing users through a simulated version of your products’ experience. Help them learn about your product’s functionalities and onboarding experience before they commit to a purchase, sales demo, or sign-up.
Example 👇
Use Interactive Guides to Improve These ⤵️
(Simulated experience) Prospect discovery/Demo Requests
As prospects consider solutions to help them solve problems, let them experience your application and feel what it can do firsthand.
(Simulated experience) Trial/sign-up conversions
Drive new sign-ups by allowing prospects to validate what your product can do before they sign up. At the end of your interactive demo, prompt them to take action in the actual product.
(In-app) Onboarding
Help new users get started with key features and understand the product quickly.
(Simulated & in-app experience) Feature adoption
Introduce existing users to new or advanced features as they navigate the application.
(Simulated & in-app experience) Support and training
Reduces the need for customer support by providing immediate, on-screen guidance, allowing users to solve issues independently.
Interactive Guide Components You Can Use
Checklists & Resource Centers
The alternative for interactive demos is demo centers, also called product tour libraries ⤵️
Tooltips
Hotspots
Callouts
Video
Call-to-actions
Pan & Zoom
How to Create an Interactive Guide for Your SaaS?
How to create interactive guides depends on whether you intend to craft the guide in the actual product or through a simulated interactive demo. We’ll explain how to do both below.
The steps before you start creating are the same for both types of interactive guides, however.
Skipping over them will drastically tank results. It’s tempting to start building right away.
Don’t. Do these first ⤵️
Steps before you create a guide
Step 1: Define your North Star KPI (success metric)
What do you want to get out of an interactive guide? First, pick one and stick to it. Keep this in mind when going through the following steps.
If you don’t define your main focus, your guides will likely lack focus, and users will hit “skip.”
For example, you might want to:
- Improve user activation during onboarding
- Generate more retention from new users
- Convert more web traffic into sign-ups
- Expand usage within already active accounts
- Book more demos from landing pages
- Etc.
Step 2: Define the persona you’re creating the guide for
Does your solution have more than one ideal user?
For most SaaS, that’s the case. And different user personas mean different needs and feature interests.
It is important to define the primary persona as you craft an interactive guide. The best SaaS creates multiple guides for different personas instead of a generic one for all.
Step 3: What’s the “aha moment” that the interactive guide can provide?
The same as with the North Star KPI, pick one (using both customer research and product usage data).
It’s more effective to aim your interactive guides toward one outcome and allow users to learn more rather than force them through long guides.
For example, once you’ve gone through the initial onboarding guide, Asana make it easy to access new guides as users get familiar with the platform.
Step 4: What’s the best experience to get people to that aha moment?
Given that people’s attention spans are short, what’s the fastest way to deliver value?
Which actions or education steps, lead people to sign up (interactive demo) or keep using the app (in-app experience)?
Finding that out will require some data science, as analyzing product usage is the most efficient way to learn which app actions correlate to a positive impact on the North Star KPI you want to influence.
An approachable way to do it is to first identify user cohorts that have strong results relative the your North Star KPI.
Then, for a given cohort, research what paths and actions were taken the most.
Step 5: Repeat steps 1-4 for other personas (Segmentation)
As mentioned previously, it’s recommended to craft different guides for personas that don’t have the same “aha moment” in your solution.
Imagine we’re building an interactive guide for Apollo.io, a sales engagement solution.
There are 2 types of core user personas:
- Sales representatives (SDRs & AEs)
- Sales managers
Their aha moment when onboarding will differ (our best guess):
- Sales representatives → Finding qualified prospects to reach out to.
- Sales managers → Building an outbound sequence or analyzing results.
It’s for this reason that when you head to Apollo’s “platform overview” page or sign up to its platform, you’re prompted to choose what you’re interested in.
Most no-code guiding tools will have segmentation options.
How to Create Your Interactive Guide (Demo & in-app)
Interactive demo (product simulation)
If you choose to create a “simulated” interactive guide with an interactive demo platform, here’s how to it from recording to publishing 👇
In-app guide (user experience)
Although most SaaS companies will opt to use a no-code tool to build interactive guides in their product experience, your product team can also do it manually by updating the user experience.
If you do choose to leverage a tool, 99% of the time, here’s what you need to do:
- Install: Install a snippet of JavaScript (SDK) much like the tags you’d add to a website. You can add it directly to your product’s codebase or integrate it with Segment. Once installed, events will be tracked, and you’ll be ready to create.
- Create: Most apps will have “builders” where you can create flows and track new events. Anyone on your team can design and edit flows right on top of your product and set up tracking for key user behaviors.
- Target: Once you’ve created a flow, choose who should see it and what action(s) you want them to take. Create and target user segments based on virtually any behavior (like completing another flow or using a specific feature) or attribute (like job title or location).
- Publish: Before you publish your new flow, you can preview the experience in its entirety—and in context—using test modes. When you go live, the SDK knows to start showing your flow to the audience that you targeted.
- Measure: Measure product usage and adoption over time. Establish baselines, and identify new opportunities.
Non-Obvious Mistakes to Avoid When Creating Guides
- Showing too many features at once instead of focusing on delivering value fast and simply.
- Creating new guides instead of iterating existing ones.
- Not asking users for feedback and only analyzing raw engagement data.
- Assuming that users already know certain things about their solution when in fact, they might have signed up after 10 seconds on the site.
- Not segmenting and creating “one-size-fits-all” guides.
Best Practices When Creating Interactive Guides
- Show, don’t tell: It’s better to help users do something than showing them what they can do. And it’s better to show someone what they can do than telling them they can do it.
- Follow the “just-in-time” methodology: Instead of trying to showcase everything from the start, wait for users to take key actions before prompting tours.
- Shorter product tours outperform longer ones: Think of one of a select few outcomes that you want users to get to within the first usage and optimize your product tours to get there. Leave all of the rest for later.
- Make your guides visually appealing: For interactive guides to lead to positive actions by prospects and users, make sure they’re as close to your brand and app UX as possible.
- Be there when users raise their hands: The best apps will offer new tours to users as they discover new capabilities within the product (example from Canva 👇).
Ready to Create Interactive Guides?
Share on
.jpg)
.png)
