Article · 6 min read
Onboarding UI - 7 examples and 4 quick tips for success
Onboarding UI is the set of interface patterns that introduce a product to new users: welcome screens, sign-up questions, tours, tooltips, checklists and designed empty states. Each fits one moment and has a natural size limit, such as three or four intro slides, one sentence per tooltip, or four to five checklist tasks.
By Ece Cakanel
In short
Galleries show what onboarding screens look like; this post maps each of nine onboarding UI patterns to the moment it belongs to and a size limit drawn from real screens. Seven examples (Metafy, Figma, Trello, Kahoot, BeerOrCoffee, Anchor and Calendly) show the patterns in use, followed by four tips for designing your own.
Onboarding UI galleries show you hundreds of screens, but not which screen belongs where. That's the decision that matters: a welcome carousel at the wrong moment is skipped, and a checklist with twelve tasks is ignored. Each onboarding pattern fits one moment and has a natural size, and the real examples below are consistent about it: three intro slides, one sentence per tooltip, four or five checklist tasks.
What is onboarding UI?
Onboarding UI is the interface design of a product's first-use experience: the screens, overlays and in-product messages that help a new user feel comfortable using it for the first time. Onboarding UX decides what users need to learn and in what order; onboarding UI decides how that looks and reads.
New users don't know your product yet, so the UI should present each detail as clearly as it can, both visually and verbally. Every design decision should start from the user: how they feel, how much technical knowledge they have, what similar products they've used, and what they came to do. In short, understanding users and serving their needs is the main objective of onboarding UI design.
Which UI pattern fits which onboarding moment?
Each onboarding pattern belongs to a moment in the user's first days, and most products need several of them. The size limits below come from the examples in this post and in our inspirations library:
| Pattern | What it does | When it appears | Size that works |
|---|---|---|---|
| Welcome modal | Says hello to new users | First login | One headline, one button, a way to skip |
| Sign-up screen | Helps them create an account | Before first use | Only the fields you need now |
| Nickel tour | A few quick screens introducing the product | Before or just after sign-up | Three or four slides with dots (Metafy: three) |
| Product walkthrough | Shows users around the product | First session | Enough steps to reach a first result, often five or fewer |
| Tooltips and coachmarks | Explain core features in place | When users reach the feature | One sentence, one button (Figma) |
| Checklist or progress bar | Shows what's left to do | First days | Four or five tasks (Anchor: four; Calendly: five) |
| Self-segmentation | Asks about the user to choose their path | At sign-up | One question, a few big options (Kahoot: four) |
| Blank slate | Helps users add their first data | First visit to an empty screen | An example or one clear action (Trello) |
| Inline hints | Messages embedded in the page itself | Any time | One line next to what it explains |
For the full set of patterns and when to choose each, see onboarding UX patterns. For mobile intro screens specifically, see app onboarding screens.
7 examples of great onboarding UI
These examples were added to this post in 2022. Products change, so each describes the design as it was at the time of the screenshot.
1. Metafy's nickel tour and sign-up screen
Metafy's mobile and desktop onboarding designs were strong on both usability and visuals. The mobile design shown above was published on Dribbble by Vishnu Prasad.
The mobile nickel tour opened on "Welcome to Metafy", one of three slides marked by dots, with Sign up and Login buttons always in view. The playful 3D illustrations matched the product's tone. After sign-up, the home screen offered a "New to Coaching?" card with a Show me button above a short list of pending onboarding tasks, so users could take the guide or go straight to the tasks.
The desktop site followed the same visual style, with a "Start your journey" card in the bottom-left corner for new visitors. Nothing blocked the page.
2. Figma's shortcut tooltips
Figma is one of the most used design tools for UI and UX designers. Its tooltips showed shortcuts for actions the user had just taken, such as cropping: "You can now skip this menu and crop any image any time by holding the ⌘ key while you resize."
The image makes the tooltip more attractive and shows the shortcut instead of describing it. The close icon and the Got it button sat side by side without distracting from the message. More on the pattern in what tooltips are and how to set one up.
3. Trello's blank slate
Empty dashboards are boring and disorienting for first-time visitors. Trello avoided one by giving a new workspace a ready-made board, a 1-on-1 Meeting Agenda, instead of an empty screen.
The board was full of prompts to get going: a "How to use this board" card, example topics in each list, and colour-coded labels that explained themselves. Instead of a plain background, an illustration filled the space. For a similar approach, see Asana's empty states.
4. Kahoot's self-segmentation screen
Kahoot's mobile app asked one question during sign-up, "Choose your account type", with four large buttons: Teacher, Student, Professional and Personal. The answer set up a persona-based onboarding flow, so later tasks and forms matched why the user came.
The bright colours and illustration kept the step light, and a progress bar at the top showed how far through sign-up the user was. See more of Kahoot's sign-up in our library.
5. BeerOrCoffee's tour video
BeerOrCoffee, a coworking booking service, put a short video with a presenter inside a step of its product tour. The headline promised "Learn in 1 minute how to book a space!" (in Portuguese) and asked users to watch, then click Next.
Seeing a face on screen makes a new product feel familiar. The tour was interactive too: each step asked users to click the orange button, the brand's main colour, to continue. More in our library entry.
6. Anchor's progress bar
Instead of a checklist, Anchor, Spotify's podcast creation product (since renamed), welcomed users with "Here's what happens next" and four steps under a four-part progress bar: make your first episode, set up your podcast, set up monetisation (marked optional) and get listeners.
The current step's button was solid purple ("Let's do it") and the next step's was outlined ("Go to podcast setup"), so users could tell the task at hand from the one coming up. Each step had one or two sentences of copy, including a tip for nervous beginners: make a short trailer first.
It's a plain onboarding UI with no images, and it works.
7. Calendly's onboarding checklist
Simple, quick tasks give new users a good first taste of a product. Calendly's Getting Started Guide listed five: connect your calendar, customise an event type, check your availability, share your link and schedule a meeting.
The first task was already ticked when the guide opened, so users started with progress, and only the current task was expanded, with one button ("Create New Event Type") and a link to a help guide. The dark panel contrasted with the page, and green ticks signalled what was done. For more on the pattern, see user onboarding checklists.
4 tips for creating a great user onboarding UI
These four tips apply whichever patterns you choose.
1. Know your users
Onboarding works both ways: you learn about users while they explore your product. Ask one question early, as Kahoot did, and use the answer to personalise what comes next. A personalised path saves users time and helps more of them adopt the product.
2. Make it interactive
Give users the chance to learn by doing. Product walkthroughs that ask users to click the real button, and tutorial screens that let them practise, teach more than slides they can only watch, and users come out of them confident with the features.
3. Cheer them up
Don't be afraid to seem playful. Colourful illustrations, a mascot or an animated gif in a modal or tooltip take the edge off a learning task, as Kahoot's and Trello's designs show. Users prefer them to dry, overwhelming onboarding.
4. Tell them how long it will take
Nobody wants to read pages of instructions, so keep each element short and tell users how long the whole thing is. A progress bar, a step count ("1 of 3") or a time ("Learn in 1 minute") sets the expectation. Anchor's four-part bar and Calendly's five numbered steps do exactly this.
Designing onboarding interfaces isn't easy, but with research and inspiration you can make screens that help new users adopt features and stay. Keep the goal in sight: users who reach value quickly.
About the author
Ece CakanelEce is a creative content writer and enjoys writing and researching about UX, design, and other topics surrounding onboarding.
