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.