Onboarding pattern teardown: The onboarding hub
Phil Vander Broek- January 9, 2024
- 2 min read
Here’s an often overlooked onboarding pattern that I think doesn’t get enough credit for helping to onboard users to your product: the onboarding hub.
An onboarding hub is a dedicated home in your app for onboarding and help resources. It’s often its own page and may include a getting started checklist, tips for the best next step, and entry points to interactive tours, documentation, and support.
It’s super flexible and used by June, Framer, Hubspot, and Remote.
Why onboarding hubs work
- Centralizing onboarding and help resources makes it easy for the user to know where to go for the next steps and resources.
- They’re natively integrated into the product’s navigation and UI, so they feel natural. They don’t distract from the tasks the user needs to complete.
- The pattern is super flexible, enabling you to create the experience, content, and entry points that are best for your users and product, like surfacing relevant information that’s hidden in settings
- Easy surface area to experiment with, like personalizing setup steps
When they work
Onboarding hubs are great for products where the user needs more content, support, and documentation for setting up the product and reaching their aha moment. Developer tools, financial tools, and some collaborative apps and marketing tools are good candidates for onboarding hubs.
When they don’t work
They’re probably not good for apps with established patterns (e.g. Linear) or where there’s a single, core workflow that’s simple (e.g. Slack).
Onboarding hub examples
Here are some examples from leading products
June
June has one of my favorite onboarding hub examples. The checklist is center stage and has helpful, live content. And provided helpful videos and links if the user has questions.
Framer
Framer blends the idea of their onboarding hub with the project page. It’s super simple and contains links to an interactive tour and documentation. This demonstrates how simply exposing the right entry points in the right context can help users on their journey. It’s dimissable in settings.
Remote
Remote blends the idea of an onboarding hub with the product home, choosing to surface the entry point to a tour next to core product actions and information. It’s a bit of a cheat! But I like how it demonstrates the flexibility of the hub.
Hubspot
Hubspot is a super mature platform with many different product lines. Each product line has its own hub with a unique mix of a checklist and embedded next best steps. I like this example because it shows how hubs can give structure to a large amount of information.
Building an onboarding hub with Dopt is super easy
We started Dopt to give builders complete control over their onboarding experiences. The onboarding hub is a perfect example of a natively integrated, multi-step, content-rich onboarding flow that Dopt makes easy to build.
Here’s an example onboarding hub built with Dopt.
You can play with an interactive example here.
How does Dopt make this easy?
- This onboarding hub is powered by 2 flows in Dopt: A checklist flow and a tour flow. The flows define the type of experience (checklist, tour, etc), configuration like how many steps there should be, the copy, the video, and the resource links.
- We then developed the flows into the example with Dopt’s SDKs and pre-built React checklist, tour, and card components. Dopt’s SDKs enabled us to embed the checklist and tour entry points into the page, creating the onboarding hub. We chose to use our pre-built components, but you could also build with Dopt headlessly and use your own components.
- Dopt handles all of the flow states for each user, like when checklist steps are complete and when the tour is active.
Creating the flows, developing them into your product with our SDKs, and testing should only take a few hours ✨.
If you’re interested in learning more onboarding best practices, check out our Ultimate Guide to Product-Led Onboarding for a playbook.