User onboarding is often the first experience your customers have with your product, and the first Userflow project most of our customers build. This guide walks you through creating an effective onboarding experience that engages users from the start.
Get started your way
Prefer visual learning? Watch our comprehensive video series: Your First Userflow Onboarding.
Ready to dive in? View the step-by-step guide below, which outlines how to build an onboarding flow similar to this example, covering best practices and practical implementation steps to help your users succeed from day one.
Onboarding structure
The easiest way to get started with Userflow is to think about building three kinds of content for your app:
A single welcome modal that greets new users.
A few flows that quickly take the user to their first “aha!” moment(s), each flow could correspond to a task in the checklist.
A “Get started” checklist that aggregates the flows and hints at what the user should/could do next.
Later, you can get much more advanced, and we have some ideas for that at the end of this guide. But the above outline is a great and quick way to get started.
To make the rest of your setup more efficient, start by writing down the 2-4 short journeys that you’d like to take users through to give them their first “aha” moments. To get there, have users create key foundational content for their app usage, perform a key action to build upon that foundation, and explore admin functions in your app, if appropriate.
Once you have your tour ideas, continue to the first Userflow step of building the Welcome modal. The following guides you through an example setup, but you can substitute specific steps to match your tour ideas.
Step 1: Create a welcome modal
A great way to welcome first-time users to your product is by making a welcome modal. This introduces learning in a positive way and puts users in control of their learning path, allowing them to begin when they are ready.
Select Flows from the sidebar and click Create flow to begin. In this case, select Start from scratch, enter a descriptive name, and click Create.
.png)
Set the auto-start conditions based on the user attribute Signed up less than 1 day ago, and ensure it starts only once per user with high priority.
.png)
Userflow attributes
To learn more about how to get user attributes into Userflow, check out the Userflow.js docs
Change the content type of the first step to Modal by clicking the gear icon on the step.
Write a welcome text, potentially making it personal using the Name attribute (or First Name if you have configured your Userflow.js snippet to send this).
Add a button by clicking the + and selecting Button. (Be sure your cursor is placed where you want to add the button before selecting this option.) Until you have flows or checklists built, this button can just be a “Got it!/Take me to the product” button that dismisses the modal. But over time, you could have the button start another flow, or have two buttons: “Yes, show me” or “Not right now.”
.png)
Click Preview to see the welcome modal in action using the Userflow Chrome extension (no need to install Userflow.js to test your content). Ensure you select Run as: Test user until you have installed Userflow.js in your app.
.png)
Step 2: Create your first flow
Now, with the welcome modal in place, you can start building simple flows (guides/tutorials) that highlight key actions you want the user to take. Userflow offers many advanced flow capabilities, but to keep things simple initially, you can build a sequence of tooltips that takes the user through the different pages or a key action in your product. For example:
Create the first project
Register time on your first project
Add users
Select a plan
Select Flows from the sidebar and click Create flow to begin.
Don’t set an auto-start condition for the flow; instead, you can use a checklist or a button in the welcome modal to trigger the flow(s) later.
On Step 1 of the flow, select a Tooltip that highlights the first feature or menu item you want the user to click on. One of the powers of Userflow is that, instead of using buttons inside the tooltips (which is also possible), you can trigger the next step based on an action the user takes in your product. For example, in step 1 in the screenshot below, the tooltip is displayed at the Projects menu item, and if the user clicks it, they will be directed to the Projects page and step 2.
Userflow provides a very intuitive way to select the tooltip target element (i.e., what the tooltip should point to), without having to use CSS selectors. Click Select element, and it will take you to your app, where you can select the desired element. Userflow then stores a small screenshot of the element selected, making it easy for other users to understand the flow.
When you have finalized the tooltip steps, a great way to conclude a flow is by using a modal as the last step, where you summarize the flow and include a button to close it.
Make learning fun!
Try adding confetti to congratulate a user on completing the learning.
Click Preview to test your flow in action.
Step 3: Create an onboarding checklist
Now that you have welcomed your user and created your first flows, you can structure your onboarding journey using a checklist. A checklist is a great way to organize both onboarding flows and links to other external resources, if needed.
Select Checklists from the sidebar and click Create checklist to begin.
Similar to the welcome modal, you can set an auto-start condition based on when the user signed up. To ensure that the welcome modal is always started before the checklist, you can set the checklist to start with a low priority.
Now you can start adding checklist tasks. A checklist task can either be set to start a flow or link to a page (internal/external).
You can decide when the checklist task should be marked completed, and you can also decide if a certain checklist task should only be available to specific users, for example, based on an attribute.
We recommend having the first task always be marked as completed. E.g., “Create your account”. There’s a psychological pull in wanting to complete something that has already started, rather than an empty checklist. Give it a completed condition that’s always true, such as “Current page matches *” or Name has a value. No action necessary - nothing happens when you click it.
If you have an “ultimate action” that you want to guide users toward (e.g., selecting their plan if they’re on a free trial), adding that as the last task in the checklist works well. It could simply link to your Billing page with a “Navigate to” action.
Between the first always-completed task and the last “ultimate action” task, we recommend starting small with just 2-4 additional tasks.
Click Preview to see your checklist in action.
Step 4: Customize your theme
Now that you have an amazing baseline onboarding experience, you’ll want to make it look like a native part of your app. Check out our Themes guide to learn how to change the look and feel of your modals, flows, and checklists.
Step 5: Ready for launch
Now all of your content is ready for launch.
Before you can launch, you or one of your engineers needs to complete the following steps:
Launch your content into a staging or QA environment first. See the Environments and versions article for details.
Install the Userflow.js snippet in both your staging and production applications - See the Userflow.js guide for details.
After installing the Userflow.js snippet, return to each of your flows or checklists, click Publish, and deselect production to publish only to staging/QA.
After you have tested the content in QA/staging, you can publish your content to production.
Step 6: Take your Onboarding to the next level
Now that you have your basic onboarding setup, you can start exploring some of the more advanced features of Userflow. Below is a list of some of the capabilities that Userflow offers:
Launchers - Add custom icons/buttons that can launch checklists/flows.
Flows that appear x days after signing up if you have not yet done y.
Feature announcements - use launchers to highlight new features with tooltips.
Segment based on user profiles (different Welcome modals and checklists depending on user type).
Ask about use case using a survey question in the welcome modal, which you can then use to decide which flows to show.
Companies - Group your users by the company and company type they are from. Read more