Every Onboarding UI Design Pattern, Categorized and Explained!

I have a fig Jam table here with the 14 main types of onboarding design patterns and this is from analyzing over 200 onboarding flows from the world's best apps and I'm going to show you what they

are and how you can use them to enhance your products user experience so here we are inside a fig jam and here's our table and you'll see that I have all of the patterns listed here on the left and then a definition of what it is followed

by the best use case where this is appropriate Pros cons the UI elements that you need and real working examples now if you want a copy of this table for

yourself there is a link to get that in the description below I also have a notion table here with all of these onboarding patterns listed and I've also included that in the download in the

description so that you can add this to your notion workspace and be able to sort and filter and I have these also tagged with app type so if you're let's say working on a SAS app you can come up

here search SAS and you'll see that I've tagged the one that are most commonly used in those types of apps and I also have a gallery view here so you can see everything at a glance and all of the

examples that I've added so first up we have first look now this is one that you've probably seen a lot and this is when a user first signs up or first logs

into your app and it usually takes the form of a modal that has some slides in it or maybe a highlight reel video so let's take a look at some examples here

we have an intercom Carousel and this is the design pattern that you'll most likely see and the UI elements in this component so you might have a title

you'll definitely have a way to close the modal and you'll notice that it sits on top of the application where the application is uh grayed out in the background so that this is in focus and

you'll see that there are a number of slides sometimes there'll be dots there'll be a progress bar something to show how many slides there are and maybe a next button and this one has an

embedded video in it as well so you can combine them but this is an example of your first look on boarding pattern the use cases you're going to see this a lot

in are productivity and collaboration apps think slack and notion creativity tools like Adobe and canva and even complex SAS um like HubSpot and air

table uh especially with video here this is going to help your users get an high level overview of the work flow and the work space so it's really good when you

have products like that now you may also see it in this storyboard style format like matter has here and this is just a visual walkthrough telling you a little

bit about the problem the struggle the goal or whatever story that you want to communicate with your users and it even embeds this little self- selection survey which we'll talk more about in

another pattern and then amplitude is another example here with an embedded video so that is our first look on boarding pattern next we have product

tour now this one is a step-by-step guide that points out the core features of the product and it usually involves overlays and popups over the interface that guide the new user around the

interface in like a set order or a sequence so we see one here from intercom and let's take a closer look at these so in this example you can see

that when you arrive into the interface or the workspace there are going to be certain parts certain components of this workspace that are highlighted and it's

going to call out what you can do in that part or what you can find or what this feature is about and sometimes that is just one tool tip or sometimes it's a carousel like we have here now this is

really great for analytics and data heavy platforms like think of Google analytics and amplitude for example really feature Rich project management tools like a SAA or clickup and SAS

interfaces like interc common Salesforce it's just really great if you have like a lot of features and it can be very confusing if a user were to just jump in there cold turkey and so this really

provides a guided first experience and kind of structured help number three is the walkth through beacons now this one is similar to the one that we saw before

but what you'll notice are the actual glowing indicators in the interface so the user isn't initially pushed through it but they have the option to click on

it because this Beacon is drawing their attention so I'll give you a live example of that here in simple website builder there's this Beacon and it's not

going to highlight that component or that section and force me to check it out until I click it so I can sort of ignore it if I want to but when I do click it then it highlights that it

brings up this tool tip and it takes me through that tour it launches me into that and I click next it takes me to the next item next the next item so on and so forth

and if I click off of this the beacon is somewhere else where I left off so that I can kind of explore that when I'm ready so the UI elements here you're going to see that small pulsating dot

you'll see a popover with a tool tip and a brief message and this often has like just that subtle animation that kind of catches your eye without feeling too in your face and so you'll see this a lot

in website building tools like simple or webflow design and editing apps like figma and canva and any apps where you kind of need to be paying attention to a

certain thing like in Shopify or maybe Squarespace where you want to introduce some new features um I like this one because it really does provide gentle nudges in the right places without like

making the app feel locked down or that you have to go through this walkth through before you can continue exploring number four empty state so this is when the user sees an

illustration or some instruction where there is no content where they haven't entered any content or data in yet tally is an example here so when you're creating a form if you don't have any

forms yet there's a little illustration there are some instructions and there's a call to action button here of what you can do and that will launch you into your first task of creating a form

you'll see this a lot in productivity apps like Trello and notion or task and project management apps like todoist and Monday and anything that you know relies

on user generated content like you might have Pinterest so when you need to show someone how to create their first piece of content this is a great way to

initiate that interaction next personalization now this is a quick way to gather user preferences and choices so that the product experience can adapt to them so we're personalizing it we're

tailoring it this is things like picking your favorite topics or categories or interests you see this here in Reddit after you've created your account you see these interest chips that you can

select there's you know different categories and then you click on the ones you want and then you can even set up your avatar so there's a little gamification aspect here too and then

this is really going to set you up for a more tailored experience when you get into the app so the UI components you might see here are you know it could be a short form with checkboxes or a drop

down to select items it could be selection chips like we have here in Reddit you can have a progress bar there to show the user how many more pages there are of options um maybe customization options like sliders or

toggles or picking themes or categories or you know Avatar creation you'll see this a lot in social media apps um Reddit Tik Tok news and media

aggregators or streaming platforms and this is very helpful when you want to show users only what matters to them when they get into the app next we have checklists this is a simple list of

tasks that the user needs to complete to to get fully set up so each item is typically going to be a task and an action that they need to take and they can see the progress as they go an

example here would be front there is a setup guide to help you set up the basics so first they want you to set up a shared inbox then uh understand your

inboxes in your channels and as you go through these and complete these items they're going to be checked off let you know that they're completed and you can see your progress so you're going to see

this in account setup heavy apps like accounting software like QuickBooks or productivity apps like slack anything where there's a lot of setup involved like making a Shopify store or a CRM

integration so it really presents these steps in an actionable way and it's concrete and trackable and it kind of gives the user that feeling of progress as they complete them seven is action

oriented now this is similar to the checklist but this pattern prompts users to do a specific key action instead of just reading about a feature or checking

something on off it really is about this Hands-On engagement from the start so an example of that here is co-pilot and you're going to see that it's asking you here to create a test client so it's

almost like a little challenge or a test because in order for you to complete this you have to go through the entire process of creating a test client and when you've successfully done that then

it will be checked off and it will give you a success message to tell you if you've done it right or help you along the way to complete this challenge so this is kind of like a nested workflow

creation process it's a little bit more detailed and nuanced than just a simple checklist and you're going to see these a lot in things like Google Docs Dropbox

paper Loom grammarly um when there's like a primary action that really shows off why the product is worthwhile because you know that that's going to help them get to that result faster so

some of the UI components that you're going to see here are at bold CTA a very clear Direct language of do this thing send your first message now tiny nudges

or labels inside the interface as the user is trying to complete that to get them to finish that action oriented task and then you know that celebratory moment of completion now you may have

noticed as I have been pulling up these examples and going through them that I have a very wide selection of these onboarding types and that's because I used mobin to do my research I Rave

about them because I use them so much day today as a product designer I don't have to install every single app and create an account myself and try them because mobin has done that for me they

categorize and catalog all of this onboarding stuff so that I can go through them and search and I can search by UI component I can search by the flow the screen type and I can search mobile

or web now this is incredible because it's curating all of these design patterns from the best apps in the world and they're also often videos and prototypes that you can click through as

well and not only that but I often bring these into figma with their figma plug-in so that I can kind of work with them and study them a little more closely and then incorporate them into

my own designs I really encourage you to click on the link in the description so that you can try mobin out because you might want to look up the flows of other

design patterns and you can do that so easily so please check it out and let me know what you think number eight is goal setting this is a pattern where you help

users Define a goal like a weekly Target and then track their progress and encourage them to stick with it so you probably have seen this in Du lingo or similar learning type apps and let's

take a look at that so right here you can see that it's quite gamified you are going to set up your learning goal here you're going to commit to a streak and you're going to see that progress as you

complete these tasks so there are a number of ways to do this but you usually it's going to be you're selecting something either from a dropdown or you're going through this process and it's going to ask you

questions maybe it's like a survey style and you're going to select something and then it's going to customize it as you go and that's what's happening here in

Du lingo and then you're going to just continue this process step by step and so again you're going to see this a lot in learning and education platforms Fitness and Wellness apps habit tracking

personal development anything like that anything where the product relies on repeated usage um and also in any scenario where you can clearly measure

success over time number nine is coach marks now this is a little bit like beacons but these are small pointers or highlights around different parts of the

UI and each of those offer a short description or explanation so you want to kind of think of these as like digital sticky notes on buttons or sections and they're sort of there when

and if the user needs it so it's not necessarily a guided walkthrough it's not necessarily a beacon that's always calling for your attention but it's like if I need to understand this feature

it's there for me canva does a great job of this you'll see it here when you go to text maybe if this is your first time ever clicking this text button then you're going to see this little uh tool

tip with a tour and maybe some guidance on how to use text and this one is even more guided because it's going to have you add the text and then complete that

it wants to make sure that you can and have done it before it clears that tool tip for you this is presenting in full screen maybe if you've never clicked that button before this is your first

time exploring that feature there's going to be a tool tip there for you again this is great for Creative software design tools canva Photoshop apps that have new features that are

introduced regularly one of those cases where I talked about in my other video in onboarding best practices where they don't need to be there just for the

first login it can be presented the first time a user explores a feature this is like nurturing onboarding over time number 10 is demo content this is

when you this is when you give a sample set of data or a sample demo project that people can play with to get a sense of how the interface or the workspace

Works without having to upload or create something from scratch uh a lot of times this is like data analytics tools editing tools like video editing so

frame is an example of this when you land into your account there's a demo project so when you click on it you're able to see how things are set up mess around with it without feeling like

you're going to destroy anything it's just really helpful especially for visual Learners who want to see an example number 11 is the simulation now this is an interactive or

recorded demonstration that shows the product in action under realistic condition I it's kind of like a mock version intercom does this when you're setting up a chatbot and you want to see

how it works it prompts you to give the messenger a try in this demo so you can chat with it with you know your Bot and it's no one else is going to see it but you and you can see how it works and if

it responds the way that you want to so that's what we mean by a simulation and the UI elements here recreate this thing that the user is setting up as close to

what their users are going to see as possible so you want to make it realistic but you also want to give guidance so here you know you you can tell that you're inside of a tutorial mode and you know this is like your

testing or your playground so we see this a lot in Customer Support tools like intercom and Zen desk collaborative software like zoom and slack and SAS platforms like Salesforce so if your

product is quite complex and the customer is having to further customize it for their end user then these real scenario showcases can benefit that rather than just static walkthroughs or

tool tips or text I love nerding out about this stuff inside the course I teach with my students because they're all in there designing onboarding flows like this for the real MVP products that

they're creating and building their case studies on for their portfolio so if you're interested in doing something like that with me with my oneone mentorship inside of our amazing mindful

design Community then check out the link to my course in the description I'd love to have you as a student so please do check it out number 12 is self segmentation this is pretty common and

it's when it asks the user to pick a path or a user type or to identify in some way that best describes them so notion does this um you know it might be something like I'm a teacher or I'm a

student so that the onboarding flow can be further tailored so looking at this in notion here's a perfect example the UI elements here you'll often see are just you know a screen it could be a

drop down it could be these lovely visual cards here and then you choose one of them that you identify with and as you continue then your workspace is

loaded up with demo content here a simulation uh beacons a walkthr so you can combine these now in a way that

guides that particular user type through the process so maybe you'll load up a template that is for personal use or for students so this keeps the rest of the

workspace very tailored to them again you'll see this in a lot of multi-purpose productivity Tools in Enterprise Tools in educational software business apps that serve various groups

like HubSpot or MailChimp so if your product serves multiple users or multiple distinct needs start by you know only feeding them relevant features

number 13 is contexual tool tips popup tips that appear exactly when users hover or click on something that might need more explanation uh they show up at the moment of need rather than covering

the screen this is very similar to Coach marks but this might only happen when the user is in a specific workflow so for example here maybe you've set up

some sort of a group team collaboration and it may not show these quick actions to you if you're just doing a solo project so maybe you don't

need to add a view for other collaborators but if you do this maybe quick action panel will appear with buttons actual actions inside the interface are both presented

in a tailored way and also include tool tips so this is that just in time rule at the right place at the right time that I talked about in my onboarding practices video in part one so those UI

components you're going to see are like small boxes with a sentence or two like an arrow or a pointer it might be inside an embedded navigation uh that isn't always present for everyone this is

really great for really complex tools data visualization dashboards SAS applications that have like a lot of hidden or secondary features um think you know Trello and air table you know

they kind of provide that just in time bite-size info number 14 is adjust in time modal now this is something that might appear uh exactly when it's

relevant again these are all getting quite similar and a little bit granular here in terms of the difference but this is really relevant if someone is doing

something for the first time and you need a bigger deeper explanation so it's a little bit more than a tool tip so maybe if I'm clicking on save an image for the first time let's say there are a

couple of steps maybe I want to compress that image and then choose a specific export type and so there might be a short setup prompt here Meo does this canva does this too this is an example

in Miro so when you go to save an image it's going to ask you do you want to save a highres image export a frame like how do you want to do it and then it's going to coach you through that or give you the options so it's just letting you

know hey there are all of these different ways to export this and so you can explore that and number 15 is a little bonus because this can be and is often combined with a lot of these

different onboarding patterns and this is just information gathering this is when there is a lot of upfront front loaded info collection such as in a

finance app usually because they need need to input enough information for this user to be able to give you what you need so let's take acorns for example acorns requires that they

understand whether you're an investor or not you need to set up security questions some of these are legal requirements the other thing is that you need to set up a bank account so

anything that has these third-party connections where you have to sync things or link things this is going to be that thing where they need a lot of upfront info from you you otherwise the app is just not going to have anything

to provide you and so these are going to be more extensive account setup type onboarding flows and you might find that this happens right before um your initial introduction to the product it

might be a part of it it might be really long it might be really short so that's why this one's kind of a bonus you'll see these in you know accounting Finance

HR maybe even e-commerce personalization like Etsy uh recommendation engines anything where lots of preferences or setup is required these are really the

main ones that work really well and are very effective at an engaging users now there is so much more that I covered in part one of this video of onboarding practices a lot of these can be combined

depending on your users behaviors or their preferences and the real challenge is knowing how and when to use these and for that you really need to understand

the golden rule of user onboarding and the three main elements that make for a successful user experience and if you want to learn all about that then watch

this video next [Music]