Independent. No onboarding vendor owns this site or pays to be on it.

Prices checked 19 Oct – 3 Nov 20266,688 G2 reviews readHow we review →

UserOnboarding Academy

#ReallyGoodUserOnboardings

Our collection of user onboarding UX from the most notable SaaS tools, apps, and platforms that we love: welcome screens, product tours, tooltips, checklists and empty states, each with what makes it work.

Apple’s Let Your Family Know screen with a Send a Message button and a Not Now link

Modal

Apple Family Sharing’s full-screen modal is thoughtfully designed

Apple Family Sharing explains Purchase Sharing in a full-screen modal, then offers to message the family once it’s turned on.

Life360 screen headed Here's a quick crash course on Life360 Crash Detection, with a car crash drawing and Continue

Full-screen steps

Life360’s feature onboarding screen is short and informative

Life360 sets up Crash Detection in four onboarding screens that explain the feature, what it needs to work and its limits before the user turns it on.

Full-screen steps

Duolingo Premium’s onboarding screen is exciting

Duolingo welcomes new paying subscribers with five onboarding screens: four on what the plan adds and a last one that switches on a special app icon.

Google Meet announces background noise filtering in an illustrated tooltip pointing at the call's options menu, with Learn more and Got it buttons.

Tooltip

Google Meet’s tooltip introduces better user experience

Google Meet announces background noise filtering in an illustrated tooltip pointing at the call's options menu, with Learn more and Got it buttons.

Google Calendar modal asking users to set a working location, with Office, Home and Multiple locations options

Modal

Google Calendar’s personalization feature is introduced

Google Calendar asks users to set a default working location in a modal, explaining that it helps colleagues schedule time with them.

Segment Anything modal How to use the selection tool, showing bears being masked with Add Area and Remove Area controls

Modal

Meta AI Segment Anything’s onboarding relies on one simple modal

Meta AI's Segment Anything demo explains its selection tool in one modal: a visual example, a short heading and two sentences with the controls in bold.

Product tour · Tooltip

Google Analytics’s mini onboarding for a new feature is interactive and concise

Google Analytics introduces its Landing page report with a three-step tooltip tour that has users click through the menu to reach the report.

Product tour · Video

UserGuiding’s product tour is to the point - and on point

UserGuiding’s contextual product tour introduces Resource Centers in five interactive steps and ends with a video of real use cases.

UserGuiding signup step to choose a brand colour and button shape, with a preview of sample onboarding elements on the right

Signup flow

UserGuiding’s signup process is a customization blast

UserGuiding's signup asks new users to pick a brand colour and button shape for their onboarding content, with a live preview beside the form.

Modal

ChatGPT’s new feature modal is fun and explanatory

ChatGPT introduced GPT-4 in a dark modal with an animated header, a three-point list of what improved and two buttons: Maybe later and Try GPT-4.

Slideout

Google Sheets introduces new feature hands-on

Google Sheets announces dropdown chips in a small slideout modal whose Show me how button drops users into an empty cell to build one themselves.

Jira Actions menu showing an automation illustration, one line of copy, and Create automation and See templates buttons

Inline hint

Jira’s first-time feature use keeps it contextual

Jira explains manual automations inside an issue’s Actions menu, so users learn the feature when they open that menu, not before.

Modal

Adobe Illustrator’s welcome modal is a great holistic view

Adobe Illustrator’s What’s new modal lists five updates in a side menu, so users can step through every new feature without leaving one window.

Modal

Canva’s new feature announcement modal prompts hands-on experience

Canva announces Magic Design with a sidebar card that opens a large modal, where users try the feature without leaving the overlay.

Adobe Creative Cloud welcome modal with icons for managing apps, accessing files and building skills, and a Done button

Modal

Adobe Creative Cloud’s welcome modal is formal but nice

Adobe Creative Cloud's one-step welcome modal uses three icons and two short paragraphs to tell new users what the desktop app is for.

Tooltip

Adobe Illustrator tools are introduced as users hover on them

Adobe Illustrator opens a hover tooltip for each tool, with a small illustration, one line of copy and a Learn more button.

Canva’s Design panel with a Magic Design card above the templates: one line of copy, an icon and a close button

Tooltip

Canva’s contextual tooltips meet users where they are

Canva announces Magic Design with a contextual tooltip inside its template panel, reaching users where the feature is useful without a pop-up.

Spotify Listening modes sheet with Shuffle and Smart Shuffle, marked New in green, above a Learn more link

Slideout

Spotify’s new feature is introduced as frictionless as possible

Spotify introduces Smart Shuffle inside the menu that opens from the shuffle button, with a New label, one line of copy and a Learn more link.

LinkedIn mobile slideout titled Introducing auto captions, with an illustration, three icon-led notes and a Got It button

Slideout

LinkedIn’s slideout modal is well-formatted and read-worthy

LinkedIn introduces auto captions in a slideout modal with an illustration, three icon-led notes and a single Got It button.

Instagram full-screen modal, There’s a New Way to Message on Instagram, listing five features with Update and Not Now

Modal

Instagram introduces the Messenger integration

Instagram announces its Messenger integration with a full-screen modal listing five new features, an Update button and a clear Not Now.

Empty state

Letterboxd’s empty states feature a fun easter egg

Letterboxd's empty review tabs pair No reviews. with a famous film line, and tapping the line opens the film it's from.

CapCut editor with a yellow tooltip, Tap Clip to discover more functions, linked to a hotspot on the video clip

Product tour · Tooltip · Hotspot

CapCut’s product tour is short and contextual

CapCut walks new users through its video editor with a short, hands-on product tour of yellow tooltips tied to hotspot beacons.

Duolingo Feed tab showing a sleeping Duo mascot above the message The Feed is currently unavailable!

Empty state

Duolingo’s empty state is encouraging

When Duolingo's Feed is unavailable, its empty state shows a sleeping Duo and suggests trying a lesson while you wait.

Modal · Tooltip

Notion’s new feature Notion AI is introduced the Notion way

Notion introduces Notion AI with a feature modal and a tips screen, then teaches it hands-on with tooltips on a blank page.

Slack modal asking Is it OK to send this, with a mail-carrier pigeon illustration and Edit Message and Send buttons

Modal

Slack’s confirmation popup window is necessary but fun

Slack double-checks before a file is shared with another workspace, using an illustrated confirmation modal with Edit Message, Send and a don't-ask option.

Slack huddle with a New! screen sharing tooltip, and a Mobile Screen Share slideout with a Got It button

Tooltip · Slideout

Slack’s new feature tooltip is not too intrusive

Slack announces mobile screen sharing in huddles with a small, dismissible tooltip that opens a slideout modal explaining how to use it.

Jira mobile screen with a padlock and key illustration, the heading Well, this is awkward and a close button

Empty state

Jira’s empty state is way less disappointing than a 404-page

Jira's mobile app answers an issue you can't open with a padlock illustration, the line Well, this is awkward and a close button.

Calendly modal announcing Managed Events, with a short video, three bullet points and a Get started button

Modal · Video

Calendly’s new feature modal features a video

Calendly announces Managed Events in a modal that pairs a short video with three bullet points and a single Get started button.

Tooltip

Slack’s new feature tooltip features a cool gif

Slack offers a simpler sidebar in a one-step tooltip with an animated preview, a recommended setting and a Save button.

Dark blue Twitter tooltip under a tweet's share icon reading Share this Tweet with anyone, even if they aren't on Twitter yet

Tooltip

Twitter’s tooltip is contextual with good copy

Twitter points a small dark blue tooltip at the share button on a tweet, reminding you that you can share it with people who aren't on Twitter.

Canva mobile bottom sheet saying "You're on a roll" with 5, 10 and 50 design award badges and a View and edit my award button

Modal

Canva’s celebration modal marks a milestone

Canva's mobile app celebrates a user's tenth design with a bottom-sheet modal, shown right after a save, that invites them to edit an award.

Spotify modal asking "Does your Valentine have good taste?" with a Blend Now button, beside the Create a Blend screen

Modal

Spotify takes every chance to show off features

Spotify uses Valentine's Day to promote Blend with a heart-themed modal whose Blend Now button opens an invite screen for a shared playlist.

Product tour · Tooltip

Figma’s product walkthrough is thorough

Figma offers new designers an optional 10-step walkthrough of its editor, each step a short tooltip with a picture, a Learn more link and a Next button.

Modal

Figma’s initial onboarding is focused on quick starts

Figma welcomes new users with a short modal sequence: name your team, invite people, pick a plan, then choose what to make first.

Freeform's Welcome to Freeform screen with three benefits and a Continue button, beside an Add to Your Board tooltip

Modal · Tooltip

Apple’s new default app Freeform is introduced

Apple introduces Freeform with a full-screen welcome modal of three short benefits, then a tooltip that points to the board's toolbar.

Full-screen steps · Signup flow

Yoga App’s Signup flow is simple and ready to get started

Yoga for Beginners opens with a short value carousel, then asks a few tappable questions about the user's fitness, with a progress bar and simple icons.

Signup flow

Daily Yoga App’s Signup flow aces user segmentation

Daily Yoga's signup flow asks questions in three named parts, with a progress bar, so new users sort themselves into a personalised plan.

Canva mobile slideout titled Took a screenshot?, suggesting you share the design by link, with the link and a Copy button

Slideout

Canva reminds users of its built-in functions

When you screenshot a design in Canva's mobile app, a slideout suggests sharing it by link instead and puts the link and a Copy button right there.

Signup flow

YAZIO's signup flow is thorough and reassuring

YAZIO's long signup flow asks about goals, habits and body measurements, and explains why it needs each answer, with a progress bar at the top.

Product tour · Tooltip · Modal

YAZIO app celebrates first step into onboarding

YAZIO walks new users through logging their first meal with interactive tooltips, then celebrates the milestone with a confetti modal.

Slideout · Video

Canva’s new feature onboarding takes place in a demo doc

Canva introduces Canva Docs in its mobile app with a short video slideout, then a demo doc where you try each feature as you read about it.

Full-screen steps

Duolingo’s Premium promotion modal is convincing

Duolingo walks new Super Duolingo subscribers through five full-screen steps on what the paid plan adds, ending with a Super app icon toggle.

Orange HubSpot tooltip headed Get HubSpot browser notifications, with device illustration, Continue and Maybe later

Tooltip

HubSpot’s browser notification tooltip is prompted contextually

HubSpot asks users to turn on browser notifications in a tooltip shown when they open Notifications, and explains the browser prompt before it appears.

Zoho Desk panel, Introducing Guided Conversations, with a video thumbnail and two buttons

Slideout · Video

Zoho Onboards to New Feature Uniquely

Zoho Desk introduces Guided Conversations with a corner widget that opens a panel offering a video, direct access or an interactive guide.

Amplitude Academy course page with a lesson checklist sidebar at 0% complete and lesson lengths in minutes

Checklist

Amplitude Academy’s onboarding checklist gets progress bars

Amplitude Academy turns its course sidebar into an onboarding checklist, with a course progress bar, a ring per lesson and each lesson's length.

HubSpot company record with a teal Learn more about the new overview tab widget open to a feedback menu

Survey

HubSpot’s survey widget wants to know what you think

HubSpot uses a small widget to ask how users feel about its new Overview tab, with a three-face rating, a comment box and a thank-you.

HubSpot company record with the Overview tab outlined and a tooltip titled Meet the overview tab with a Got it button

Tooltip

HubSpot’s tooltip onboards to a new feature

HubSpot introduces the new Overview tab on its company record page with a single highlighted tooltip and a one-sentence explanation.

Twitter's empty Verified notifications tab with a halftone verified badge illustration and a Learn more button

Empty state

Twitter’s empty states are fun and illustrated

Twitter's mobile app fills empty notification tabs with bold halftone illustrations and a line explaining what will show up there.

Canva mobile modal with the user's last design, three template ideas and buttons to continue it or start a new design

Modal

Canva’s returning user modal is engaging and educating

Canva's mobile app greets returning users with a modal showing their last design, three template ideas and a choice to continue or start afresh.

Empty state

PlayStation App’s empty state features a gif

The PlayStation App fills its empty Captures tab with an animated illustration and an offer to upload PS5 captures, with Enable or Not Now.

Full-screen steps

Spotify’s Wrapped carousel is colorful and fun

Spotify explains its Wrapped Snapchat lens in a four-card carousel, one bright colour per step, with a Try it out button and a quieter Dismiss.

Modal

Spotify’s feature modal features a gif

Spotify suggests auto-downloading podcast episodes in a bright modal on the show's page, with an animation of the setting being switched on.

Hotspot · Tooltip

Intercom’s hotspot triggers a tooltip and a popup

Intercom pairs a hotspot with a tooltip whose Learn more link opens a full help article inside its own Messenger widget.

Navattic Getting started checklist with four steps and time estimates, a progress bar and Collapse and Dismiss options

Checklist

Navattic’s first-time user onboarding wizard is perfectly planned

Navattic's getting-started checklist sits at the top of the dashboard with a progress bar, a time estimate for each step and options to collapse or dismiss.

Canva download slideout showing a completed PNG download above a Try Quick Create card with a Get Started button

Slideout

Canva’s feature onboarding is as non-disruptive as can be

Canva tucks a Quick Create feature announcement into the slideout that confirms a download, so the pitch arrives once the user's task is done.

Product tour · Tooltip

Grammarly’s new feature onboarding is set outside of the product

Grammarly's browser extension runs a four-step new feature tour inside Gmail, with black tooltips that explain email highlights and recaps.

Upwork modal titled More actions for your contract, with Explore on Your Own and Take a Quick Tour buttons

Modal · Product tour · Tooltip

Upwork’s Quick Tour really is quick

Upwork explains its redesigned contract page with a modal offering a quick tour, then three tooltips with a green progress bar.

Calendly modal introducing Meeting Polls in three steps, with a tooltip on the Create button behind it

Modal · Tooltip

Calendly's new feature modal is persistent

Calendly announces Meeting Polls with a modal and a tooltip on the Create button, so users learn the feature and where to start it.

Figma file browser with a corner slideout titled FigJam templates for PMs, a NEW sticker and a Try FigJam button

Slideout

Figma's slideout modal grabs attention with fun icons

Figma promotes its FigJam templates for product managers with a corner slideout modal, a NEW sticker, one line of copy and a Try FigJam button.

Jarvis modal reading "Want a deal? Stay to get 30% off for 3 months!" with Accept This Offer, Back and Decline Offer buttons

Modal

Jarvis' churn modal is convincing

Jarvis answers a cancellation with a churn modal offering 30% off for three months, with the offer up top and Decline Offer at the bottom.

Discord What's New modal dated October 4, 2021, with an illustration, a New Features list and social media links

Modal

Discord's new feature modal is target audience-aware

Discord's What's New modal pairs a dated illustration and a list of new features with links to follow Discord on social media for more updates.

ClickUp Downgrade panel asking "Would you like to stick around if we gave you 3 free months?" with a Yes, please! button

Modal

ClickUp's downgrade modal knows how to keep customers

ClickUp's downgrade modal offers three free months before a user leaves a paid plan, and keeps the downgrade option as a quieter link below.

Amplitude tooltip suggesting a bar chart could be a data table, with No thanks and Convert buttons

Tooltip

Amplitude’s contextual tooltip is actually helpful

Amplitude's contextual tooltip suggests turning a bar chart into a data table while the user builds it, with a one-click convert button and a No thanks.

Discord tooltip under the server menu announcing free sticker slots, with Got it and Upload Stickers buttons

Tooltip

Discord’s contextual tooltips are fun and easy to digest

Discord announces server features in tooltips under the server menu, each with a playful illustration, one or two lines of copy and two clear buttons.

Calendly tooltip under the new Routing Forms tab with a video, three bullet points and a Create a Routing Form button

Tooltip · Video

Calendly’s new feature onboarding features a strong CTA

Calendly announces Routing Forms with a tooltip on the new tab that holds a short video, three bullet points and one clear Create a Routing Form button.

Notion slideout in the bottom corner titled Tell us more about yourself, with a Take the 20 second survey button and Skip

Slideout · Survey

Notion’s survey slideout is honest about the time

Notion asks users about themselves in a small slideout whose button promises a 20 second survey, then shows four quick questions in the same card.

Zoom profile page with a slideout card in the corner headed Exclusive Spring Savings and a Get Offer link

Slideout

Zoom’s in-app slideout modal feels exclusive

Zoom promotes an upgrade discount in a small slideout card on its account pages, with a short offer, a deadline and a Get Offer link.

Kahoot! app asking Choose your account type, with Teacher, Student, Professional and Personal as coloured quiz tiles

Signup flow

Kahoot’s signup onboarding and user segmentation are on-brand

The Kahoot! app segments new users with questions styled as quiz answers, shows a progress bar throughout and lets them create an account later.

Three Tumblr follow-up screens: Send feedback for neutral and sad answers, Rate the app for the happy one

Survey

Tumblr’s feedback survey is fun and friendly

Tumblr asks how users feel about its app with three faces, then answers each choice with playful copy and a matching next step.

VSCO slideout introducing cross-processed presets KA3X and FR4X over a photo of swimmers in a pool, with Next and Dismiss

Slideout

VSCO’s campaign modal pitches the cool new features first

VSCO pitches two new presets in three photo-led slideouts, and only the last one asks users to try a paid membership.

Pepapp welcome screen with a smiling bird mascot saying "Hi, honey! I am Pepapp" and a field asking for the user's name

Signup flow

Pepapp’s sign-up and user segmentation is personalized and quick

Pepapp's mascot asks for a name and birthday, then account details, then what the user wants from the app, in a friendly four-screen signup.

Twitter Circle modal asking "Want to share with a smaller crowd?" with Get started and Maybe later buttons

Modal

Twitter’s new feature onboarding is perfect for mobile users

Twitter introduces Twitter Circle with a modal in the compose screen, then a bottom sheet explaining how the feature works in three short points.

Impulse slideout at the bottom of a game screen saying ads are skippable after 5 to 10 seconds, with four skip icons

Slideout

Impulse’s slideout modal teaches how to close ads

Impulse uses a slideout modal to warn users about ads before they see one, showing the skip buttons to look for and when they appear.

Impulse Great start! screen with a ticked calendar, a row of seven days with day 1 done and a Continue button

Full-screen steps

Impulse’s gamified first-day UX gets users to stick around

Impulse ends a new user's first day with a Great start! screen: a ticked calendar, a seven-day streak row and a short motivational line.

Impulse intro screen, Become a better you, with two cartoon characters in sunglasses and a Get started button

Full-screen steps · Signup flow

Impulse’s user segmentation is fun to fill in

Impulse, a brain-training app, follows three illustrated intro screens with three quick questions that segment new users by goal, focus and age.

Moodle app overlay with a hand and two arrows over a dimmed screen, reading Swipe left and right to navigate around

Tooltip

Moodle’s new feature onboarding is to the point

Moodle's mobile app explains its new navigation with three one-line tooltips and a full-screen swipe hint, each closed with a Got it button.

ProtonVPN welcome screen with an open box illustration, a line about getting the most out of the app, and Take a tour

Full-screen steps

Proton VPN’s Signup Modal onboards quickly

Proton VPN's mobile app welcomes new users with an optional three-screen tour and ends on a single Connect now button for their first connection.

Three Expensify sign-up screens: connect options, a Concierge work email prompt, and Track, Submit, Collect or Control

Signup flow

Expensify’s sign-up onboarding is unexpectedly fun for a financing app

Expensify’s mobile sign-up runs through Concierge, a chat-style assistant that asks a few illustrated questions to segment new users.

Three World of Wonders screens with small red dots on the profile icon and on the Profile, World Tour and Explore tabs

Hotspot

World of Wonders’ hotspots make the game easier to navigate

World of Wonders, a mobile game, marks menus and tabs worth checking with small red hotspots instead of tooltips or modals.

Product tour · Tooltip

Google Chat’s tour is the simplest you’ll ever see

Google Chat's product tour is three illustrated cards over a dimmed screen, followed by one contextual tooltip about Google Workspace tools.

Product tour · Banner

ClickUp’s new feature tour is short, contextual, and up for improving

ClickUp introduces Whiteboards, then in beta, with a short and skippable five-step tour and a banner asking users for feedback.

Canva mobile survey saying You've got your design, asking how confident you felt on a 1 to 5 scale, with a text box

Survey

Canva’s confidence survey asks one question at the right moment

Canva's mobile app congratulates users on a finished design, then asks how confident they felt on a 1 to 5 scale with an open follow-up question.

Canva mobile editor under a purple overlay tooltip titled Ungroup the elements, circling the Ungroup button

Tooltip

Canva’s overlay tooltip points out tools mid-project

Canva's mobile editor shows a large, translucent overlay tooltip that circles one tool, such as Ungroup or Effects, while a user is mid-design.

Modal

Asana’s feature modal looks fun and reads well

Asana introduces its Inbox with a feature modal that pairs three one-line functions with an animated preview, so users learn it at a glance.

Empty state

Asana’s empty states fill in for tooltips

Asana turns an empty Workflow tab into a setup prompt that asks how tasks will reach the project, instead of pointing at it with tooltips.

Checklist

Asana’s Onboarding checklist shows around with ease

Asana's Home page holds a five-step onboarding checklist widget that takes new users to key parts of the tool and ends with a small celebration.

Asana sign-up step greeting Zeynep by name and asking for her main goal, with two options about her team

Signup flow

Asana’s sign-up onboarding puts users right into the workflow

Asana's sign-up flow asks a few questions about you and your team, then has you build a first project and pick a view while a live preview fills in.

Around video meeting in Campfire Mode with two participant bubbles, empty seats and a Copy link prompt

Product tour

Around’s 45-second product experience is a quick show for first-comers

Meeting app Around offers a 45-second simulated meeting from its menu, so first-time guests learn the main shortcuts without a full onboarding flow.

Around demo call in Campfire Mode: the user's bubble next to a presenter on video, with a Copy link prompt below

Video

Around’s demo meeting onboards users with a video meeting experience

Around teaches new users its meeting shortcuts in a short demo call, where a team member on video shows each one and you try it yourself.

Product tour

Candu’s in-app guide uses gifs to full potential

Candu’s content studio opens a six-step in-app guide whose GIFs show each action, with a progress counter, a Skip link and a dimmed background.

Modal

Canva’s campaign modal is more inviting than ever

Canva's Pro trial modal pairs an animated demo of team editing with a skimmable list of Pro benefits and a single free-trial button.

Notion's Getting Started page with a checklist of basics, such as Click anywhere and just start typing

Checklist

Notion’s initial onboarding is a checklist you complete on the page

Notion onboards new users with a Getting Started page: a checklist of basics that users tick off by trying each one on the page itself.

ProductLed exit modal headed Before You Leave!, with cohort dates, a countdown timer and a Learn More button

Modal

ProductLed’s exit modal is extra encouraging with countdown

ProductLed shows leaving visitors an exit modal for its next course cohort, with a live countdown to the enrolment deadline and one button.

Spotify red banner, Good people deserve free Premium, with an Invite a friend button above a profile page

Banner

Spotify’s mobile campaign banner appears at the best time possible

Spotify shows a referral banner on the profile page, where users already think about friends, inviting them to give someone free Premium.

Modal

Integromat’s user onboarding slideshow does it all in one place

Integromat welcomes new users with a four-step modal slideshow that shows how to build a first automated scenario, from trigger to activation.

Miro slideout modal, Our board interface just got an update, with Watch tutorial and Visit help center buttons

Slideout

Miro’s slideout modal introduces a third way out

Miro announces its new board interface in a slideout modal that offers a short tour, a trip to the help centre or simply closing it.

Notion onboarding screen 1 of 4: Touch and hold to reorder any content, above a phone showing a Today page

Full-screen steps

Notion’s initial onboarding keeps it nice and short

Notion’s mobile onboarding is four screens of essential tips, each a sentence or two long with a demo on a phone mockup underneath.

Frase update modal with an embedded YouTube video about its new editor, three emoji reactions and a feedback field

Modal · Video

Frase’s update modal features a feedback option

Frase announces its updated editor in a modal with a YouTube video, emoji reactions and a feedback field, shown when users log in.

Modal · Product tour · Tooltip

Memsource’s contextual feature tour is precise and concise

Memsource introduces its Jobs page with a welcome modal, a short tooltip tour with dot progress and a closing modal that uses GIFs for batch operations.

Modal · Video · Empty state

Hopscotch’s video onboarding feels human

Hopscotch welcomes new users with a short captioned video from its founder in a modal, then an empty state that gets them to their first tour.

Tooltip · Modal

Slack’s customization modal is a fun little ride

Slack offers its preference settings through a small tooltip first, then an eight-step modal with two or three illustrated choices per step.

Life360 Safety tab dimmed around a tooltip on Trigger Help Alert, with a Got it button

Tooltip

Life360’s tips and tooltips are done right

Life360 follows sign-up with three dismissible tip cards and a spotlight tooltip that explains its Help Alert safety button.

Dark LinkedIn tooltip saying Show your pronouns on your profile, with an Add pronouns button and a close icon

Tooltip

LinkedIn’s tooltips care about your identity

LinkedIn introduces pronouns and name pronunciation with two one-line tooltips on the user's profile, each with a single button to add the detail.

Life360 screen saying "Now you can join or create your Circle" over a map with family photos, and a Continue button

Signup flow

Life360’s signup flow looks good and reads well

Life360's mobile signup flow sets up a family Circle one question per screen, with a line of reassurance or a tip under each step.

Tile Master 3D How To Play modal, step 1 of 6, showing tiles and bulbs being collected, with an I Know button

Modal

Tile Master 3D’s how-to-play modal is great for returning players

Tile Master 3D shows returning players a six-step How To Play modal with an illustration per rule and an I Know button to move on.

Pinterest slideout saying Thanks, your email preferences have been saved, with a red Done button over the dimmed feed

Slideout

Pinterest’s slideout modal is short and to the point

Pinterest's mobile app greets users by name in a slideout modal asking them to confirm their email, then confirms the change and points to Settings.

Two Dots screen Introducing Star Rank, explaining that levels and collectibles earn Stars, with a Count Stars button

Full-screen steps

Two Dots’ onboarding is the perfect game user flow

Puzzle game Two Dots introduces its Star Rank feature in four full-screen steps that count your stars, reveal your rank and hand out rewards.

Grammarly step asking I want help with, with topic chips such as Spelling and grammar, beside a suggestion example

Modal

Grammarly’s personalization modal is a lifesaver

Grammarly's personalisation step asks users what they want help with, next to an example of a suggestion, and lets them skip if they'd rather not say.

LinkedIn feed card titled We want to hear from you, with a five-point Disagree to Agree scale and a Submit button

Survey

LinkedIn’s case-specific survey helps make users feel cared for

LinkedIn places a one-question survey card in the feed, asking users on a five-point scale whether today's conversations feel respectful and welcoming.

Zara app Share Wishlist modal with a jumper doodle and a Fantastic! button, and the share icon spotlighted top right

Modal

Zara’s new feature modal is way too cute to ignore

Zara's app announces wishlist sharing with an illustrated modal on the Wishlist page, while a spotlight picks out the share button it describes.

Twitter full-screen page headed Show off your prized possessions, with a cube illustration and a Connect my wallet button

Slideout

Twitter’s new feature slideout is explanatory to the core

Twitter introduced NFT profile pictures in a slideout that explains what an NFT is first, then a full-screen page for connecting a crypto wallet.

iMovie editor on iPhone with yellow labels on each control, such as Add media, Tap to select a clip and Change theme and more

Tooltip · Hotspot

iMovie’s onboarding flow is unusual but clever

iMovie keeps a yellow question mark on screen that labels every control at once with short tooltips, some linking on to the user guide.

Genshin Impact tooltip reading Hold the character portrait to quickly configure the party, beside a glowing party list

Tooltip

Genshin Impact’s tooltip explains a new shortcut easily

Genshin Impact points out a new party shortcut with one tooltip and a glowing highlight around the party list, without pausing the game.

Modal

Notion’s update modal is an all-in-one experience

Notion's 2.15 update modal walks users through new database features in one window, with a live preview for each, a Next button and Skip all.

Discord slideout modal, Connect PlayStation Network, with a waving mascot, a Connect button and No thanks

Slideout

Discord’s slideout modal is concise (and cute)

Discord uses an in-app slideout modal with a mascot illustration and one playful line to invite users to connect PlayStation Network.

Twitter slideout, Record your Space, with a bird and microphone illustration, three points and Got it

Slideout

Twitter’s new feature onboarding is unapologetically long, still concise

Twitter introduces Spaces with two slideout modals of short points with icons, plus help icons on the screen where a Space is created.

Outlook modal titled Help us improve Outlook asking how you plan to use this account, with six tick-box options

Modal · Survey

Microsoft Outlook’s survey modal asks the right questions

Microsoft Outlook asks how users plan to use their account in an in-app survey modal, with six tick-box answers and the Outlook logo up top.

WordPress block editor welcome slideshow, step 1 of 4, explaining blocks over a dimmed page, with a Next link

Modal

WordPress’ feature update slideshow is short and contextual

WordPress explains its block editor in a four-step slideshow shown over the post being edited, with an illustration, progress dots and a close button.

Visme sign-up screen asking What do you want to use Visme for?, with Personal, Business, Non-profit and Education cards

Signup flow

Visme’s onboarding is simple and vivid

Visme opens sign-up by asking what users want it for, with four illustrated cards explained in one line each, to personalise their tips.

Product tour · Tooltip

Vieworks’ onboarding proves more steps work too

Vieworks runs a 14-step interactive product tour with one-line tooltips and a dimmed backdrop, plus shorter tours for tasks such as creating a seat.

Product tour

Vieworks’ onboarding flow makes use of interactive design

Vieworks onboards new users with an interactive walkthrough that highlights each step and waits for them to fill in real details, like a company name.

Userflow modal with a tooltip saying "Give it a name… Then click Create flow" and a yellow hotspot on that button

Tooltip · Hotspot

Userflow’s tooltip and hotspot combo shows the next click

Userflow guides users through creating their first flow with a tooltip that explains the step and a pulsing hotspot on the button to click next.

Userflow plan picker asking how many monthly active users your app has, with two answer buttons and a Chat with us link

Survey

Userflow’s plan picker survey is the type users like to answer

Userflow helps buyers pick a plan with a five-question survey of one-click answers, a skip link up front and a chat link for anything else.

Typeform modal, Take a moment to get comfortable, with a doodle and No thanks and Show me the highlights buttons

Modal · Product tour

Typeform’s product tour is super laid-back

Typeform opens its product tour with a relaxed modal that promises a quick look at the highlights and makes saying no just as easy.

Hotspot · Tooltip

Typeform’s hotspots let you go the direction you want

Typeform scatters small pulsing hotspots around its form editor, and each one opens a short tooltip with a Got it! button, in whatever order users choose.

Trello modal titled Find your work even faster, announcing navigation updates with a Show me button, over a board

Modal · Product tour · Tooltip

Trello’s new feature onboarding actually cares if you want the new features or not

Trello introduces its new navigation with a modal, a four-step tooltip tour, and a final choice to switch now or keep the old layout a little longer.

TimeSolv payments form dimmed for a guided tour, with the first field highlighted and a Previewing 1/8 bar

Product tour · Tooltip

TimeSolv’s tooltips take the complexity away

TimeSolv breaks a dense payments form into eight short tooltips that highlight one field at a time, with Previous and Next buttons on each.

TikTok Choose your interests screen with topic chips, Animals selected, and Skip and Next buttons

Signup flow

TikTok puts you in the loop right away

TikTok asks new users to pick interests, shows one swipe-up animation and starts playing videos, all before asking them to sign up.

Tellie dashboard with a Welcome to Tellie story open on a slide titled Promote your Releases, with a segmented progress bar

Full-screen steps

Tell.ie’s story-like use cases page tells a story you need to hear

Tellie presents its use cases as a "Welcome to Tellie" story, with full-screen slides and a segmented progress bar like an Instagram story.

SendGrid slideout at the bottom left of a dimmed dashboard, headed Ahoy! We've updated our Data Protection Addendum

Slideout

Sendgrid’s slideout modal gets the users to read

SendGrid announces an update to its Data Protection Addendum in a slideout modal at the bottom left, with bold dates, a dimmed page and a close button.

Hotspot · Tooltip

SendGrid’s new feature announcement hotspots are sure to get attention

SendGrid marks a new automation trigger with a hotspot in its sidebar, which opens a short tooltip with a link to try it.

RAM welcome modal, step 1 of 5, with a waving cartoon guide named Sam and a Let's go button

Checklist · Product tour

RAM’s mascot-led onboarding is personal and fun

RAM introduces its new App.RAM platform through Sam, a cartoon guide who greets users, leads a checklist of tours and calls each user by name.

Plandisc tooltip, step 4 of 8, saying "Give your Plandisc an exciting name" beside a highlighted title field

Product tour · Hotspot · Tooltip

Plandisc’s onboarding is all about good copy and interactivity

Plandisc guides users through eight-step interactive tours, offered from a hotspot beside a feature and written in quick, playful copy.

Pinterest Welcome to Pinterest screen asking you to pick 5 or more topics from a grid of photo tiles

Signup flow

Pinterest’s signup onboarding is short and to-the-point

Pinterest's mobile signup takes three steps (email, gender, five topics) with a progress bar, so your first feed is personalised from the start.

Pinterest screen, You’re using Pinterest on iOS 14+, explaining the tracking permission with two points and a Next button

Modal

Pinterest’s permission pop-up is human

Pinterest explains Apple’s tracking prompt in plain, playful words before it appears, so users know what Allow means before they choose.

Slideout

Notion’s in-app messages are subtle and personal

Notion stacks its update and maintenance messages in a corner, signs them "David from Notion" with a doodle, and shows Clear All only on hover.

Notion tooltip from David from Notion titled New in Notion: Backlinks, pointing at a page's backlinks count, step 1 of 2

Tooltip

Notion’s feature announcement tooltip proves long copy also works

Notion announces backlinks with a tooltip signed by a team member, pointing at the backlinks count and explaining the feature in two steps.

Netflix signup Step 1 of 3, Create a password to start your membership, with email and password fields and a Next button

Signup flow

Netflix’s signup onboarding is designed to be quick and personal

Netflix's signup takes three numbered steps (account, plan, payment), then asks users to pick three titles they like to personalise recommendations.

Medium editor with a tip panel at the bottom about pasting links to embed content, with arrows and a sample card

Inline hint

Medium’s informative slideshow makes editing easier

Medium’s editor shows a slideshow of tips along the bottom of the screen when users start writing, each with a visual example.

Lemlist question, How comfortable are you with creating your first campaign?, with three emoji answer cards

Signup flow · Checklist

Lemlist’s onboarding makes sure the user is comfortable and well-taught

Lemlist asks how comfortable users are, offers skippable integrations, then walks them through a test campaign tracked by a checklist.

Landbot mascot speech bubble offering a 5-day PRO trial and a first-bot tour, with No, thanks and Yes, show me! buttons

Product tour

Landbot’s sleek onboarding flow is fun with a mascot

Landbot's mascot offers new users an 11-step product tour that builds a first chatbot and ends with confetti and a "Tutorial completed!" message.

Indicata panel titled New Feature: Vehicle Equipment with a short video and a Take the tour button, beside a vehicle table

Hotspot · Video · Slideout

Indicata’s announcements are subtle but effective

Indicata announces a new feature through a hotspot that opens a 35-second video, and a new report through a modal at the side of the screen.

Ideta tooltip saying Click here to create new Bot, highlighting the Create a new bot button, step 2 of 6

Product tour · Tooltip

Ideta’s tooltip highlights include the help button

Ideta's six-step product tour highlights one element at a time on a dimmed screen and keeps its help widget lit, so help is one click away mid-tour.

HubSpot hosting setup at step 3 of 3, with a progress bar and four collapsible DNS steps, each with a checkbox

Checklist

HubSpot’s step by step setup makes setup easier

HubSpot's domain hosting setup is a three-stage wizard with a progress bar, collapsible numbered steps and a link to skip straight to DNS records.

Heap’s New: Playbooks tooltip beside a blue hotspot on the Dashboards menu, with the rest of the screen in shadow

Tooltip · Hotspot

Heap’s tooltips highlight elements with hotspots and vignette shadow

Heap announces Playbooks with a tooltip and hotspot on its Dashboards menu, using a vignette shadow to focus attention on them.

Grove modal titled Say hello to Performance Enablement! with an embedded video and a green Got it button

Modal · Video

Grove HR’s in-modal videos make it easier for video learners

Grove HR puts short videos inside its modals, from the first welcome screen to the announcement for a new Performance Enablement module.

Grammarly modal, Ready to write something brilliant?, with Start a quick tour and Skip the tour over a demo document

Modal · Hotspot · Tooltip

Grammarly’s initial onboarding is a holistic experience

Grammarly opens a skippable quick-tour modal, then teaches its editor in a demo document using hotspots and tooltips on real suggestions.

Product tour · Tooltip · Modal

Ghostwriter.ai’s interactive guides appear when needed

Ghostwriter.ai gives each of its tools a separate short guide, with a welcome modal, highlighted tooltips, progress bars and the odd GIF.

Framer editor showing a Getting Started in Framer card and a blue tutorial bar with a play button and Replay Step

Video

Framer’s video onboarding lets the users practice what they learn

Framer's six-part tutorial plays video lessons over a real project from a play button in a bottom bar; pausing hides the video so users can try the step.

Modal · Checklist · Product tour

Flourish’s onboarding can be triggered directly from the onboarding checklist

Flourish follows a four-step welcome modal with an onboarding checklist whose items launch interactive guides, each with its own progress bar.

Figma tooltip titled Crop more easily with ⌘ beside the image crop panel, with an illustration and a Got it button

Tooltip

Figma’s shortcut tooltip is complete with an image

Figma shows a tooltip beside its crop menu explaining that you can crop by holding the Command key, with an illustration and a Got it button.

Figma modal introducing a better copy and paste, with a Copy + Paste banner and an Explore playground button

Modal

Figma’s announcement modal is crystal clear

Figma announces a better copy and paste with a bright modal that names three new paste features in bold and links to a playground to try them.

Evernote mobile screen asking "Choose what your note is for" with Work, School and Home options and a green Continue button

Signup flow

EverNote’s signup onboarding keeps it simple and segmented

Evernote's signup onboarding segments new users with two three-option questions, starting with whether their notes are for work, school or home.

Evernote mobile empty state with a note illustration, the line It all begins with notes, and a green New button

Empty state

Evernote’s empty states onboard users without pressure

Evernote's mobile app turns an empty notebook into a prompt: an illustration, a one-line headline and a tip that points to the green New button.

BeerOrCoffee tour modal with a video and the line "learn in 1 minute how to reserve a space", over a map of São Paulo

Modal · Video · Product tour

BeerOrCoffee’s feature onboarding comes with a video

BeerOrCoffee opens its booking tour with a modal holding a one-minute video on how to reserve a workspace, then a Next button into the tour.

Calendly's Getting Started Guide panel with five steps, the second open with a Create New Event Type button

Checklist

Calendly’s onboarding checklist puts you on it right away

Calendly's Getting Started Guide is a five-step onboarding checklist with a progress bar, and each open step has its own action button.

Two Candy Crush tutorial screens: a mascot points at candies to swipe, with instruction panels and a pink Skip button

Product tour

Candy Crush’s onboarding is a total eye-candy

Candy Crush teaches its moves inside a real level, with a mascot pointing at the candies to swipe, an example box and a large Skip button.

Modal · Product tour · Tooltip

CitizenShipper’s onboarding is quick and painless

CitizenShipper keeps onboarding short: a welcome modal with a skip button, a seven-step tooltip tour and a resource centre for anyone who skipped it.

ClickUp survey bar along the bottom of the screen with a 0 to 10 scale, 9 selected, and a thank-you message

Survey

ClickUp’s promoter survey interacts with the users

ClickUp's NPS survey sits in a bar at the bottom of the screen and answers each score with its own follow-up message and an optional comment box.

ClickUp modal headed WAIT! offering $10 credit for watching a video, with a $10 bill image and a No thanks link

Modal

ClickUp’s promotional modal is right on the money

ClickUp offers a $10 plan credit to users who watch its onboarding videos, in a modal with a big WAIT! headline, a $10 bill and a No thanks link.

ClickUp tooltip titled This is where the magic happens: Create new columns, with a field menu preview and Got it button

Tooltip

ClickUp’s tooltip highlights features you can use

ClickUp uses a tooltip anchored to the + icon in a list view to show users they can add columns, with a preview of the menu and a Got it button.

Modal · Hotspot

CuePath’s welcome modal asks the right question

CuePath’s welcome modal asks visitors if they already have an account and sends them to log in or sign up, with a hotspot on the order button.

Duolingo Translate this sentence exercise with a tooltip under the Japanese word いち showing the meaning one

Tooltip

Duolingo’s in-lesson tooltip is one you cannot ignore

Duolingo’s early lessons underline new words and show their meaning in a tooltip when tapped, so learners get help exactly when they need it.

Evernote insert menu with a blue tooltip on the Task option reading Add tasks to your to-dos, with a Show me button

Tooltip

Evernote’s contextual onboarding uses videos to explain

Evernote's mobile app points a tooltip at the Task option in its insert menu, explains what tasks do and offers a Show me button.