Blog post thumbnail

Notion's clever onboarding and inspirational templates

An all-in-one workspace, Notion lets users write, plan, collaborate, and organize all their tasks and notes in one space. Notion's main selling point is an uncluttered design and lightweight editor that lets users focus on getting work done without interruptions.

Although Notion's minimalist design is certainly a main attraction for returning users, Notion smartly recognized that too much white space could actually be unnerving for new users, who don't yet know how to access the product's numerous features and functionalities.

So Notion guides new users through a brief, hands-on onboarding process that introduces the product's key features, functionalities, and commands—ensuring that users have the skills and resources they need to start using the tool straight away.

A comprehensive library of templates also introduces users to Notion's diverse range of use cases—helping new users immediately understand the product's potential value.

But before we get into all that, let's take a quick look at Notion's signup process, which is delightfully pared back and visually pleasing, thanks to minimal design and a friendly mascot.

Creating an account

Signing up for a new account is easy, and there is an option to signup using your Google or Facebook accounts—a small timesaver that nonetheless feels like a big convenience for the user.

notion user onboarding create a profile signup questions

Notion does a great job with their UX copy. It's succinct, colloquial, and reassuring—and optional fields are clearly labeled. A simple progress indicator lets people know where they're at in the account creation process, and CTA lets users know what the next steps will accomplish.

notion user onboarding create a workspace signup questions

The third and fourth steps in the process are optional. First, users are asked if they would like to import data from their existing tools. This is helpful for high-intent signups who want to dive into their own material straight away, but Notion is smart to keep this step optional, since connecting to an existing techstack is a big ask for folks who may be evaluating Notion more casually.

connect apps during onboarding notion example—import data from trello, asana, word, dropbox, quip, google docs, into notion

Finally, Notion includes a bit of cross-selling for their mobile, desktop, and web clipper apps. Again, this step is optional.

notion download ios, android, desktop, and web clipper apps

Learn-by-doing onboarding

With that, users are free to explore the app. But instead of dropping new users into a complex dashboard, Notion introduces them to the core features with a lightweight interactive tutorial.

notion user onboarding tooltip in-app message with cta, text, and mascot

Notion's Getting Started page is a great example of learn-by-doing onboarding. Notion teaches new users the actions they'll need to access their product's core value (and then some) with a fully functional checklist, that includes simple instructions like "Type "/" for slash commands." High-contrast tooltips appear when users hover over certain page elements to provide further instruction as they explore the interface on their own.

notion getting started welcome demo page
notion getting started demo page instructions how to use notion

Inspirational templates

Notion also offers a comprehensive library of templates—very helpful for a product with so many possible use cases. Instead of overwhelming users with the full list of templates, Notion uses the information provided by the user during signup to offer a personalized selection of 5 templates that the individual user is likely to find most helpful. Since we said we were in marketing, we've been given a shortlist of marketing-related templates to browse through.

notion hover tooltip that says click to preview this template"

Clicking on any template in the side menu triggers a large modal with a preview of the selected template. Like the Getting Started doc, each template uses the interface itself to instruct users, and demo data helps visualize value.

notion meeting notes use case template large modal preview window

From this window, users can explore the full list of templates for work and personal use. For example, we discovered an intriguing use case for travel planning that immediately added another layer of value to an already amazing product.

notion use case personal travel template

Why this is really good UX:

  • Notion maintains a clean, minimalist design throughout. This visually reinforces their promise to potential users: an uncluttered writing and organization space that won't distract you with unnecessary bells and whistles.
  • The signup flow not only helps Notion to personalize the workspace according to each user's specific needs (depending on the function they'll use it for and whether they'll use individually or as a team), but it also helps reassert that Notion is a powerful, multifunctional, multichannel solution that can take the place of many existing tools across multiple platforms.
  • The Getting Started page is a great example of learn-by-doing onboarding that lets new users learn how to use the product... by using the product. Clear instructions make it easy to explore and get the hang of "hidden" features and functionalities that would not be obvious to first-time users otherwise.
  • Templates are a great way to not only add value, but convey it clearly. The curated list of templates that Notion provides to each user help them dive into more advanced use cases quickly, while the full list of templates also serves the purpose of showcasing additional use cases that are possible with this visually lightweight but functionally robust product.

Watch the video

Editor's note: The below video—starring our friend Tristan Harward, former Head of Product Design at Appcues—was filmed in 2018 and refers to an older (but very similar) version of Notion's onboarding UX. The important takeaways remain the same.
 
Go to the ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.