Step-by-Step Educational Flow Example

Have a new feature to show your users? Or an existing feature that users are struggling to learn? A step-by-step walkthrough can help get user through that initial point of friction and able to further learn and adopt a feature. With this type of flow you should:

  • Clearly articulate the feature and the value to the user
  • Teach the major functionality, nuance will be learned later with more use
  • Build in success / completion acknowledgement

Let's walk through building a walkthrough! We'll cover:

This example assumes you have mastered some basics covered in earlier examples, especially the Welcome Flow and Product Tour examples. Start there if you haven't already.


Building a slideout

Launch the flow builder, select Create New, and choose the Slideout step

Add a piece of media

Visuals draw the attention of the viewer and can give a visual queue related to the content of the slideout and flow.

Add text for a headline

A headline should be concise and clearly define the content of the walkthrough and value to the user. 

Once the headline has been added, repeat to add paragraph text content. 

Edit the "next" button text


Adding and editing tooltips

You'll use tooltips to direct a user through the action you would like them to complete. There are two types of tooltips:

  • "Button-driven" , meaning the flow progresses when the user clicks a button in the tooltip
  • "Action-driven", meaning the user clicks on the item on which the tooltip is attached 

Add a tooltip group

Choose the "Blank" layout, we can change this later if needed. 

Place the tooltip

Place it on the edge of the element you're connecting to by using the hover indicator. 

If you want the user to click the element you can change the tooltip to an "Action-driven" tooltip by opening the Settings and scrolling down to the Design section. 

Add tooltips to walk your user through the major steps of the workflow.

Pro Tip: end your tooltip workflow with an action-driven tooltip on the button that creates or saves what the user has just done. 


Celebrating Success

Positive reinforcement is a great tool for increasing the engagement and longevity of your users. Celebrating success gives users that reinforcement. 

As the last step of your flow, add a "success" Modal: 


Targeting the correct users

The use cases for this type of flow span across many user types at many lifecycle stages. For the flow being built in this example, we're targeting Customers in Steadystate (via Segments we created) who have Events but have not created a Goal. Here's what that looks like: