UX of User Onboarding - Build better onboarding with Journey Mapping | Muhammad Ahsan Pervaiz | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

UX of User Onboarding - Build better onboarding with Journey Mapping

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Intro to Onboarding Users UX Class

      1:36

    • 2.

      What is Onboarding Process?

      11:19

    • 3.

      Problems with Front Loading Instructions in Onboarding UX

      11:08

    • 4.

      Align your team to New User's Mindset

      7:57

    • 5.

      Remvoing four common road blocks for smooth onboarding

      5:39

    • 6.

      Define core use and end state in Onboarding Journey Map

      6:27

    • 7.

      Entry Situation Core Routines and onboarding Journey Map

      7:21

    • 8.

      Let scope actions in Onboarding Process

      3:39

    • 9.

      Let's Prioritizing key actions inside Onboarding Process

      5:13

    • 10.

      Project - Share your worst User Onboarding Experience

      1:09

    • 11.

      Project - Define Core Use of any App - Onboarding UX Project

      1:08

    • 12.

      Project - Define Entry Situation for your App

      1:10

    • 13.

      Project Finale - Define Core Routines of your App

      1:00

    • 14.

      Project - Core Routine to Entry Situation

      1:08

    • 15.

      Integrating Guidance inside actions

      3:31

    • 16.

      Lets talk about Prompts inside Onboarding Actions

      6:45

    • 17.

      Work inside Onboarding Action

      10:02

    • 18.

      Onboarding Process Example Explained

      3:30

    • 19.

      Follow up in onboarding actions for better ux

      5:40

    • 20.

      Reinforcing guidance for better user onboarding

      3:57

    • 21.

      Additive Guidance Patterns for user onboarding

      13:55

    • 22.

      UX Design Patterns for Onboardin User Experience

      12:24

    • 23.

      Setup Wizards for Onboarding User Experience

      2:37

    • 24.

      UX Design Patterns Affordances Empty States for better user Onboarding

      10:02

    • 25.

      More on Additive Guidance Patterns

      12:03

    • 26.

      Let's work on Scaling Guidance

      4:55

    • 27.

      Thanks You and Whats Next

      0:53

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

57

Students

--

Project

About This Class

Onboarding is the first thing Users Experience inside your product. The first impression they love or hate will affect their engagement levels and the decision of whether they will purchase or leave your product right away.

Why do we need the best onboarding experience because

  1. 80% of the customers delete an App because they don't know how to use
  2. 86% of users will keep on buying if they get welcoming guidance from the App
  3. 63% of user's purchasing decisions stand on better Onboarding User Experience

So, if you are thinking of upgrading the Onboarding User experience of your app or want to learn Onboarding Journey Mapping, then this is the course for you.

 You will learn all the principles and guidelines for better onboarding user experience

 Why front-loading onboarding fails?

  • How to Integrate Guidance into your product?
  • Onboarding Journey Map - Assignment included
  • Entry Situations for New User Onboarding
  • How to define the core use of your app?
  • How to use Contextual Onboarding and how Twitter uses it?
  • Additive Guidance Patterns with Examples to improve UX of Onboarding
  • Case studies of 2 real-world App examples for Onboarding
  • PDF Notes Included (Downloadable)

So, if you want to get more user engagement, retention, and satisfaction with your App (simple better UX) then join my class to dive deep into the science of Onboarding New Users and creating Interactive Guidance for Users

Meet Your Teacher

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Teacher

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro to Onboarding Users UX Class: Hello and welcome to my class about building better user experience for onboarding your users. So this course is going to just focus on the onboarding process. Knowing the last few months, how many times have you skipped the first three screens of any app you try to use? I did it many times. So the research says that 90% or 80% of the users, if you are using a tutorial in the start or showing three or four skip able screens, then most chances are that users aren't going to skip that. So if you want to build a better user experience, or you want to avoid that. And you want your users to become a core user of your app, then you should watch this course. In this class, we are going to discuss a lot of different techniques on how we are going to build a directive guidance and how we are going to integrate guidance inside your app. There are many different ways, many different patterns we are going to discuss. We are going to build a core usage routines and a lot of things we're going to learn. So if you are looking to build a better user experience for on-boarding users and you are facing low retention rates, low engagement rates from your users and the users that are not returning back to your app, then you should wash this course. I hope that we will learn together a lot and we will keep on building patterns, user experience for digital products. Now let's get started and I will meet you inside this course. Bye bye. 2. What is Onboarding Process?: In this video, we are going to learn first more about what is onboarding. Now in your lifetime. And whenever you are using different products, you have seen a lot of time. A screen where it says, let's get started or tap here to begin your journey or something like that. So most of the time when you launch a product, most of the users, they are going to skip. They are not going to watch that video. They are not going to tab over there. They are trying to get to the product. They really want to use that product rather than seeing your tutorial or your three different screens, 1233 features, this is really, really filling in these days. So let's get started and see what is an onboarding. Onboarding is first concept you have to make sure is that it is not a single flow or single interaction. It is a lot activities and steps within a process. So it is a process rather than a single step. So what you want to do or what you want to achieve is that you want to have your user, new user, become a user of your product. So you can see over here, we have, we're OS, earlier version, and that was from Google. And when they launched this, they had a simple DHAP to watch or tap to configure kind of this on-boarding tutorial. And most of the users, I think 70 to 80 per cent of users, they actually skipped it. So this is why I think that most of the time onboarding, user onboarding is very important if you are launching or creating a user experience of your product. Now let's talk about the second misconception which is onboarding. How we have to think about the onboarding. So you can see onboarding is not just a front-loading instructions, it not just two or three instructions that how to use this product. But it is an user guidance that is going to be inside the context. Context is always the king. I always say that in all my user experience design courses, that context is going to shape the user experience. So does this in user onboarding. So if you are on-boarding new user, you have to see the contexts. So if they are coming from different background, or maybe they are looking for something else. So all the users, two or three different users, they are going to be arriving at your product from different sources. So the contexts would be different. You can see we have two diagrams over here. One is onboarding first-time use. If you think that this is just going to be the first-time use, this is not great because it is a misconception. First-time use is not, this is not what onboarding is. And then we're going to move it to the established user usage. And now you can see onboarding is actually a continuous step off guiding the user first-time use than we have onboarding. So it is just, it is not just one step ladder. It is a multiple step ladder until your user is a core users of your product. Now let's talk about why onboarding is very important. There are three things, three facets to this whole on-boarding process, which is building trust of your new customers. How they are going to commit to your product, what are going to be the expectations for them? And engagement rate is over there, how? Well they are going to engage with your product. And the first thing is that you have to retain them. Retention rate is one biggest success factors in user experience design. Retention means that users are going to stay with your product for like five years, ten years, or maybe the whole life. And how long they are going to stay daily or weekly, or how long they are going to use that this is also retention rate. So let's get to the slide and see some of the things. Building trust and expectations. You have to set your expectations in the start that this is what we're going to offer. This is how you will achieve your goals. Then we have familiar, familiarizing them with the product offering. So you have to show them that this is this much you are going to use free and this much you are going to pay for. Then we also have to set up product to the user's needs. So maybe you have an onboarding process. You are setting up your product, your watch, or your clock or anything you are setting up in a wizard to the best of your users needs. This is really important. Next is leading them to making a commitment. Okay, So maybe using light, five days or seven days or seven months of free app, you might want to purchase it and you might want to commit to the app. Like recently, I have purchased apple space for safety to free space to 50 GB. I just purchase it. It was a step up after like two to three years of using Apple or maybe more than that. Okay, So next is, okay. So the last goal, which we want to ultimately achieve is that we want our users to keep on progressing till the time they are going to achieve a more stable state or more steady state, that is our coal use state. We will discuss it in further lessons. So this is really important. Okay, Now let's discuss some of the stacks of why onboarding is very important. Now 63% of customers considered the onboarding period. 63 per cent of people they are going to decide while they are onboarding that should we purchase this app or not? So this is really, really big figure. 63% users are going to depend, are going to purchase from your product if the onboarding process. Okay, so the next step, so these stats are, these stats are for the people. If you are in user experience design or working in any firm or agency, then you have to convince them that we need better user on-boarding, a unique we need to invest on that. Second point is very important. Increasing customer retention by five per cent has the potential to increase profit by 25 to 95 per cent. So you can see just a tiny bit of retention of your customers. So if you are going to retain your new customers, they are going to be keep using your app because of good onboarding or better on-boarding. You can get a revenue jump off 25 to 95 per cent, which is a very big jump. You can convince your managers or product managers that this is why we need better on-boarding. 80 per cent of, actually 80 per cent of users, they deleted an app because they were not able to use it. So basic usage or just to know that how to use that app is a part of onboarding process, which I think 80% of apps are failing at that. So you can see this is the reason 86% of customers say that they would stay more loyal. So this is actually customers commitment and loyalty to a business if they have access to educational content and if you are going to keep guiding your users. So guidance or user onboarding is a continuous process. You cannot heart at somewhere, you cannot stop it. You cannot say that this is it. We have done everything and now we don't need to educate our users again and again. That is all. Let's move on. And also we have to learn what are the workarounds they are trying to develop. So maybe users, I have seen my kids. So whenever they play games on their mobile. So what they do is my little kid, he's like four years old. So whenever some ad actually pop up during his playtime. So he's playing the game. And I didn't know I had to wait for the ad to skip. But what he did is it was really amazing. So he had a workaround to use that product or that game during advertisement time. So he actually close the game or minimize the game. Then he goes to the game icon again, play the game again, and the ad and has been gone. So that was a really amazing work around for me because I thought that this is a big step that if your user is having some problem and what the workarounds they are trying to develop. So one more thing is that which products they actually used before coming to your product? Did they try anything else before? So these are the things that are really, really important when you are on-boarding a user. And all these things are going to answer how you are going to develop or build your user experience for onboarding your product. So that is all. In this lesson. I hope you have learned something new and you have made the concept of that. Onboarding is not a single set of instructions or a single instance in your product. It is a continuous process where user is going to learn and we're going to guide the user to become a core or established user. I will see you soon in another lesson or the next lesson till then, take care. Bye bye. 3. Problems with Front Loading Instructions in Onboarding UX: In this video, let's talk about what are the problems with front loading instructions. So frontloading instructions is that you try to install an app. Once you load the app, it is going to start with instructions. Do this, do this, set up your account and then you are going to able to use that app. Certain. And I would say a lot of problems with this blocking techniques. So you are actually blocking your user behind a wall. So we're going to see what are the problems with that technique. So let's get started. So here you can see we have the first problem which is predicting future. You are trying to predict the future that user is going to watch these slides, this video, which is not true. Second is that when the user sees Dough, CDOS, sees those instructions or set of instructions, maybe seven steps or whatever, he's going to be overwhelmed or she is going to be overwhelmed, that maybe this product is difficult to use. So this is the thing that is going to come to their mind. Third is that it is hard to remember all those instructions. I have already told that user's going to perceive it, that it is more difficult to use. Then the main thing is, again, out of context, users coming from a background. We don't know whether he's in a hurry. He wants to book a cab or something like that and you are trying to sign up with him for like showing him or her a very long form. So this is not a good so you haven't tried your product before. You haven't tried that product. And that product is asking for your personal details. This is a bit alarming situation for a user perspective. Next is focused on awareness, then follow through. So you are just making your user aware of the product. You are telling them that this is how this product works, so this is how it operates. So these are its features. But you are not following through. You are not seeing what the user wants or what they are trying to ask you and then you follow through that. So the last is difficult to maintain and scale. It is really, really difficult that you are making a user onboarding video. Whenever your product changes, you have to change the video. So if you have new features added, you have to make more slides, make more images. It is difficult to maintain and scale. So if you have like added ten new features in your product, how you are going to onboard yours user. Then I'm going to make again ten times the new video again and again. So these are the problems with front-loading instruction set or front-loading technique that is widely used in user onboarding. Now, I'm going to quote here, very famous social scientists, Herbert a Simon. What he said is a wealth of information creates a poverty of attention. If you have a lot of information, you are overwhelming new user with like ten or salmon or five different steps or different screens of instructions. It is going to have problem with their attention. So users have limited span of attention. You have to use that and you have to guide them rather than showing upfront ten different steps to follow through. Now here is an interesting usability study than done by Nielsen Norman Group. In 2020. They did a test on different users about how difficult that the product is to use. So they found out that the users that we're getting the tutorial upfront, they thought that the product is difficult to use. So if you are showing your users on your onboarding process upfront tutorial or videos or steps to follow. They are going to think that this is more difficult and they are going to skip that tutorial. Most of the time. I think 18, 90 per cent users, they actually press Escape or close that video. Now the next problem is that it's associated with this frontal instructional load, loading kind of user on-boarding, which is unaided full immersion. So you are trying to throw your user into a full immersion of the product without an aid. So do not launch your new commerce or new, new users into full product experience without any aid or without any guidance. So what is going to happen, e.g. you might have seen some games that don't provide any tutorial. You have to figure out everything on your own. Maybe some game like I have played game like Lara Croft in the beginning, like 20 or 15 or 20 years ago. It was so difficult for us to sometimes figure out few things are few actions. Now, most of the games these days they have a tutorial or a tutorial. Plan kind of gameplay in the start. So they actually teach you with an guide you during the first play of your game. So this is how you actually immerse your user rather than throwing them without any guidance. Second is that if you are going to do unaided full immersion or without any support that figure out on your own self. Then you are going to exclude your audience, a lot of the audience. They are going to be very beginners at the beginner level, or maybe they are newbies. They haven't used that kind of games or product. So you are actually limiting your audience. So only expert people, they are going to use your product or buy your product. All others are going to skip it or they're not going to buy your product. So these are the problems. So don't launch your user without any aid. So maybe if you think that unaided instructions or the frontal instructions doesn't work. So let's remove those instructions and throw your user without any aid into the product and it is going to be disastrous to. Now here is a case study of Plants versus Zombies two, which is my favorite game I played all the day, every day, almost every day. Now, George fan, he actually used this strategy in Plants versus Zombies to where he actually shows the first-level to familiarize the players with the whole interface and how this whole gameplay actually works before taking them to the complex levels. So now user on-boarding, if someone says that we didn't recognize that we were introduced to our gameplay level or it was a tutorial than it is a compliment for fan. You can see he says, For Fan it's a complement. Complement. If a player sees that they didn't notice the game had a tutorial. So you can see the figure below, which is passive instructions, unsupported immersion. So we have to be in the middle. We have to develop a guided interaction rather than unsupported immersion that is on one side of the scale. The other side is passive instruction, that you just show some instructions and things and predict that users are going to follow those, which is not true. Most of the time, users are going to skip that. So guided interaction, which is in the middle of both these concepts, is going to work, or the best boy whose or onboarding. Now, in this lesson, we have studied three different techniques of user on-boarding, which are, which ones are failing, which ones are going to be the best? Guided interaction and unsupported immersion. Then we have passive instructions. Most of the products I have used, they have passive instructions. So let me show you actually one example. I just I just trying to track one of my package from Russia. And you can see I went to this 17 track, which is a very popular website you can see over here. So every time I'm hit, whenever I open this, I'm not sure what they have introduced some new features or whatever. So you can see these are four icons. They are trying to explain that this actually does this, this actually does this. I think this is third or fourth time that I have actually press this because I wanted to see and track my package rather than, you know, see the instructions. This is kind of, you can say, very good example of what I actually don't want, but you actually don't want in your product. So you can see also these icons. They don't have any labels, although they have some these overlays that are showing that this is actually what this actually does. So very nice tool. But I think this is not the good way of showing those. Maybe they can highlight these and show the titles or maybe some, what you can say labels, maybe for four or five times in the start. And that is going to familiarize the user rather than showing a whole tutorial and clicking on different things. So what I did is whenever my context is that I came here to search for my package. And you, and you are showing me what are the new features you have added in your product. That is very, very irrelevant. So this is a simple example of what user context is and how you are going to show them the usage. Because I am, I already have used this app many times. And I don't want to see what new features they have added maybe later on. So don't show it upfront. So that is all in this lesson. I hope you have enjoyed and learned something new, will meet you in another lesson till then, take care. 4. Align your team to New User's Mindset: In this video, we're going to cover different techniques and how you are going to align with your team members or your whole marketing legal or other teams and how you are going to use guided interaction by using user's conceptual positions or whatever the user's context is. So let's get started. Now, first thing is that interact don't tell. So we're going to focus on not the set of instructions that you need to do this. You need to do this. No, we have to interact, let the user interact with your product. So the interaction is going to guide the user. So you can see this is the new version. Once they have removed or Google smartwatches via OS, they actually removed the instructions, instructional video on instruction set of instructions. And they actually used guided extra interaction approach. And then they tried actually sending, you can see now, stay in touch, send a text to Jim. So they actually shifted from a set of instructions to actually let users perform different tasks or send some messages or something like that gradually from one or two or three steps. And let them use the product. Now how you are going to align your team on new user onboarding in how you are going to get more or better user onboarding information from different parts of your team. First thing is that you have to avoid isolation. So don't decide isolated in a design or development team that this is the user needs are this is what we're going to build or user onboarding. You have to get help from your copywriters, your quality assurance guys, your marketing department, and your legal privacy compliance teams. Because sometimes there are legal issues you can not show on your product or you cannot promise something in your product. And then you can also get your customer service professionals, they are going to help you. What are the problems users are facing? What are they calling for in the daily basis, on a daily basis. So these are the things you have to get your team aligned on to get better, building better user onboarding experience. Not this is really important. These are set of questions that you have to ask your user, or this is called the New User mindset. So you have to get into the minds of your users before you are going to build a user on-boarding experience for them. We have already studied them how they found your product. Did they try anything else before you need to get to know what your competitors, what are their expectations from your product. Maybe they are expecting something else and you are showing them something else. What barriers they came across in other products. Maybe there was a very big, large sign-up form or something like that. But common routines, they have established what are the common routines? What they actually, what activities they actually perform on similar apps or your own app. And what workarounds have developed. Maybe they are trying to skip something. Maybe something is not working and their mental model is not matching your products. Mental model, working model. And they are trying to figure it out on their own, something like that. So you have to build this new user mindset and you have to keep your new user mindset fresh in your team. So you have to get this whole mindset and put it in your team members minds and how they are going to do that. Maybe you have to tell them that you shadow or customer service call or read the transcript of those customer service calls. See how the actually user responded or with the problems are, what are they facing. Second is that you have to invite them in user research sessions. If you are conducting a user research, usability research, you have to invite your team members. You can also ask them to journal and share their own experiences. Maybe I am going to act as a new user and I'm going to use a product and maybe showing that this is the problem I was having. And you can also discuss the problems they had over lunch. Again, via new user cap, you have to become a new user yourself and explore your product, your own product, and see what are the areas that need improvements or where you are having some problems. Role-play, Role-play is really necessary. In user experience. You have to wear the shoes of the new user and the hat of them who use it. And you need to play that. Okay, So this is the first screen I got. Okay, so I'm not going to read it, I'm going to skip it. And let's see how the app actually behaves. So this is how you are going to conduct user research, or you can say new user mindset built into your team. Now the next very important question is that how you are going to separate, separate your new user from your experienced users are already the users who are already on board with your product. Now, there are many methods if you know some of the coding or some HTML or something like that, you already know a lot about cookies. These are not chocolate cookies, these are web cookies. So a programmer, they can see that how many websites or cookies or the cookies use of cookies, they can store the cookies on your browser and they can see that this user has visited this many times. Second is local storage. You can also your app, e.g. if you are using a mobile app, it is going to store something locally that this user has been logged live ten times or 15 times or 20 times he has been using this app for, for like 20 h, something like that. So you can track that. Third is user accounts. So if we have like Google or Samsung, Android, they all have apple. They all have their own accounts. You have Apple accounts, you have Android account, you have Samsung account. They are actually tracking your usage. So this is another way that user accounts, you can track them, that this user has been logged in. And he was active for like 60 min. And he was active on this page. And he was maybe why he was on the sign-up page for like 5 min. So you can get those problems. So this is how you are going to separate your new user from your existing users. So summing up this lecture, we have studied that what is users, new users mindset and how you have to install that new users mindset into your own team. So we are going to role-play and do different things. We have to separate our new users from existing users. And that is all. So let's move to the next steps and learn more about user onboarding experience. Till then, take care. Bye-bye. 5. Remvoing four common road blocks for smooth onboarding: In this video, we are going to learn a very important first step of user on-boarding, which is making a first impression on your user. So what is the first impression means end user on-boarding. Let's get started. Now create first impression is that you are actually avoiding a poor performance and reliability. So if your app is trying to load in like 3 min, then I think this is going to be a very poor. You can say, first impression on your users. Also, if your app is crashing on your first load or it is not working, then there are liability issues in your app. Second is sign up walls. I have seen this so many times and it still is working these days. I have recently tried to use and website api, IP for tracking geolocation of a user. So what I did is when I tried to sign up for their free account, it was asking me for my phone number and my company name and my address. I was I was really shocked that I just want to use or test that API I was signing up from for a free account. I think my email and my name was enough. But they had like ten or 12 different form fields to fill. I was really reluctant to use that. I just was really worried about why actually need all this information. Just I'm trying out their product. Sign-up false, tried to reduce sign up walls. And there are many times you have seen when you are trying to sign up and login to a website or mobile app, you see this hideous Google authentication, which actually takes like two or 3 min. Sometimes I have actually clicked on the wrong image and it starts again. So this is really frustrating for the user. For the new user, at least. Lack of inclusion, you have to include all different impaired people or usability of visually impaired people or others. You have to include or think about all different users. Last is hidden or unclear missions or your message. So if your message or mission is unclear, e.g. my company is not using a sustainable or recycle packaging or something like that, then I have to show that we are supporting this charity or we are building a company to make this earth more green, something like this. You have to show them upfront. Now, you can see we have a research firm, **** dequeue or Tik. I'm not sure. Anyhow. So 70% of the website, they actually found out that 70% of the websites have critical blockers for visually impaired users. So leading them to abandonment, abandonment, and revenue loss. So e.g. if your users like 3% users are five per cent users are visually impaired, then I think you are using five per cent of your revenue, maybe more than that. Maybe there is a user or a regular user who really wants to buy your product on a daily basis, then I think you are using a reducing a lot of revenue. Now here's a tip about hidden or unclear message. Now, there's a firm called Patagonia. Now they, their sales actually increased for x after they actually showed on their website there that 1% that they are trying to improve the planet Earth. You can see Patagonia's self-imposed art tax, 1% for the Planet provides support to environmental non-profits working to defend our air, land, and water around the globe. People actually started buying more products after they read their mission that what this Patagonia is going to do. So I am spending money that if I think that my money is going in the right hands or they're going to spend it on making my planet more greener. I'm happy to spend that money over here rather than some other company. You can see this is the main page of Patagonia. We are in business. This is a recent screenshot to see our home planet. So this is really, really, you would say, very, very promising. First start from, for a user that is, that wants to care about saving our planet. Now in the last I'm going to sum up that you have to start removing roadblocks to your product. This is going to be your first step in user onboarding. Common. We have already discussed all the common road blockers. Sign up balls are unclear messaging. So all that, all those four steps, you have to start removing them one by one. I hope you have enjoyed and learned something new. We will meet in another lesson till then, take care. Bye bye. 6. Define core use and end state in Onboarding Journey Map: In this section, and we're going to start mapping our onboarding experience part of our users. So this is going to be very important journey. So from here on, keep your eyes and minds attentive. So let's get started. Now we're going to map our on-boarding January for our user. And you can see that we have a technique that we're going to start from the end point, okay? So we have to bridge the gap between users starting point and uses sustainable, successful end state. So we're going to start from the end, actually defining the end state of onboarding. So what you actually want to accomplish with the user, what you want your user to be at the end of this whole cycle. Now, next is you are going to define different entry situations for the users. So this is really, really important. What and how they actually started using veer, from which path they actually entered your product. Next is working backward from N to entry, which we already said. I already said that we have to work from and to the entry point. Then we're going to scope our actions. Scoping means that how wide that action is going to be, e.g. I. Want to sell a product, start selling. This is an action, but what is going to be the sub actions or sub-task? I have to complete two that are going to be the scope of this whole action, selling a product. So it means they are going to be a lot of different subsections or subroutines to accomplish this section. Next is prioritizing key actions for guidance, you have to prioritize which are, which are the key actions, which are the key points where we'd need guidance. Now, we're going to start what is the n state? Now? And state is actually you have to define the coal usage of your product or your core use of your product. So that coal use is going to be different for each kind of products. So let's see some examples. Firstly, cells at least ten items per week while maintaining a high celebrating. This could be for eBay, this could be for any selling website. There are many other websites. They actually have something like this. Alibaba.com or aliexpress.com. Next is Designs 15 h a month and shares at least one time while having pro account. So maybe I'm using Figma. So I, I, my Figma Pro account. I want to see that my user or my goals users should use at least or design at least 15 to 20 h in a month, at least minimum. And also at least share one or two of their designs with the clients. The third one is post ten ads per month and use premium ad once a month or maybe twice a month. I'm not sure, but this could be the core use of your product, e.g. I. Am posting ads on OSX or any other ad website. And I'm posting at least ten or 20 ads, banner ads per month. And I'm also using premium services, then I'm there cold product's user. This could be different for each product. Now, once you are on the verge of defining your core user or core usage or all use, then you have to make sure that these are the things that these are the criterias that define that cool. So first is aligned to long-term business schools. So your core usage switch should be aligned to your long-term business schools. Maybe I bought like 100,000 users after one year of my product launch or maybe two years of my product launch. So whatever you are defining the coal use of your product, it should be aligned with the long-term business schools. Second is it should be achievable. So if you are making an assumption that I want a user that are going, that is going to use like my product for 100 h in a month. Maybe you might not find any users like that. So it should be desirable goal for the user and it should be achievable. Third is, it should be very specific rather than genetic. I don't want a code used that I want my users to use this app happily or one already. This is not a course use. So you should be specific. Happiness is not anything, any business model maybe some businesses want, but how you are going to measure that? So it should be specific, framed around it individually user. Now, it should be framed around the user, e.g. there are users who are sellers, there are users who are viewing or contacting those sellers. There are two or three different types of users. So each users user will have different usage. Last is, it should be independent of technology. You cannot say that. I want them to use Android version to help. Or maybe I want 100 users that are going to use one Android features. This is not going to work. It should be independent of technology. It should be something that is aligned with your business goals and all those different criterias they should match to make up your code usage. So this is all about the first step of building your user onboarding that you have to define your code usage. Next is assignment coming up for you. Let's start some digging into in another lesson till then, take care. Bye. 7. Entry Situation Core Routines and onboarding Journey Map: Now we have already defined what is the end-state or encourage use of our product. Now we need to define our entry situations. Let's get started. Now there is a major difference between entry points and entry situation. Now, in entry points, you have to take care of two things. One is user delivery channel, or where the user is coming from. And what is the motivation or contexts that user is bringing into from that bought into your product. These two things are going to highly influenced the behavior of your user and their entry situation. Now, this is the most important diagram in this whole course, I think. Now you can see over here we have, we have to draw something like this. We have onboarding actions are anti situations, then we have routines, and then we have code use of our product. So coal use is going to be in the middle. We have like sell ten items per week, maintains high rating. This is going to be able to go use or any online e-commerce app where you are selling user is selling items. So you can see they can have two different situations that user can be entering from these two perspectives. One entry situation on the right is wants to get rid of clutter, search the internet for paces selling similar items. So he's trying to streamline their process of selling items and they want to de-clutter everything. Second is wants to start an online store, receive a reference ring from appear. So you can see these two entries are totally different. Their motivations, their behavior is going to be totally different. Look at one more entry situation. So here we have another one. You can see over here, e.g. if I'm a user of Figma, and I started using Figma for the first time. There could be too cold user entry situations or situations. One is that I want to shift my job from graphic designer to UI UX designer. So I might be very new to the tool. I would be expecting to learn it more easily than the other situation. You can see Walsh to design and share with this development teams. So this designer is already have a very big or large development team or they're designed team. He wants to share his designs, you want to collaborate with them. So these two situations are totally different. Now, next step is we have to see what routines our code user is actually doing. So you can see over here, these are the routines. He's actually doing six tasks every day or to maintain the coal use. Check top sales trends every month, share items for sale on social media list five plus items per week to sell. Respond to buyer within 24 h. He's a quick responder, maintains a storefront, ships within two days using quality packaging. So these are all different routines of this code, user or established user. So you can see we have started with 2.2 situations and then we already have defined the core routines for our coal use. So this is going to be the next step. Okay, Now the next step is that we are going to move from our code routine or coal use and then core routine. And then we're going to move back to our entry point. So you can see over here, very simple, not very difficult, not size, very difficult size. So we have you can see, respond to buyer within 24 h. So we have to step back and think, what would he had to accomplish her she had to accomplish before going to this turns on seller notifications. So once your notifications has been turned on, you can receive notifications and you have to respond to the buyers. Before that, they had to download the mobile app for that, for that cell selling e.g. eBay app or any other app you have to install that. So you can get notifications on your mobile and you can instantly respond to that. Before that, they have to post an item for sale. Because if there is no item, then you cannot respond to the buyer. Then before that they have to create an account to post an item for sale. So this is the dependencies we are moving backwards. You can say like where we are actually descending from top floor to the bottom floor by seeing the whole steps, different steps, and what step we took before that. Then we have copies, details from similar items. So what they actually did is they actually browse, browse the whole website and see what other sellers are selling and what are the details of their items they are selling. They tried to copy that same title and description and Petra and everything and they copied to sell their own product. And even before that, once they started using or once they entered our website, they actually looked at similar items. They are trying to sell. E.g. I'm trying to sell a camera lens. I would go on any website like eBay or any other website, selling website. And I would type in that 35 mm lens and I would see what other people are or similar items there are and what are their details, how people are making their headlines, all the images they are showing for their products, all that stuff. So this is how you come from your core, use two core user routines and then go back step-by-step to the entry situations. What were the steps that the user took to reach backwards to the entry situations? This is, I would say the core of this course. This is the, you can say the bread and butter of this lesson. Okay, so that is done. Let's move on. So I hope you have enjoyed this onboarding routines, codes usage and two situations and how you can go back from your core usage to co routines to entry situations step-by-step. And make up your whole map out your whole users onboarding January journey. Sorry. And that is the essence of this lesson. I hope you have learned something new. I will meet you in another lesson till then, take care. Bye bye. 8. Let scope actions in Onboarding Process: In this lesson, we're going to talk about the next step, which is scoping actions. So we have already decided our endpoint and entry situations. Now the time is to define our scope of our actions. So let's get started. Now you can see here that I have actually shown to actions subscribe to a newsletter. And the second one is post an item for sale. So if you talk about subscribe to our newsletter, it might just need one task and just the email. Submit your email and click, That's it. But for posting an item, the user might need to create his account first. Then he might need to verify their account. They might need to verify their phone number. And then they might be able to post the item for sale. They might need to provide description for that. So there are many multiple tasks that are inside this action of posting an item for sale. So if the scope of the action is very narrow or very small, it is not going to solve the user's problem. Let's talk about some of the points you need to keep in mind while scoping your actions. First one is that provide a noticeable benefit to the user on completion. So you have to show them that you achieved this after completing this task. And the next one is unnecessarily reducing unnecessary subtasks. So if the information needed is not required at your first step, you don't need a user's address when they need to sign up, then why are you why are you asking the user to submit that information? Or maybe the phone number can be verified later on. So why just skip it and move it to the later on stage? The next one is merge. Interdependent tasks are flew into one. So if there are tasks that are interdependent and they are on, their separate actions, try to merge it into one. So if you are verifying, e.g. if you are verifying as a seller and you need your ID verified, and you need your phone verified, then you have to combine both of them into a single flow. Last one is reflect a user's definition of the actions. So if the user thinks that they are unable to comprehend e.g. sign up. So if you have sign-up and sign-in, it is sometimes very confusing. So if the user thinks that it should be Create Account and it's easier for them to create an account on a website, then I think you should use Create Account. So this Create Account is actually defining the action that once you click this button, you are going to create your account for this website. Now, this sums up our lesson of scoping actions. So we have completed scoping actions. Now, we have to define all our actions and what are these tasks and subtasks? We have to combine them into one. If there are some unnecessary subtask, we have to remove them or maybe move them to the later part. So this is all about scoping actions. I hope you have enjoyed this lesson. Let's move on to the next lesson. Take care Bye. 9. Let's Prioritizing key actions inside Onboarding Process: In the last lesson, we have actually started scoping our actions. Now we have completed scoping of our actions. Now, we need to prioritize them which action is going to have more priority. Okay? So this is really, really important because sometimes we need to move some of the tasks at the backend and some are going to be at the front. So let's get started and see what we need to look for when we are going to prioritize onboarding actions. Now after scoping actions, we need to prioritize them. So first thing is that which actions are going to reduce abandonment or failure? E.g. if someone is creating a new post for selling an item and they mostly abundant that post. They didn't post that item to sell. They are going to abundant in the process. So this is going to have the priority. You have to prioritize that. Users can easily copy the whole sale description or sale template from other products. So this is going to have the priority. Next is key actions within a timeframe that are necessary for success. E.g. like you can see at the bottom, Twitter found that retention was higher when users actually followed 30 other people when they sign up. So what the date is, whenever a user sign-ups in the start, they actually let them or ask them to follow these people or maybe important your list of contacts to follow. So they tried to show them the people they can follow. This actually have the, you can say have more success factor. You are on-boarding. So this action is going to be prioritized. You have to prioritize this action when on-boarding because we want at successful onboarding, we want a success, successful user for a product. Which actions are required for other key actions? So if there are actions that are required for other key actions like selling an item, you need to verify your account or something else. So these actions are required for the key actions for selling an item. What are the actions that needed or selling an item on your website? So these actions are going to have more priority. Now the next is actions that are almost common are necessary in other situations too. So e.g. like we have four or five different entry situations. And we see that in all these anti situations, we need to have like let users subscribe to updates. So you have to prioritize that, that we really need that because new users mostly get motivated or get more motivation from showing them different messages time-to-time that this item has been sold. Or someone views your items, something like that. So next is which actions can you practically sport? So there might be some actions like maybe your app or your website wants the user to verify their ID card or identity card by putting that in front of the camera. But right now, maybe practically that doesn't, your app doesn't support that. So you can keep them in the backlog. And if there is something practical or you can really support it, then you have to include it in your pelletized or priority on boarding actions. So anything that is not practical, you have to keep that in the backlog. Now at the end of this lesson, I would just save one thing that you're onboarding solution is always going to be destination driven. Like you can see, while we prioritize, we were prioritizing onboarding actions, were deciding that on the basis of that, which of these actions are going to have more benefit in the end? So for the end-users, so this is always be your dirty and this is always be your motto that we are designing the onboarding solution, which is destination driven or the end point driven. So that is all for this lesson, prioritizing your key actions are on-boarding actions. Let's move on to the next lesson. 10. Project - Share your worst User Onboarding Experience: Now this is the time for your first assignment and that is you have to share your worst onboarding experience. So if you remember any screenshot or any app or any website, you can share the screenshot or you can just write the story in two or three lines, that this is what happened with me. Now, this is my worst onboarding story. And that is from, you can see the right screenshot of Canon camera connect. It was really miserable. Miserable. I like it took me like half an hour to figure out how to connect my camera with my app. And the whole on-boarding process of connecting with the device or the Hole Wizard was really, really cumbersome and difficult to understand. So your assignment is you can share screenshot of any app or any website or any on-boarding experience you had. Or you can write in two or three lines that this is what happened with me. So make sure you submit your assignment. Now. 11. Project - Define Core Use of any App - Onboarding UX Project: Now this is going to be your assignment that you are going to show me a core usage of your own digital app, e.g. there might be some imaginative or creative where you thought about and you might be thinking of developing it or designing it. Then I want you to define the core usage of that app. So you can see in the middle over here we have sell ten items per week, maintains higher ratings. You can do this, you can create this for any app of your choice. You can either show me like this or you can just type it in the assignment that this would be the core use of my app. Also share with me what would be the app or what the app is about. So I need to know that this app is going to be having this code use. So this is your assignment. Define the core use of your own app, whatever app you have in your mind. Even you can pick up any app from Internet or maybe something already there, like Airbnb or any app you want. So define a coal use and show it to me. That's your assignment. 12. Project - Define Entry Situation for your App: Now here is your next assignment, which is you have to define at least two entry points for the app. You have just defined the codes usage. So according to your code, use it. You can think about anti situations for different users that are going to enter or start using your app or website or whatever you have. So make sure you try to give me at least to enter situations, you can write them down. This is going to be the entry situation. This is the second entry situation, along with the code usage and also coal use. And also you have to define what the app is about if your app title than coal use then entry situation one and situation two. So this is going to be your second assignment. If you can build something, some image like this, that would be more interesting. I would love to see this image and how you are going to define entry situations. So this is going to be your second assignment. So let's get started at submit this. I think it's the third one. I don't know the numbers, but it is your assignment. So let's get started. We'll be waiting for your assignment. 13. Project Finale - Define Core Routines of your App: Now here is your next assignment, which is you have to show me Go routines of your app. So whatever you have, you are developing the onboarding experience for this, is this for this course, you have to show me at least t or more code usages or code routines, routines of your user, successful user code, user, user of your app, and show it to me. You can make this on a piece of paper. You can take the screenshot, you can share that, or you can write it over here. Whatever is easier for you if you take a screenshot, make a diagram that is more better for me, you can make that in Figma. You can take the screenshot and share that with me. So this is the next step I would want you to show me define three or more code usages of your app. Whatever you are building. I am waiting for your assignment. Take care, Bye-bye. Get started now. 14. Project - Core Routine to Entry Situation: Now here is your last assignment, which is you have to define a path from your core user routine or use routine, one of the routines, anyone you can select and go back from that path to the entry situation. Okay? So you have to build a backlog that if they have to enable notifications, they have to sign up for notifications. Before that, they have to download our mobile app to get notifications on their mobile. Build the whole path from a use code, use routine, back to entry situation. So this is your assignment. I hope to see your assignments soon. So make sure you build it to get more grip on building a better user experience and onboarding experience. Till then, take care. Bye-bye. I will see you soon and meet you soon. On my social media platforms, on my YouTube channel, keep on sending me your messages. I always apply to them. Take care and see you. I want to see your assignment, so make sure you complete this. Bye-bye. 15. Integrating Guidance inside actions: Now you have already prioritize your key actions for your onboarding. You have decided that these are going to be the most important ones. And now we have one more thing, which is how we are going to put guidance inside those actions. So I'm going to show you what we need to do. Let's get started. Okay, so first thing is that we're going to break each step or each action into three parts. First is going to be the prompt, which is going to be the trigger or beginning of taking the action. Second is actual work. What you actually input or do with that task or action in the middle. Then there is a follow-up at the end of each action. Follow-up is like feedback, or maybe you are going to give them the next step of what should be done. So this is how each action would be having three parts. So you can see the diagram below, prompt, work and follow up. Well, let me show you an example of how the guidance inside actions should be. So you can see over here, this is the old version of eBay motors. And you can see this is the prompt that when you start the app, we have to select that you have a car, truck or motorcycle. So if I click on car, you can see the work is starting. Next. We have to select the ear make and model. And we have to save the vehicle same amigos. So I can you can say I can have the option of all the different parts that are going to fit for my vehicle. So you can see the next is follow-up is once I have saved or done the work. You can see Follow-up Next Steps is we have different options, parts for your vehicle, which I can find and click and all that stuff. So this is how your actions should be laid out. Similarly, here is another example of guidance inside actions. So you can see over here, here we have the sign-up form from ProPublica. And you can see we have prompt, which is to sign up for our email. And you can see this has been integrated inside that page. It is not popping up or not blocking my content or my primary action. So this is the prompt. So once I see this, I am going to fill up this form. This is going to be the work. And the next is follow up that you have been signed up. You can see over here it says you are signed up. So this is just feedback. You can also see over here at the Batten that check your email or verify your e-mail, something like that. So this is how your whole actions should be laid out. So we have guidance inside actions, so prompt the work and follow up or next steps. So this is how your each action should be. So this is all about how you are going to put guidance inside actions. I hope you have enjoyed this lesson. Let's move on to the next lesson and then something more interesting. Take care, Bye bye. 16. Lets talk about Prompts inside Onboarding Actions: Now let's talk about prompt. So we are within an action and we have three steps of each action prompt, work and follow up. Now we are focusing just on the prompt. So what are the points that you have to consider while thinking about the prompt and how you have to use prompt in your onboarding actions. So first thing is pick the right context. So e.g. context really matters a lot. E.g. if your user have just posted an item for sale, you can show the prompt that do you want updates for this sale item on your mobile phone? So if I say yes, then you move them to install or download their app and get notifications. So this is the right time to advise user or prompt them to download your app. Next is aligned to users benefits. So you have to align everything your prompt to users benefit. E.g. if you see that the user is reading three articles from your website daily. So you can show them that. Would you like to subscribe to this category? E.g. I'm reading tech, blogs or technology, all the articles in the technology sector or technology category. So maybe after observing the user, e.g. I. Have logged on like ten times and after five articles that are similar in e.g. I'm reading user interface design articles or user experience design articles. The website can prompt me to subscribe to this specific category. Like you are reading. 70 per cent of the articles from this category, would you like to subscribe? So this is the right time. So I'm aligning my prompts to the users in trust. Set expectations. So you have to set the expectations, whatever the prompt is, try to label it. E.g. would you like to subscribe to get weekly updates? So I know that I have the expectation of getting the e-mail every week rather than daily or getting three emails a day. So this is really, really important. Last is considered your free samples. So I have seen a lot apps that actually give the user to use their app freely for like 30 min or maybe use 30 min call up credit. So make sure if you are giving your user a free sample of like 30 min and make sure you keep on checking on it. So if you have like 100 free users, they are using like 3 min. And if it is costing you a lot, you should try to restrict that. You should try to restrict your free samples. So maybe users are trying to use different free accounts and keep on calling or using your app, it might be a problem for you. So you have to restrict that. Restrict and consider your free samples that how much free samples you can easily afford. Now, here is an example of this app bumble, and you can see over here that it gives a prompt. You and I both have 24 h to make the first move. You matched. So this is a dating app or matchmaking app anyhow. So you can see the prompt over here, not sure what to say first. So this is a prompt. So once I click it, I might see different options to say hi or maybe some sentence to start the conversation. So this is a really, really nice example of picking the right context and aligning yourself to the user benefits. Now in this screen you can see over here the context is that maybe I have signed up or something like that. Now I am getting free samples. So you can see what here it says, you have caught five super swipes. So maybe I have to pay for the super swipe. So first five super swipes I have got as a free gift to signing up on this app. Now, here is two examples of from football flip board, and these are really going to give you some good taste of setting your prompt fastest setting expectations so you can see sign up to save your interests. So it clearly states that I am signing up to save my interests. And also it is giving me an option to skip it for now. So this is a really, really nice way to signing up the user because they have seen that they are reading a lot so I can save the category or interests time following. Second, you can see it says discover and share the stories that matter to you, get started. So this is also a setting expectations and also not overwhelming the using the start. And it is the right context. Maybe after reading five or ten different articles, you can show the user that would you like to get started with this app? Or would you like to save your email and save your interests via email? So these are two different contexts. One is maybe at the start of the app. One is after you keep on reading like ten different articles. So you can either skip that or give the user the chance to read the articles first. So this is how you are going to pick the right context. So that is all about the prompt and how you are going to set expectations, picking the right context and thinking about your free samples and setting expectations, aligning your prompt to your users benefits. So that is all I hope you haven't learned something new and we will meet you in another lesson till then, take care. 17. Work inside Onboarding Action: Now we have already discussed what is prompt and what should be considered while thinking about the prompt. Now, the actual work is here and we have to guide our user through the work. So let's get started and see what we can do to facilitate our user while onboarding, onboarding action and doing the work. You can see our prompt has been initiated and now the user have to do the work. And what you have to do is number one, create continuity. We are going to see all the examples. So just listen to the points. Create continuity in your whole work process. Second is provide support in contexts. So maybe user needs support somewhere inside that context. Maybe they are having trouble. So you have to pry, provide guidance inside the context. Then we have offer alternatives. So maybe you can give the user some alternative ways to do or complete the task. Maybe you have seen, when I have forgotten the password, maybe there are other options that if you are not receiving the password, you can click over here and you can call our assistance or something like that, some phone number or something. So this is how you provide alternative, offer alternatives. The last one is make adders actionable and informative. So if the errors are easier to recover and actionable, you can easily manage them. You can easily come out of that error or that error situation. Now you can see here's an example of creating continuity. This is from screens from domain. And you can see once the user click over here property alert on, it would show them the frequency, email frequency they can set daily or weekly. Then they can click on Sign up and it will show the sign-up screen. So this is how you create continuity. And let's see one more example of continuity. So here is another example, e.g. this is seven ab workout app and you can see over here that they have three screens. One is that what is your plan? So once you click that, it will show you the weekdays you want to set your how often do you want to work out? And then the time you want to work out, maybe you can set reminders. These are all connected together. So this is how you create continuity in the work phase. Now, here is the second part which is provide support in the context. Now you can see over here on the left I have the app which was TransferWise before. And when you, when the user is actually trying to verify their ID or they are putting the ID card in front of the camera. And it is not focused or it is out-of-focus, it will show this error message that make sure that your driver's license fits in the box above. If it not fixing, it will give the error and show that please scan or please focus. Again. I have used it myself, so I know this is a really, really amazing and simple experience. Next is you can see this is from air to Oscar. And when you post a task, it shows you what is your budget. And when you click on, won't help. So this is inside that context right now. I am going to post up a job and I don't know how I go, I'm going to price that. So should I hire a person for $50 an hour or $25.75 dollars and $100. And so when I click on, won't help, it is inside that context, inside that box it shows me that these are the four major categories. You can, if your task is very small, you can light work, you can put the tasks should be $25 per hour. So this is how you put the help or guidance or support inside that context. Now here is the guidance rule of thumb you need to follow, which is when you have to put the guidance, differentiate required tasks from optional subtasks. So if there are subtasks that are optional and that can be avoided, don't try to disclose them first. First complete the necessary or required subtasks. So you can see over here, there is one more thing which is a wide subtasks that are out of the context. So if there is something that is out of the contexts that doesn't need right now bothering the user, you should not show that work or effort to the user. Here is a brilliant example of type form, how they actually tackle the e-mail verification. So avoiding useless subtasks. So what they do is I have used die for myself. It is a app to create interactive forms, surveys, really, really nice app. I have used it many, many times. Now how they do the user verification is that they actually let the user create the whole form. They just create the whole form. And when they reach the end point and finish the form or share the form, then they have to create or verify their e-mail address. So they put the e-mail address and that is all. So this is how they actually create account of the user. They let the user create the whole form and at the end of it, they give instructions to how you are going to post it and how you are going to verify your account. This is a really, really nice way that you are actually posting the tasks at the end of the session or at the end of the work. So the, all the work user have already done, which is filling out the form, creating the form. And the last one is going to be e-mail verification. Now, let's talk about alternative. So when you have to give the user the alternative, okay, So e.g. the action is to sign up. So you can see this is the sign-up screen from FIT plan. And it says Sign up with Apple, sign up with Facebook, sign up with Google, sign up with email. And I have seen websites where the sign up using just the phone number. So you can see, you can give the user a lot of alternatives, so they are flexible. It's easier for them to complete that work. And the next one is that you can also give users the option to skip that part of the work, e.g. they want to e.g. like in salmon workout apps and other workout apps. If you want to configure your reminders, you can set them on later on that I will figure this out later on that let me just start using this app. So this is how you offer alternatives. The user, while your users onboarding, you have to give them an option to skip right now. So you can see what here this is pit plan app and you can see at the top, right, we have skipped. So maybe I want to just start using this app. I want to see this app. I might figure this out on later on. I might configure this later on. So I can just click on the skip and get to the good part of the app. There are many, many ways to skip and enhance it. One is save and return later. So I have used this app base camp, and you can see what they do is e.g. if you are configuring something or setting up your project, they actually an annual leave in the midway. They actually give you an option when you start next time or Logan next time they say, Let's finish. So once you click that, it is going to go to the same step you left and you will actually complete that whole process to setting up your project. So this is a really nice way to have a save and return later. So similarly, a lot of websites, they actually save your whole card. So once you log out or login, again, it will have the same God or maybe I have seen the same pattern on Amazon to that. Start shopping from here. Start shopping where you left, something like that. So this is a really, really nice thing to add. Now let's talk about when errors are going to happen and they are going to really happen. Whatever you do, they are going to happen in your app. So there are ways to let user handle those. So first thing is that you have to show them clear error details, what actually happened, what was the problem? Second is you have to give them actions, actionable approach to resolve that. Third is that you have to give them additional resources if they are available may be some helping article they can read to resolve this problem, something like that. So you can see on the right I have screen from wise app or TransferWise. So you can see over here this is a fake ID card. They are trying to we are trying to scan and you can see it says we couldn't read everything that was printed on your ID. Please make sure nothing is covering it. So you can see this is a really, really good way off clear error details. It is giving me what actually is the adder. And add the and you can see it says, take a new picture, so it is giving me actions. And next step to resolve this problem. 18. Onboarding Process Example Explained: Let me share with you an example of a nice sign up or on-boarding action flip board has. So now you can see here we have the first step, get started. And rather than showing them to sign up or email, you can see it says what interests you. So I have different tag, design recipes and everything so I can select my interests. And then it says that The next is actually, this is actually the prompt and these, this is the work. This is prompt over here, then this is work. And once the work is done, you can see update your interest at anytime. It shows me the next step or feedback continue. Once I continue, you can see it says, share your interests. So this is the action I told you that, like Twitter had actions that are going to work really, really prioritized because it makes the user successful. If this involves success, they want them to share the eye, share your interest, sign-up to share your interests. So this is where the user is actually going to sign up and also it gives skip for now. So maybe I don't want to sign up right now, so I can skip. So if I don't skip, here is the email and password. I can see welcome to flip board. And then we have sign-up, Sign-up interests. Fill out your profile. So it is giving me just a name and the user name. So you can see this is bare minimum. I don't need a full form to have the user use my app or sign up already. I need name, email, and maybe username. That is all. And here we have more things like selecting your photo. This is the customization. Want updates about design, English, football photographing and more. Yes, please. And now you can see it gives me the prompt inside the context. So you can see it shows that Would you like me this app to send notification? Because right now I just said that I want updates for these categories. So this is a really, really nice way to provide support or using inside the context. So you always have to be inside the context. Don't pressurize your users to allow your notifications. This is a nice way to add notifications. So you can see this is the feedback. We're going to talk about it, success. And this is how you start experiencing your app. So this is a really nice illustration of onboarding process. And you can see I have defined whatever the different prompts, work areas and then as providing support in the context. I hope that you have enjoyed this example and you have learned something new from it. Let's move on to the next lesson and learn something new and interesting about user onboarding and user experience. Did the intact care till then take care, Bye bye. 19. Follow up in onboarding actions for better ux: Now we have already talked about work and prompt. And now time is that you have to give your users some sense of success and which is you have to follow up. So the follow-up is what closes out an action. So you are going to acknowledge success, or you are also going to show them the next steps. Now let me show you how actually follow up looks like. You can see here are two examples of one is flipped board and one is domain. You can see in the domain app, you can see we have short bill side feedback at the bottom that says all set, we will send you alerts daily. And the second one is it shows them the daily alerts turned on. This is this status is going to be always there and it showed them that they can easily reverse that and it has been completed. So this is success status, along with how your current settings are. Next is flipped board. I think I recently showed you the previous example that this is the follow-up. Once you have set everything, you have set your e-mail, you have created your account. You have set your preferences for looking for different articles. This is how it will be at the end success. So there is no more steps you have to do. So right now, it just says, acknowledge your success and give you feedback and follow up. This is a perfect example of acknowledging success and showing the next steps. So this is, these are screens from grew Grub Hub. And you can see over here in the left screen, we have successfully sent Thank you. So this is the confirmation message or acknowledged success. And you can see showing the next steps. I can see the status. At the top. I can also view my order details. I can also call the restaurant. So these are the next steps I have. I have computed the work, send the acknowledge success acknowledgment, then the next steps. Similarly, another example, we have acknowledged success and show next steps. This is workout app salmon, achievement, unlocked a new beginning. And you can see we have next steps to create profiles, casual workouts, concept, connect Apple Health and the Done button at the bottom. So you can complete all these next steps. So this is how you can, another way to show the next steps to the user. Now here are some don'ts and du's of follow-up. Now, don't try to use gamification, gamification for new users. So if you are giving reward for your user to do each and every step or accomplish, or use your app, like five-minutes and you give them five stars or something like that. This is good in some situations and it is very complex to set this up, this Gamification reward system. You have to clearly planet. So e.g. if I'm using a reading app and there was a PDF reading app. And once you read something, five pages, it gives you five-stars or a pop-up that you are willing doing really great. So if there is a continuous reader or a new user who is trying to read a whole book of 300 pages. These rewards, or after every five pages he reads or she reads, these 3 bar is going to irritate him. This rewards are going to be very problematic for them because they are going to cover her screen and it would be disastrous. So make sure you are not using overusing gamification for your new users. Maybe after completing the whole process, you award them $5 to spend or five points to use something like that, but not more than that. Next is don't launch straight into additional flows. So you can see on the right we have Google Smart Compose feature. Once when it was launched. You know, they actually showed the same feature and didn't want the user to leave the screen. So they don't want the user to get out of this flow. They actually showed this. And once you press the Tab, it completes the whole sentence. On the left it says that writing suggestions help you save time when drafting an email. Got it, or you can also turn it off. This is once you enable it, the Smart Compose. This is the screen it shows, and you can also turn it off and it doesn't keep you or move you out of your flow. Out of your flow means that if you are setting something or maybe e.g. I. Am verifying my phone number or something, it doesn't move out of that screen and go somewhere else to verify that. That is all about follow-up. I hope you have understood the idea of follow-up and how you have to implement that. Let's move on to the next lesson and learn something interesting about user experience and on-boarding. 20. Reinforcing guidance for better user onboarding: Why you are providing guidance to your user. Why work while follow up, while doing their key actions for onboarding, you have to reinforce the guidance. So why reinforcement is necessary? We're going to learn in this lesson. Let's start. So first thing is that you have to remove additional guidance upon subsequent visits. What does that mean is when the Google actually introduced this new Smart Compose, they actually keep on showing it for three or four first users. And once they have seen that users are actually using it regularly and they don't need any guidance. They actually removed that guidance and that screens on the left Smart Compose it actually disappear or you can also turn it off. Got it. And that is all. So you don't need to keep on showing guidance again and again. Now let's talk about why reinforcing guidance is necessary. In 91880, a German psychologist named Hermann, he actually ran experiments on testing the memory and how long you can keep something in your memory if you have learned something new. He found out that after one day it just trying to start fading away. So what he did is he said that you have to give repeated intervals. So after every one day, you have to keep repeating and showing the guidance or the user. Just been able to do everything else like you are driving a car. So in the first few weeks, maybe it's difficult to get customized to your automated gear systems or padding and everything because there are four or five things you are doing at the same time. But after repetitive learning, you actually just memorize it. It becomes your muscle memory. You don't need to look at your gear shifting system or paddles are breaks, you just do it naturally. So this is called spaced repetition. You have to give you a user some guidance after spaced repetition, maybe some user actually stopped using your app for like three months. You can show the guidance again. Now, if you want to apply the guidance to anything or any action, it should be applied to all the three segments, prompt work and follow up. Now, if you remember, there was this little creepy guy on old Microsoft Word documents. And whenever you start writing DSR, it just pops out and shows you the help. So I think reinforced and guidance is good, but showing this little helper again and again was annoying and actually people didn't like it. And now you can see Microsoft have removed this feature from long ago. So this is how the reinforcements guidance should be. It should not be for every time you write something or type something, it shows you the help. It should be whenever I needed, then I get the help without me. If you show them the guidance and reinforce guidance, it is going to be harmful for the user. So this is about reinforcing guidance. I hope you have enjoyed this lesson and I hope you remember if you are from nineties or 2000 or 20 years back, you might recognize this Clippy and you might be smiling right now. Let's move on to the next lesson and see you soon. Bye-bye. 21. Additive Guidance Patterns for user onboarding: Now in this video, we are going to talk about a detailed guidance. Veterans. There are different patterns that have already been established and you can use them to guide your users. So let's look at them. Okay, so you can see you might be familiar with most of them, inline cues, hints, overlays, and setup wizard. So these are four types of adjective guidance patterns you can use while onboarding your user or guiding your user within your app or product. So the first step is the new pattern which is inline. Use if you have used Slack or haven't used this, this is one of the best. I think personally, I love this kind of help and guidance within the app. So let me show you. So once you install or start using this Slack app, this is a team collaborating, collaboration app. And once you start using it, then most of the time when you need some help or there is some feature, new features you don't know about. If you type something, e.g. someone says, hi, everyone, It will show you a feature related to that. So it will get a q, and this is actually inline Q, it will be inline, it will be inside that context and add the same spot. And you can see wondering who can read your recent message. This channel is open to all members of your workplace. So this is just guiding the user that if you are saying something in this channel, then everyone can see and read your message. If you want to send some private message or someone else, then you have to join their private channel. So this is how you put inline queues inside your app. And this is one of the best, I think, pattern for inline guidance. Now the next pattern is hinged or sometime called inline. Hence you can follow them over here. Ui patterns.com slash patterns slash inline hints. And this is a very nice where you can see over here. This is an inline hint, but you can close it and it will be persistent over here. This is a hint that the new feature has been launched or your dashboard has been changed or something like that. So you can see over here, explore and add topics. You can also close it. So this is a nice way to guide user if they need something or there is some, I would say, new feature that the user needs to know. The next guidance additive guidance pattern is tooltips. You have seen it a lot of time. So once you hover somewhere on the screen, it shows you some detail that these are the two tips. Sometimes they are already there for the first time when you use something, there is a tooltip already there. Once you start using it once, once or twice, then it will disappear. So this is a design from Marina Goldstein, from dribble. So this is a very nice way of showing tooltips over here. That is why I showed you this screen. Okay, so here we have the hints. So you can see the hint is that you need to click over here. Or maybe there is a new feature and you have to check it out right now. Or maybe something like COVID-19 alert or something like that. So you can use something. Pinterest has been using Pinterest. Pinterest has been using pinterest had a pulsating Save button. So if you remember they want, then they launched this feature. They actually had a pulsating Save button where you can click. And that was a great way of showing hints inside the app or product to show the user that this feature is available, start using it. So Pintrest, pulsating button, very great way of showing motion, adding motion with the hints. So this is a very, very nice way. Let's talk more about toasts. So these are not bread toast. I haven't done my breakfast, Yes, So breakfast yet. So I'm a bit hungry. So those are actually something kind of feedback or maybe some kind of warning or information or whatever they are going to pop up from the screen and they might disappear after some time. You can see the left screen is Pinterest. Pinterest, we have find more ideas for UX I like or so e.g. eyebrows, UX. Categories. So I can click over here on this toast that just has been appeared. And I can find more user experience kind of images or whatever. On the right you can see these are just for information, warning in for success. And if you have ever designed a design system, toast, toasts are a part of design system. Now, the next way of showing users and guiding user is overlays. Overlays is one of the best, I think, feature. Sometimes user might skip it, but I still think that this is a good way to introduce something and to the user in a new way. So you can see over here on the left we have Dropbox. Dropbox. They uses a callout pattern. So this is actually an overlay call out. So it actually appears once you click on this, there is an expiry date. So you can see over here, it says that this is set an expiry date and got it. So once you click on got it, it is going to disappear. So this is just showing the information that this new feature has been added or you can use it in this way. Second is on the right, we have moral. Moral actually uses floating verbal kind of overlay. So you can see on the right bottom they have an arrow, which is a floating bubble, and it shows you that demo and want to learn about morale. You can see this is actually integrating your guidance inside your app on different points, points of the journey. So if the user is a big enough, then you can see they clicked on Get Started, wants to select Get started. This, this is going to pop out on the overlay and it will guide the user how to use this app or product. So this is a nice way of informing user. There are few more kind of overlays that are going to stick there and they are not going to deactivate unless you press some buttons. So you might have seen cookie sheet on a lot of websites. They appear at the bottom, they are going to stick at the bottom. They are actually kind of concept sheet. They are called concent sheets. This is actually called sheet, I think sheet in UI design and I would say design systems. When you design system, these are sheets, deactivate account, dialog pop-up. And this is again guiding user. Let's see few more overlays, types of overlays, these are all different types of overlays, sheets, bubble, chat bubbles, and inline cue, hint kind of overlays that are going to show the hint only. One more overlay is floating chat bubbles that has been recently launched. You can see over here, this is actually an app. So if you try to talk to your customers or tried to talk to your firm or company. This is actually once you click over here, this is going to pop up. And it will the start a video call or start a phone call, or you can just type your message with the customer surveys of that website. So these are floating chat bubbles. They are recently been popular in a lot of e-commerce websites and other websites where you need some guidance by contacting the customer surveys at the same spot. So nice way. Let's move on. Now. Let's talk about some of the problems with overlays. Now, if you are using overlays a lot in your app or your guidance than the problem could be that overlays often collide. Once you have opened one overlay and then the other overlay is open on top of it or at bottom of it. This is going to be a very, very big problem. From a user experience point of view, user cannot do mostly when you use Windows operating system if you haven't pressed cancel or okay, on the top overlay, it is not going to work for the bottom one. So sometimes you are on the bottom one and it doesn't allow you to click over there or tap on that. This is a problem with overlays. When you use a lot of overlays, this is going to happen. So try to limit your overlays only show the overlay inside the contexts when it is needed. Second problem with overlays is that they are actually interrupt people and they actually interrupt their cycle of product usage. So they might be completing their task and then again, suddenly they get a pop up. This is going to interrupt their current task or whatever they are doing. So interruption can be very problematic. Just think like when you visit a store, you go to buy your gene spent. As soon as you enter your store, customer service guy, he approaches you and he says, What do you need? What do you need, ma'am? So this is going to be very, very I would say disruptive and I would never like to visit store where normally the customer service guy is. They keep on asking you questions once you enter the store. So maybe I need to look around, find something and then I, if I feel, I might ask for help. So this is how, this is the model you need to approach when you are building your product. You can see over here, the best way to show pop-up is during the natural pause of a user. E.g. you can see over here. Here is screened from Twitter. And they actually showed this when the user actually naturally paused over there. So they show that you can add description or edit a photo or you show no tax. So this is a nice way to show the pop-up. So you can see also there are two pop-ups or here, one is at the top, one is at the bottom. This is how they actually glide. So if you haven't completed the top one, you cannot skip the bottom one. On the right you can see caveat, a food delivery app that uses a dialogue to enable push notifications once you have ordered something with them. Okay. So they don't tell you that you just enable push notifications for our app. They want you to get your order status. So I would be more inclined to enable push notifications for getting the status of my order, rather than getting tons of push notifications from different apps. Now, just to conclude this lesson, I will show you a research done by Brigham Young University with Google Chrome. And what they actually did is they showed users security dialogues while they was using Google Chrome. So most of the time, 90% of the time, the users actually ignored that message and click skipped it. They didn't read any security warning or any message while they were using Google Chrome or using whatever they are they were doing. So this is a very, very important research. You can get the research from the link below. But a majority of the participants you can see ignored the content of the security message that popped up during these tasks. So this is the way most of the users are going to act. When they are disrupted or disruptive. They get deceptive or interrupted during their tasks whenever you show them something in a deceptive way. So that is about overlays. And I hope you have enjoyed this lesson and learn a lot about overlays, hints in line cuz setup forms and everything. Let's move on to the next lesson and learn more about iterative design patterns. 22. UX Design Patterns for Onboardin User Experience: Let's get more educated about different new design patterns, more design patterns, more usability and user experience points to enable our users for better on-boarding. So let's get started. First is whenever the user is going to enter your website, there might be different entry points for the different situations. Like you can see lifetime Australia, I'm going to show you the example website that there might be different entry points for different kinds of users. Some might be in a very, very emergency or just want to, you can see over here. So this is the website. So someone might be in danger right now. Maybe they want to do suicide or something like that. In life. Danger call triple zero. Okay, So this is a really, really nice way of having different entry situations for each emergency. Now you can see they also have called this one for crisis support. Then you can also text us. So if someone is not in very urgent emergency, maybe I'm feeling anxiety or depression. I can chat with them online just to relax myself. I can text them online. So these are a really nice way of showing different entry points for your different users. Like maybe I have seen logins for, logins for merchants, logins for customers, something like that. Now further you can see they have more entry points. Like you can see if someone is not an emergency and they want to donate or volunteer or help them fundraise. They can go over here. So there are different entry points for different types of users. Really, really nicely done website. I really love it. You can see if the life is in danger. Very clear in the middle top. And also they have this button called. We are here for you chat with us, text us, or call directly. So this is a very nice way of showing a different entry points for different kinds of users. Now, if you have taken my user experience design courses, you already might know about affordances. Affordances are actually how this product is going to work. So affordances have clear labels. There are few things we need to make sure that to build a better user onboarding is having good affordance. So maybe your label shows signup. Signup is an action. So if they click on it, it will trigger an action. Now, if we click on my account, it is basically a noun. So it is a name of a thing. So if you click on it, it is going to show you a navigation. So this is simple. Differentiation between a label having action, verb and label having noun. Affordance is used, metaphors, metaphors as basically. So if this is my wallet and I'm trying to develop an app that is going to be my digital wallet. I may be using something similar to this one. So you have to use it very, very carefully. You can see on the right, there was a very old Microsoft Bob metaphor that actually showed your whole room by clicking on calendar and everything, and it really failed. So you can see what here they have to stop using this. So there was a clock on the wall. You can see there's a calendar and there is your computer, your books on the right. We have a dog that can show some help anyhow, that actually filled. So affordances are based on convention. So conventions means that if something is similar, like pressing a button, we normally operate things by pressing a button like you can see over here, the side button on a mobile phone. So this is actually convention. So use same icons, same, similar things that you, your users are already familiar with. So affordances adhered to the same conceptual model. So make sure your users what they have in their mind. I have a detailed lecture in my user experience design course about these conceptual models and all this stuff. So they should represent the same action. So if I'm thinking that if I click over here, I would go to sign up page. Then I think it should work like that. If I click over there and I went to pay first and subscribe to subscription, that would be a bit of a mismatch with my conceptual model. Now, let's talk about a little bit about information architecture. So if you are developing on user on-boarding, these things are also going to match because they need to figure out how to reach that information. Like you can see different entry points I have showed you on Lifeline. Website. Navigation enables actually users to have offerings, like you can see. I already told you that they can give you multiple entry points to some location. Hierarchy. On the other end is how you are going to prioritize what has the more priority it is going to be at the top or maybe. In the top section of your website. So this is how you develop information architecture based on different entry points. Not there are few more things that are going to have an impact on your user, that is micro copy and your animations. If you have small animations that, you know, that emphasize something like you can see a small micro animation on Twitter's hard. So when you click on it, I really love clicking on it. I enjoyed every time even though I have been using it from past four or five years. So this is also, this also makes sure that the user understand that this is the cause and effect relation. So if I'm clicking Add to cart, the cart just wiggles like this and updates to one or two items. This is going to show me that I have actually added a product to my cart. Second is micro copy. So your labels, your style of writing. It is going to come down your users. So if you want to excite them, are calm them down or you are very serious business or something like that. Let me show you one example app. Let me show you here is an app that is Alan mind. This is to calm down your mind, maybe for sleeping app. So you can see this screen. Welcome to Alan mind. We are so happy that you are here. So actually it is. You can see the whole theme of the app is lightweight or purple light purple color. Mix of happiness and sleep. Sleep, he had something like that. So you can see this is a mental health app. Really, really nice color scheme, the whole theme, and you can see the wording over here. We are so happy that you are here. Now. You can see a balanced mind starts here. A balanced mind starts here. So this is really, really nice way and correct usage of your copy. You can see sign-up to save progress and secure your journal. This is a very nice prompt to help users. Let's, let's see how we have. So you can see this is very, very politely asking the user, like you can see when it first, we're going to go through a few questions. This is a very polite way of asking users. You can see over here on the screen. Then we have, what can we help you achieve field, I'll be happier, more confidence, overcome fear, improve relationships, sleep better. I understand this because I have suffered depression and anxiety myself still, I am a patient of anxiety. So this really matters a lot and it will, your micro copy is going to help you as users build trust and feel more calm, calm mind when, while using your app. Now, helping the users. So where is your help database or help forum or help content? Where it is residing matters a lot. So here's an example of Slack bought. Slack bot is a really nice way integrated help inside the Slack app. If you haven't used it, tried to install it and start using it, it would have a separate like you can see over here, Slack Bot is a separate channel. You can click on it and it will show you and guide you how you can attach files, how you can tag someone in the messages and things like that. So this is a really, really nice way of having an hap, help content integrated into the app. Next is powerful defaults and empty stage. So a lot of times, I think 70 to 80 per cent of time user normally don't change their default settings of their apps. So make sure your defaults are using your app or using your customer resources at the best. And here you can see some of the examples from Greg. Where are your plots located? You can continue over here. So this is a nice way of showing, rather than add your plots over here. So this is very, very boring that you don't have any plots. So rather than having, showing nothing to the user, you can start by saying something like fear or your plants located. Continue. Next is you can see it already had. You can have a customer locations. So it is asking you where is your location or tap to enter custom location. This is a nice way to start or set your defaults. Here's another screen which is showing that you haven't added any activities yet and you can add activity. This is a nice way of showing an empty screen to trigger another action. One way of training your user is pre-populated empty states. So if you haven't used notion, try to install that app are really amazing. App it can do tons of things. People are doing a lot of stuff, collaborating with others, updating tasks, to-do lists and a lot more, even taking notes. So what they do is when you start that ad, they have a built-in prepopulated get started page where they have already have images inserted and some guidance that you can follow along and you can do it practically inside that app. This is a really, really nice way of showing guidance and onboarding to the user by having pre-populated empty states. Now the last one is played through demo plus tutorials. So you can see over here, I have used this app paper by WeTransfer. It is a paid app, but actually what you can do is if you install it on your iPad, you can play through some of the pages. You can get familiar with the app that this is how it will work. And there is a small video which shows along with whatever you are doing. So this is how you can smudge the colors by pressing your thumb or your finger. And this is a very nice way. You have seen this in a lot of games to set. There is a play through demo tutorial in the start of the game. Similarly, you can implement this in the apps. So you can see that we want the user to get a taste of the app, rather than showing them creating your account first or paying the subscription first. And they might run away. You have to show them a playthrough, demo or tutorial. This is all about all the different patterns I have showed you for better user on-boarding or designing a perfect user onboarding that is going to integrate your guidance and help inside that product. Let's move on to the next lesson till then, take care. Bye-bye. See you soon. 23. Setup Wizards for Onboarding User Experience: Let's talk about one more additive guidance pattern, which is setup wizards, and they are just few points you have to keep in mind while designing for setup wizards. First thing is that you have to divide your steps in a proper way and they should be, each has a separate, you would say category or set of instructions or set of fields or whatever you are getting from user. Fewer are better. So if you are designing a setup wizard that has like 15 different steps, then I think user is going to be overwhelmed. You can see on the right we have setup wizard. It says license settings, Account and finish. And it has Back button and forward button or Save button. Now here are a few more examples of setup wizard. Now you can see this is Getting Started Wizard. You might see it when you install something, you can see it has proper tabs and they are actually labeled and there's a small description. Tell us a little about you choose how you get paid. Enabled two main functionality connect to your first server. So this is actually very, very helpful when the user actually knows that this is what they will be doing. On the right, we have another example. We have a lot of steps like 4567 steps. And the best thing I like about it is skipped this step. So if there is a step that is not needed night right now you can let the users skip it. This is a very nice way of having a setup wizard. Make sure you label each step accurately in properly. Now, the last set of visits is show progress clearly so the user should know that this step has been completed. You can see on the right set up a business account has been completed. And this is a G suit setup wizard. And you can see you need to show your progress clearly and let the users start with the left. So maybe I want to set it up later on, maybe tomorrow. So you can see here it says start. So this is very, very clear that this step, you have to start now and you can add different people to your G suit. This is a very nice way of having a setup wizard. And these other things you need to consider while designing for a setup wizard on your onboarding process if you are trying to do that. This is all about setup wizards. I hope you have enjoyed this lesson. I will meet you in another video till then, take care. Bye-bye. 24. UX Design Patterns Affordances Empty States for better user Onboarding: Let's talk about few more creative design patterns we have already seen setup wizard. Now let's see some examples of setup wizards where we have different apps. So there are setup wizards, e.g. setting up your web camera or setting up your security cam. So this is a very nice app Depo. I have actually used it twice to configure my security cam in my office and one at home. So what I like about it is that whenever you start connecting your camera app to your camera, whenever I tap something over here, e.g. I'm connecting it and I press some buttons or some action that camera actually gave me. Why is feedback that your Bluetooth is not working? Or camera connected to your Internet or camera connected to your wifi. So this is really, really great way of having a setup wizard, fear user, get confirmation at every step that this has been done. And getting the confirmation from my device was a really amazing experience for me. I really loved this, this product. I have a great value and I would keep on talking about this tuple camera app. One of the best apps, one of the best setup wizards I have ever came across bravo to this design team. However they designed it. There are three or four steps and you can easily configure your camera and connect it to your device. And it shows blanks green. Once it has been connected and everything is done, It says everything is set up at the end. I think. Next is, here is few more things about setup wizards. Here is a charge Fitbit. If you have some fitness gear, I have I had used Fitbit and it was easy to use. I will share one of my stories about Setup Wizard, which was very, very bad and I regret setting that up and it was very difficult for me to set up. Anyhow, this is fitbit. Few things to note down is applied only to a well scoped onboarding actions. You already know that this is this much you want from the user. This, these are the things you want the user to configure when they start using your product. So apply only to a well scoped onboarding action, a onetime setup. It should be a onetime setup or very complex. Otherwise don't use Setup Wizard. Third is focused on focus on taking actions rather than showing information. So this is really, really important. So we're not showing something. We want user to select something, we want user to configure it. There are a few settings they have to select. They have to take actions, e.g. turn on your phone or maybe press the right button on your watch. Okay, So this is really, really nice. So let me share with you my story of one of my scariest story. Let me see if I can show you the app. Let me show you this is the app. This is the app actually from Canon cameras. Canon camera connect. You can see right now. So I would, I would share the screenshots of this one. Let me take the screenshot now. I would share this in the screen, on the screen. And actually it was so difficult. It has like 7.8 steps. And in a lot of steps, like three or four steps, you always get stuck. And you don't know how to go forward or how to start over again. So I had to start it over again like four or five times to figure out that this is what I'm doing wrong. So this is how you should, your, your, your setup wizard should be so easy and so easy to configure and so easy to resolve if some problem occurs. Here are a few more patterns. One is emails. Emails should be action-oriented. You can see over here on the right, there is a welcome email message from Stan and you can see once you sign up, it says watch. Now, this is how you integrate guidance by emails sending them just one tip how to use it. I get emails from Figma and few mother are few other apps I use regular emails just showing a bite-sized information on how to do or accomplish this or some features Albert learned how to use that feature. Just a small tip. Okay. So one more thing is that don't send additional on-boarding e-mails without the consent of the user. Sometimes when you sign up, you start getting like three or four emails, even if you haven't used that product. I remember that I signed up for a product app and I was I just signed up and I didn't use it for three or four days. And when I opened my email, I got like four emails that how to get started. Okay. That's fine. Now next was how did you like our app? I haven't even use your app yet. I haven't opened any e-mail from you and I got like four emails. This is a bit alarming. You can see over here, do not send additional on-boarding e-mails that reflects recent user activities. Okay. So do send those end. Okay, So this is good that it shows that you have completed this task. Bravo. Okay, that is good. I'm getting updates or your your setup is complete with our website or app, something like that. This is good. Okay, So don't mix marketing with your onboarding. So don't send a promotional e-mail right after someone signs up. This is not a good thing if it is a product. Now one more pattern is push notifications. Push notifications are great way of showing user updates or maybe triggering action. Now take your next steps, something like that. But they should be not just the informational kind of patterns, they should be action taking push notifications. So if I really need my user to take some action, then I'm going to send them a push notification, maybe update your app because your account has been outdated or we have added new features. So update your app. Now, this is an action-based push notification. Now the next additive pattern is text messages or SMS. I have seen a lot of apps using that. And they should be, they should be very wise use of this one because they would be considered deceptive and they might get into the spam. So most of the phone carriers, they might trigger them that this is spam, e-mail or span, spam SMS, e-mails and SMS. They actually share the same fate, which is the disrupt. And actually they might get into spam AD. So make sure you are using, are showing whenever it is very necessary. Like you can see the Safe app, the sand user text message of the location. This is a really, really nice feature and they might need it when they are out of their location or somewhere there where the Internet is not working properly. On the right, you can see why Zap, I have used it many, many times. Whenever someone logs into our HIV, I have security issue or I get a payment, I normally receive a text message or push notification that you have received your payment in your y's accounts. Why is this basically a transfer bank transfer? A company where you can actually open up a bank account with your bank account and you can send money across on the group. Okay, Now here is the time where I should sum this whole additive guidance pattern thing. And there are three or four things you need to keep in mind. First is that your product baseline or your product base, whatever you are building is going to be the real guidance. So you have to integrate your guidance, your user onboarding, into the product baseline design. So this is, this is really, really necessary. Second is that use adaptive UI design patterns, e.g. inline cues, hence, everything that but make sure you use overlays and all those stuff very carefully because they might collide and there might be some problems. Don't overuse it. And maybe you can show some new feature, new support, new, new usage, new code concept to user by showing all these additive patrons. Last is that if you want to give supplementary helped to your users, you can use text, SMS, push notifications and other health forums or something like that. But made sure user can unsubscribe from email notification from SMS. They can also turn off the push notifications on their mobile phones. So this is all summing up the additive design patterns. I hope you have enjoyed this lesson and learned a lot about user onboarding and all that complex user experience stuff. I will see you soon in the next video. Till then, take care. Bye bye. 25. More on Additive Guidance Patterns: Okay, now in this video, I'm going to share with you two of case studies which I actually designed. So I wanted to show you some actual design or app, actual implementation of how you can improve user experience of an onboarding while onboarding or use user. So if you are trying to build something, I'm going to share with you two actual examples of two apps which I actually did. One app is featured on App so more. So here is one AP 2 min report. I actually did the onboarding experience for this app. This is a popular app on App. So more you can see 51 reviews. And here's all the different things, different screenshots. So first I will share this one. So this is the actual design. Let me zoom in a bit. So let's zoom in. Okay, so this, this, this was our starting screen. They had like four or five or six questions in the start. Two, you can say just to customize the experience of the user. So I reduced it to 33 questions. I said that three is more than enough. Three to five, I think is more. So as many less questions you have, you can see I also wrote 2 min to customize your experience just to make sure that user is going to be thinking that this is going to take just two or 3 min. One drop-down, one question. And how many people in your team? And then we actually went to, let's get started. And you can see over here, this is the step one. So I actually desire, this is actually a onetime setup for the first user because they wanted to get the data source or data from Google, Facebook or other apps. So they had to create some report for that. So to do that, they had to select a data source. So before that they had like 15 data sources running around down the page. And I said that if you have too many options, either you should use two or three popular options at the top. Just display the popular option and then everything else at the bottom. Or you can just have a drop-down where you can. User can also search. So a drop-down where user can also search with the icons. So if the user clicks over here, one more thing is you can see over here on the right, it says, I need help. It's a global Help button. Or you would say there was a Help, Help icons, inline overlays, whatever we hold them. This is going to be sticky everywhere and it is going to, whenever a user clicks over here, it will pop out the Help button or help information. So global health, and then we had this next button. And then you can see over here drop-down research options. So user can also type over here Facebook or anything, and they can select the data source. Okay? So I have also used these. This is a very nice plugin or Figma. So I use this one. Okay, so the user select, Shopify, select Next Global Help button. You can see over here, I have also showing what I actually use these. Then you can see here we have the data source name and everything. And once you click on Save few options just to have this Configure Options. Data source name use datasource, config. And you can see these are few sections. Once you configure all these, you can see we have checkmarks on top of everything. And the next step is that you are going to get the templates that are ready to import your data. So you can see this is you can either create a template from scratch or you can use any built-in template that is only for the option you have selected. So if you have selected like Facebook over here. So if you have selected Facebook ads, then we are going to show only the Facebook templates over here at the end of the configuration. Before this, they were showing like hundreds of templates over here. And I think for four different reports and I think the user might get confused. So we limited the options and we actually customized the expedience of onboarding according to the user's selections and whatever choices they have made. So this is the first, I would say, onboarding experience. I'm really proud of this. This is a really simple and easier way to configure the 2 min reports. So that is why it's name is two-minute supposed to wear because it takes 2 min to figure out and configure everything. So let's try to zoom out a bit to show you the whole page. This is the first one for step one. So here we have everything moving around step to selecting data. So step three, everything is configured and start using your template. So this is how we actually design the onboarding experience. Before it had a lot of different options. It was not configured in a good steps where we actually divided this whole section into three steps. And we kept it flow from left to right, going it easily from left to right. Now let me show you one more app I actually designed. So here is a prototype, very simple, very basic for Aladdin app, which was a Sofar configuration app. Let me see. Okay, so you can see over here, these were the actual designs. Let's zoom in. You can see over here, this was the actual design of a pad that actually comes along with your device. That was a manual device setup, not the mobile app. Similarly, their mobile app before was this one. No indication of what these icons are, what these icons are, or settings are very difficult to understand what is happening over here. Also here you can see it doesn't show what is happening. I'm going to share with you how we actually managed to design this app and what we have used to for better on-boarding because most of the users, they was using this document to configure the sofa and connected to Bluetooth. So what we did over here, so you can see, let's try to hide this. And let me zoom in a bit. You can see we actually did, is first step was connects your sofa. So this was the first step. So this is again a wizard offer connecting your so far to your Bluetooth. And then you can see we ask the permission to Bluetooth turned on. If it is off, then we actually showed them to name your sofa or name your device. Very easy. Once they named it, you can see we actually showed them different sittings as seeds, all the seats available. Now you can see it says now connected, connected status was there. Then you can also name your seeds. You can select the seat and name it. Maybe. I'll say mom, my mom said Uncle D, Daddy. You can see over here, this is how we did. And this is how we actually customize everything, then you can also select. This was my idea to have four memory positions. You can have different positions for anyone's liking. You can just this is the leg space for leg area and this is the head headset headrest. So I actually proposed that Mercedes Benz had this function of knobs to adjust their seats in their cars. So why can't we have something like this for every seat? So you select the seat from here. Select any seat, e.g. you can see now daddy is selected. You can use this. I'm your finger and move it up and down. So if you move up or down, you can see it leaves a trail like this. So this was, you can see, just saved. This was my idea of having this whole user experience. So this is, this is a nice example of having a flow which is customized to users needs and what they really want and simply and easy to configure. Now the actual screens after that, what this one, Let's zoom out a bit. This was my screen which I designed. Now you can see the icons are more. I actually use the same icons users we're already familiar with. So this one was, I think I even don't remember it now. That's why I told them to have label it. But I think it was heating for all the all of them. Sorry. Recline all of them. So close everything on the sofa to the default state. This is for the single seed and this is to turn on the heat. This is for changing the seating position for the leg and the top. The prototype I showed you was the final idea. This was in the start. So if the if the seat is reclining or has started moving, you can stop it. This button will appear and you can stop it from here. Now, from user onboarding process. If you are an old guy like me or maybe my father, or like a 70 years old guy. And you are unable to understand how to connect your. So far. We actually integrated the whole manual of the sofa into our apps. So you can see here we have the help. There are different pages, different sections and steps to connect your so far. So you can see it shows connect step one where you are going to connect your sofa. So this whole idea of having the help build inside, integrated inside the app was a really, really innovative idea at that time. I think we decided in 2018. At that time, I don't think that most of the users are most of the apps. They were thinking about user onboarding like this way. So we actually build the help or the whole setup manual inside the app. So this is the two apps I just showed you. 2 min report. We built this and I built it actually and the second one too. So if you have any project in mind or if you want to discuss anything you want to get designed your apps. Onboarding experience, you can also contact me via different social media platforms. I'm going to share the links. I hope you have understood and learned a lot with me how we are going to improve the on-boarding user experience. I will meet you with a lot of more new things till then, take care and bye bye. 26. Let's work on Scaling Guidance: Now in the end, we have developed everything. We have designed our on-boarding guidance, integrated guidance and everything. But the last thing we need to consider is scaling guidance. So whenever you have designed an odd ball onboarding experience or anything you have, you need to think that this is going to expand, your product is going to evolve. So does your guidance. So make sure that you are evolving and you are making more use of new features, introducing new features, new things by updating your guidance and everything. There must be a separate team to handle guidance and integrating onboarding experience. Now whenever you will be designing or making your onboarding experience, one thing is that you have to document your decisions. On the right side you can see an example of codes usage state coaches are routines and two situations prioritize onboarding actions and to situation to prioritize onboarding actions. So you have to document that. You have to keep the documents in your, in your design decisions and make sure that you update them regularly. Now here are a few key guidelines on how you have to implement guided interactions and enjoy our updating product. Fastest, evaluate you and I traits. So you have to keep on improving user experience, usability improvements by getting feedback from your customer service or whatever that department you are working with to get customer feedback. Then second is a wide so like a silo siloed on-boarding, it means that your onboarding should not be isolated from your product. It should be integrated inside your product. Third is standardize your designs and the pattern library you can see on the right, golf.uk have a design pattern library and you have to standardize everything to avoid further problems. Distributed ownership. You have to provide ownership of your onboarding experience to a whole team. They have to develop this. You have to give the ownership to others. Don't think that you are the only one who will be designing onboarding experience. This is going to be the whole team. Next is product or service updates. Whenever you get product or service updates, you have to update your guided interaction with it. Next is product redesign. If you have some major redesign, your operating system of your mobiles or whatever, it has been upgraded. Like you can see Windows 1011. You have to update your app, you have to redesign your guided interaction or onboarding experience. Reporting labs, labs, choosers. So lapsed user means that the users that have, haven't been using your app maybe from past one year. And suddenly they switched back and they reactivate your account, you have to reward them. So again, so make sure you keep this in mind too. Here's an example of simple guided in interaction. There is a new thing that actually introduced, which was this, this pattern side is officially opened for business, so they introduced it. And you can see over here that they have an inline prompt, a free trial, and follow-up confirmation message. And next steps, everything is over here, so we have a prompt on. This is actually a confirmation message. View your new side, this is the follow-up or what you can do Next. And keep editing is if you want to keep on editing your page or pattern, whatever you are doing for your business. So this is a nice way of having a guided interaction integrated into your whole app or system. So basically this, the inland prompt is not here. You can see in line prompt that guide is using to free trials. So this is actually a free trial of a new design pattern or new feature they have introduced. And there's a follow-up message over here. And it also suggests next steps. So now I'm going to sum up this whole thing. We have learned everything guided interaction, scaling our design, scaling, our guidance, and all that additive guidance patrons, I hope you have enjoyed this course and I will meet you with new information. Keep on meeting you with new information, with new user experience design stuff and a lot more. Make sure you check out my other courses and my other design and user experience related courses. Till then see you soon and meet you in another video or goals or less than take care and bye bye. 27. Thanks You and Whats Next: Thank you for taking this class and I hope that you have enjoyed and learned something valuable from this user experience design for onboarding class, I will meet you in other classes. So make sure you learn a lot from other user experience and design courses from me. Now, the thing is that you can follow me on different social media platforms. I'm going to show the links over here, my Twitter handle, my Instagram handle and all that stuff. And I will keep in touch. I mostly reply to students when they send me a message on Instagram or Facebook or anywhere on YouTube, I mostly reply to all the comments. So see you soon there. And we will keep on meeting and learning new things together. Till then, take care and bye bye.