Learn-by-doing onboarding

This example shows how to use Dopt to build onboarding for a Kanban app that helps users learn the product by simply using it. This onboarding pattern can be effective because it is highly contextual and never in the user’s way. You can see real world examples from companies like Slack.

How it works

This is the Dopt

flow that powers the in-product onboarding experience:

Dopt flow powering this example

The

flow contains blocks that you connect to define the targeting and logic of the onboarding experience.

The

start block defines which set of users should see the flow. All users in this case.

The

step blocks store the state of an experience for a user, like active when the experience is active and complete when the experience is done.

The

finish block finishes the flow, ending the experience for the user.

Developers use Dopt’s SDKs to access and update the state of

step blocks to develop onboarding flows in your application. For example, we show the user a tip in the issue card when a
step block
is active: true.

Let’s walk through how to use the Dopt React SDK to power the tips in the card.

To start, you initialize Dopt with the <DoptProvider />. You’ll include the user ID of a

user you’ve identified to Dopt and the
flow
versions you’d like that
user
to see.

The cards in the Kanban app are all using a <Card/> component. In this onboarding flow, there are three tips, each with a

step block associated with it.

To build this experience, we’ll access the three tip

step blocks with the useBlock hook. The
step blocks
contain data, state, and methods to progress the flow.

Next, we’ll conditionally render the tips in the <Card/> component. The tips will only render when the

step block state is active: true.

src/components/card.tsx
1
export function Card({ id, title, children, isDragging }: Props) {
2
const [firstIssueId] = useKeyValueStore('firstIssue');
3
4
const [firstIssue] = useBlock('krcPrzGs9w6J2mHKQJLYd');
5
const [firstIssueInProgress] = useBlock('z2rnhWqUav5rhRLcxoM55');
6
const [firstIssueReordered] = useBlock('pMw5hcPMz3aZPr5IVfnP8');
7
8
return (
9
<div className={`${cardClass} ${isDragging ? draggingClass : ''}`}>
10
<h3 className={titleClass}>{title}</h3>
11
{children && <p className={descriptionClass}>{children}</p>}
12
{firstIssueId === id && (
13
<>
14
{firstIssue.state.active && (
15
<Alert>
16
<Text span>
17
Okay, let's get to work on your issue. Drag this issue to the{' '}
18
<b>In Progress</b> column to change the status.
19
</Text>
20
</Alert>
21
)}
22
{firstIssueInProgress.state.active && (
23
<Alert>
24
<Text span>
25
Nice, this issue is now <b>In Progress</b>. Next, reorder this
26
item to change its priority.
27
</Text>
28
</Alert>
29
)}
30
{firstIssueReordered.state.active && (
31
<Alert>
32
<Text span>
33
Great, the new priority is set so your whole team can be on the
34
same page. Now let's move this to <b>Done 🙌</b>.
35
</Text>
36
</Alert>
37
)}
38
</>
39
)}
40
</div>
41
);
42
}

Progressing the flow

As a

user performs certain actions, we’ll progress the
flow
to move them to the next steps of the onboarding experience. Let’s look at the
Drag issue to In Progress tip
as an example.

When the user drags the issue card into the In Progress column, we call complete() on

Drag issue to In Progress tip. This conditional logic is wired up in code in handleMoveCard.

src/pages/index.tsx
1
const handleMoveCard = (
2
card: Card,
3
source: CardSource,
4
destination: CardDestination
5
) => {
6
if (card.id === firstIssueId) {
7
if (
8
firstIssue.state.active &&
9
source.fromColumnId === 'backlog' &&
10
destination.toColumnId === 'inProgress'
11
) {
12
moveIssueIntoProgress.complete();
13
}
14
}
15
...
16
};

When complete() is called, the

step block states are updated to progress the
flow
as shown below.

Finishing the flow

When the state of

Next steps is completed: true, the
finish block
will be triggered and the flow will be finished for that
user
.

User flow state in Dopt

Real world examples of learn-by-doing

Slack uses the learn-by-doing pattern during their onboarding to teach users how to use their messenger by sending a message.

Slack also uses the learn-by-doing pattern to help users learn how to use their @ mention.

These examples work well because Slack calls out the feature and provides help contextually, never getting in the way of the user and always helping them get to the next step. Slack also rewards users with positive reinforcement when they complete the task, which can help users feel like they’re succeeding in learning the product.

Slack onboarding and @ mention videos provided by Page Flows 🙏.

More Dopt examples

Coming soon...

Embedded contextual education

Coming soon...

Tailored onboarding