Getting started checklist

Example

This example shows a checklist style onboarding experience built with Dopt. This checklist guides users through the three key actions to get value out of a simple analytics app.

When to use this pattern

Checklists work well when they’re action-oriented and create a journey that’s focused on valuable outcomes.

They’re especially useful for products that have long onboarding journeys, like products where admins have to set up integrations before the product is useful, the product has complex concepts, or the user has to download a desktop app or browser plugin.

They work well with other feature-level patterns like interactive walkthroughs and contextual education.

How to make this checklist with Dopt

This is the Dopt flow that powers the checklist.

The flow contains blocks that define the targeting and logic of the checklist.

The start block sets the flow to target trial users.

step blocks represent the checklist items and next steps.

Developers use Dopt’s SDKs to access and update the state of step blocks to develop the checklist in the application.

Once the step blocks that represent the checklist items are transitioned, the gate block allows the flow to progress to the next step block.

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

Initializing Dopt’s React SDK

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.

Developing the checklist items

The step blocks in the flow store the state of the checklist items. You access that state via the SDK to develop the checklist item UI: when Connect a data source is transitioned, the checklist item UI is checked.

You access the state of the blocks with the SDK like this:

<Checklist>  <Flex className={styles.checklistPopoverHeader} p="2">    Getting Started  </Flex>  {connectDatasourceBlock.state.completed ? (    <FinishedCheckListItem {...content.datasource} />  ) : (    <CheckListItem      Icon={IconPlugConnected}      onClickButton={datasourceModalProps.onOpen}      {...content.datasource}    />  )}  {addChartsBlock.state.completed ? (    <FinishedCheckListItem {...content.datasource} />  ) : (    <CheckListItem      Icon={IconChartPie}      onClickButton={addChartsModalProps.onOpen}      {...content.charts}    />  )}  {shareDashboard.state.completed ? (    <FinishedCheckListItem {...content.datasource} />  ) : (    <CheckListItem      Icon={IconShare}      onClickButton={inviteModalProps.onOpen}      {...content.invite}    />  )}</Checklist>

The flexibility of Dopt

The power of Dopt is that you can use the SDK’s accessors and intent methods to develop the best experience for your product.

This example showed the checklist “chip” developed natively into the navigation and the checklist as a popover. The same flow could also power other checklist UIs like a side bar checklist or embedded checklist.

Progressing flow state

When a user completes an checklist item, like connecting a data source, you progress the state of the step block by using the transition() function.

const [block, transition] = useBlock('HqEPQAwtTgbooQaoTAEwa');          return (  <ConnectDatasourceModal    onClose={props.onClose}    isOpen={props.isOpen}    onFinish={() => {      transition('default');      props.onClose();    }}  />);

The transition() function enables you to develop a checklist that’s tailored to your usecase. They can be used in multiple places to support journeys that have multiple ways to complete an action, like if there are many different ways to connect to a data source.

And you can use transitions on both on the frontend and backend, enabling you to progress state at the application logic level, like when a data source is actually created on the backend.

Completing the checklist

When all step blocks are exited: true, then the flow will progress past the gate block to next steps, setting it to active: true.

Finishing the flow

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

Real world examples of getting started checklists

Shopify embeds their getting started checklist into their home page that can be accessed from the navigation. This pattern is nice because the user always knows where to find the checklist, but it’s never in the way. While the user completes each task, Shopify gives the user contextual help in a side bar. Each task is pretty complex, so the getting started checklist helps guide the user.

Loom uses a popover getting started checklist with an entry point in the navigation, similar to our example. Loom’s checklist is simple and helps their users create an account, record the first video, and get the first views.

Shopify and Loom videos provided by Page Flows.

Resources