Most SaaS onboarding is either confusing, annoying, or ignored. But when it’s done right, a product tour can save your users hours of guessing and cut down on support tickets. If you’re building or improving onboarding for your SaaS app and want to use actual, multi-step guides instead of a popup that just says “Click here,” this is for you.
This guide covers how to build multi-step product tours using Userflow. I’ll walk you through the real steps, point out what works, and flag the stuff you can safely skip.
Why bother with a multi-step product tour?
Before you dive in, be clear what you want out of a tour. Product tours aren’t magic. When done well, they:
- Help new users get to an “aha” moment faster.
- Reduce questions and support tickets.
- Increase feature adoption (sometimes—if the tour actually teaches something).
But they only work if they’re relevant and not too long. If you show users 12 screens about features they don’t care about, they’ll click “skip” or worse, churn. So, focus on the critical path: what do new users need to do to get value out of your product—fast?
Prerequisites: What you need before you start
You’ll need a few things:
- Access to your SaaS app (preferably a testing/staging environment).
- Admin access to Userflow.
- A clear idea of what you want to teach or highlight in your tour.
- (Optional, but recommended) A rough script or bullet list of steps for the tour.
If you’re new to Userflow, get familiar with their interface first. There’s a learning curve, but it’s not rocket science.
Step 1: Map out the key flow you want to guide users through
Don’t open Userflow yet. Start with a pen and paper or a blank doc.
- Define the “core workflow” you want users to complete. Example: creating a project, uploading a file, or inviting a teammate.
- Break it into steps. Keep it short—3-6 steps is usually plenty.
- Write one sentence per step: what does the user need to do, and why does it matter?
Pro tip: If you’re not sure what to include, ask your customer support team what trips up new users most often.
Step 2: Create a new flow in Userflow
Now log in to Userflow.
- Click “Flows” in the sidebar, then “Create flow.”
- Give it a simple, clear name (e.g., “First-Time Project Creation Tour”).
- You’ll see a blank canvas for building your flow.
Don’t worry about making it perfect—just get the basic steps in place.
Step 3: Add and configure steps
For each step in your script, you’ll add a corresponding step in Userflow.
Types of steps you can use:
- Tooltip: Points to a UI element. Great for “click here” moments.
- Modal: Pops up in the center. Good for intros, summaries, or big concepts.
- Checklist: Lets users track progress. Useful for multi-step flows, but don’t overdo it.
How to add a step:
- Click “+ Add step.”
- Choose Tooltip, Modal, or Checklist based on what you want to show.
- Enter your content—keep it short and focused. Nobody reads long tooltips.
What to avoid: Don’t narrate every button. Focus only on the actions that matter for getting started.
Step 4: Attach tooltips to the right elements
Userflow lets you anchor tooltips to specific UI elements using CSS selectors.
- Click “Select element” and then choose the element on your app.
- If Userflow can’t find the element, double-check your selector or refresh the page.
- For dynamic elements (things that load after the page), you might need to use more specific selectors or add a delay.
Real talk: Anchoring tooltips is the fiddliest part. Test each one—some selectors break if your app layout changes.
Step 5: Set up flow logic and branching (only if you need it)
You can add logic so that users see different steps based on what they do.
- Conditional steps: Show or skip steps based on user actions or properties.
- Branching: For example, if a user has already completed a task, skip that step.
When to use: Use branching if your app has different onboarding paths (e.g., admin vs. regular user). Otherwise, keep it simple.
What to ignore: Don’t overcomplicate with too much logic on your first tour. It’s easy to get lost in “what ifs” and never launch.
Step 6: Trigger the tour at the right time
How and when your tour shows up matters more than you think.
- Automatic triggers: Start the tour when a user visits a certain page for the first time.
- Manual triggers: Let users launch the tour from a “Help” menu or onboarding checklist.
- User properties: Only show the tour to new users, or those who haven’t completed the core action.
Honest advice: Don’t make every user go through the tour every time. That’s a fast way to annoy people.
Step 7: Test your tour end-to-end
Before you ship it to all users, run through the entire tour yourself.
- Try it as a brand new user. Does it make sense?
- Try skipping steps or clicking around—does the tour break?
- Ask a teammate to run through it and give feedback.
Common issues:
- Tooltips point to the wrong place on different screen sizes.
- Steps get skipped or repeat.
- Content is too wordy or not helpful.
Step 8: Publish (but start with a small audience)
Don’t blast your new tour to every user right away.
- Use Userflow’s targeting to show it only to a test group first.
- Watch analytics: Are people completing the tour? Where do they drop off?
- Get feedback from real users (not just coworkers).
If nobody finishes the tour, or everyone skips it, rethink your steps or wording.
Step 9: Iterate based on data—not guesswork
Userflow gives you stats on how many users start, finish, or bail on your tour.
- If most users drop off early, your tour is probably too long or not relevant.
- If nobody clicks the next button, your instructions aren’t clear.
- If you’re getting support tickets about steps you covered, maybe your tour isn’t visible enough—or users are just ignoring it.
What works: Short, actionable tours that solve a real problem.
What doesn’t: Tours that try to teach everything at once, or just repeat what’s already obvious.
Pro tips for effective product tours
- Keep it short. Three to five steps is usually enough. Any longer, and users tune out.
- Use plain language. Skip the marketing fluff. Tell users what to do in simple terms.
- Let users skip. Don’t force them through every step. Add a “skip tour” option.
- Don’t just point—explain why. Instead of “Click here,” try “Click here to create your first project.”
- Update your tour as your product changes. Outdated tours are worse than none at all.
What to skip (seriously)
- Don’t demo every feature. Focus on what gets people to their first win.
- Don’t rely on tours alone. Good UI and docs matter more.
- Don’t expect a tour to fix a confusing product. If people can’t use your app without a tour, the problem isn’t onboarding.
Wrapping up: Keep it simple, launch, and improve
Product tours are just one tool for onboarding. Start simple, launch to a small group, and tweak based on what real users do—not what you think might happen. You can always add more steps or logic later, but you’ll never know what works until you ship something and watch how people use it.
Focus on helping users succeed, not showing off every feature. If you do that, you’ll get more engaged users—and a lot fewer support emails.