Guide to Onboarding User Flows + 3 Amazing Examples

Most guides to onboarding user flows describe the patterns; few lay real flows side by side. This one maps three, from GatherContent, 15Five and Squarespace, stage by stage: what each asked at sign-up, when guidance started, what was optional, and what marked the end of onboarding. The differences are the decisions you'll face when you design your own.

The screenshots were taken in 2022, so each product may look different today.

What is an onboarding user flow?

An onboarding user flow is the sequence of screens, prompts and actions that takes users from their first interaction with a product to its value. It introduces core features to first-time users and new features to current users, so in practice the flow never really ends.

During that flow, the product has to deliver what users expect, in a series of steps that reveal its real value. If the interface does that well, users don't get lost in a maze of actions: they adapt to each new view and find their own way after a few steps.

People sometimes call this an onboarding workflow. In employee onboarding, that phrase usually means an HR process; in a software product, it means the same thing as the user flow described here.

Why does a great user onboarding flow matter?

What happens at the start of a journey shapes the rest of it. If people can't find what they're looking for during onboarding, they may switch to a competitor; if you introduce updates badly, the same can happen to existing users.

A good user onboarding flow conveys your key messages and shows the core benefits clearly, which raises retention and lowers churn at the same time. And the more familiar users are with the product, the more they engage with it.

How do three real onboarding user flows compare?

GatherContent, 15Five and Squarespace each made different choices at every stage of the flow. The table maps them side by side, from the screenshots below.

The pattern worth copying: the less a product asked at sign-up, the sooner the user reached the product, and the flows that ended on a real outcome (a live site, a completed setup) gave users a reason to finish.

3 examples of great onboarding user flows

1- GatherContent

GatherContent's user onboarding flow was detailed, yet easy to follow, because the product tour explained each feature at the moment it became relevant.

The sign-up form was the weak spot: seven fields, including company name and industry. Asking only for an email address and collecting the rest later would shorten the first step.

After sign-up, a tooltip ("Top of the class") pointed to a checklist of five tasks called the Quick-start guide.

Each task's box turned green when it was complete.

As users worked through the tasks, more tooltips appeared to show them around the main page, where most of the work happens. The first explained where items appear and what they show.

The next one showed the action bar, through which users manage most of the platform.

Then it showed where to see the people assigned to the task at hand.

Right after, it pointed to the status of the work.

The tooltip moved on to where templates are applied and shown.

The tooltip guide ended on the button that leaves the page.

Inside an item, modals with GIFs previewed the functions users would try next, such as editing, formatting and commenting.

When every task in the Quick-start guide was done, the progress bar filled up.

Then the checklist and its icon disappeared from the header, which marked the end of onboarding.

2- 15Five

15Five showed that short, simple steps keep users engaged. The flow started with a sign-up form of five required fields and an optional phone number, the one part that could be lighter.

Next came a welcome email.

Then users created a password for later logins.

After that, an optional page invited users to add team members.

Whether or not users invited anyone, a five-step tour of the Check-ins feature followed. The first step greeted the user by name and explained the core feature: a weekly work journal.

The second step taught commenting, with an example on the right and the explanation on the left.

The third step asked users to add a priority and showed how it helps.

The fourth showed how to add questions for team members, to get feedback and check in with them.

The last step covered giving virtual high fives to praise a colleague's work, and a Finish button ended the tour.

3- Squarespace

Squarespace's user onboarding flow worked for three reasons: one-click sign-up, elegant visual design, and short guides that showed the core functions back to back.

After sign-up, a four-step modal appeared, starting with naming the site.

The second step showed an explanation and a GIF with hotspots over the buttons users would soon learn.

The third, in the same format, showed how to create pages.

The last step covered designing the site.

Then a checklist appeared on the right. Finishing it was the way to set up the site and go public.

Arrows next to each task showed where to go for that action.

As users explored, modals explained what they could do in each area.

After finishing the tasks, users could take the site live by clicking Subscribe.

How do you design a great onboarding user flow? (5 steps)

Design the flow by deciding, stage by stage, what the user must do to reach value and cutting everything else. You don't need every technique below in every flow; a flow that tries them all at once ends up cluttered.

1- Be direct and clear

Cut to the chase. Keep copy short and simple, so users can take it in while following the visuals. In the table above, the shortest sign-up (Squarespace's one click) got users into the product fastest; every field you add at sign-up delays the first useful screen.

2- Be user-centric

Find out what your users need and expect, and adjust the flow to match. The more personal the onboarding, the more engaged users are; our guide to personalised onboarding covers how to ask without slowing people down.

Look at the whole flow through users' eyes. The goal is to prove the product's value while showing them they're in capable hands.

3- Don't rely on text alone

Text isn't the only way to get a point across. Videos, images and GIFs give readers a rest and suit people who learn better by watching. GatherContent's GIF modals and Squarespace's intro video both carried explanations that would have been long in text.

4- Make use of tooltips and more

Users forget features they don't use every day; that's normal. If it happens to most users, though, it's an onboarding problem, not a user problem. Use the right onboarding UX patterns, such as tooltips, hotspots and checklists, and check the result with user testing. Nobody knows your users better than your users.

5- Have interactive guides

Don't let users sit and watch onboarding happen. Let them interact with the product while they learn, as in GatherContent's flow, where tooltips appeared as users completed real tasks. Interactive guides help retention and engagement at the same time. For the walkthrough itself, see our guide to creating a product tour.

Conclusion

Onboarding user flows are like a play performed for an audience: practise a lot, keep the audience in mind and make sure they have a good time, and they may recommend you to their friends. What you show in the flow affects:

• User retention
• User engagement
• Customer churn

Frequently asked questions

1- What is a user onboarding flow?

A user onboarding flow is the path new and existing users take to learn your product, from sign-up to first value and on to new features. It should show your core features in the order that gets users to value fastest.

2- Can you give an example of an onboarding flow?

Squarespace's 2022 flow is a compact example: one-click sign-up, a four-step welcome modal, a setup checklist, and going live as the final step. The table above compares it with GatherContent's and 15Five's.

3- How do you create a user onboarding flow?

There's no single procedure, but the steps are consistent: define the first value users should reach, list the stages between sign-up and that value, cut what isn't needed, and pick the onboarding pattern for each stage. Listen to users' needs and be as direct as possible.

4- What makes a good user onboarding?

Good user onboarding gets users to value without tiring them: an error-free flow, built around their needs and expectations, that ends on an outcome they care about.