Hello and welcome back.
We're going to talk about creating our very own user flow for onboarding.
So on our last video, we sped up our workflow a bit and now we have a bunch of different components
that we can just plop into our designs really, really easily.
And we're going to use those to just kind of signify fields text.
And we can work out those details just a little bit later.
But we really want to understand what users need to click, what they need to do, what they see and
what gets into the next step.
I think for the first user flow.
We should probably do something like onboarding or those very first screens that a user sees when they
first come to our product.
We really want to make a great impression and we want to push them into the funnel of registering and
telling us about their interests.
So let's actually do that right now.
So what we're going to do is we're going to press F and we're going to create a frame.
It doesn't matter which size.
I like to have a big canvas to work with because, you know, we did actually show a couple of those
that went beyond three steps, but I think we're going to probably go to four or five steps, and that's
totally fine.
We're going to keep it simple.
So we'll call this on board and flip.
What we're going to do here, if you notice that we have our assets and layers tabs, so if I go into
assets, I can go into our local components and I'm going to go into user flow, demo into their components
screen right components section, which is actually this frame over here.
And I can start pulling components from there into my user flows.
So what I do is I'm just going to grab that screen background.
I'm going to grab this as well.
I'm not sure what else I'm going to grab right now, so let's think about this flow.
So step one of creating a user flow is to have a title.
So let's think about our title.
I tell should be what do we want the user to actually accomplish during the onboarding?
I want the user to register with our product.
Can.
I like to keep things really neat.
I like using this font, Gilroy's really nice font.
Well, let's just set the.
OK, that's it, order for now.
So we want to our user to register with our product.
Step one, when they come to our welcome screen, they should probably see something like.
I don't know, like a welcome band or maybe a button, probably see some text to some welcome text.
That's just saying, hey, welcome to Habitual, we are an awesome product and you should totally register
with us.
If we think about this a little differently, we'll notice that there is probably a decision moment
here, we shouldn't force the user to register.
We could probably give them the option to skip and go right into our product.
And we can handle that later.
But we should probably just.
Have a screen down here as well.
And maybe we'll have like this can signify some sort of like Skype text.
Oops, I didn't actually make a smaller one.
So what we could do, we can duplicate this.
Going to our stroke.
We're going to say none.
And we're going to save around.
On our cap ends that way, we have a nice kind of hill looking cap.
And there we go.
Let's actually open this up just a bit.
So that way we have a little bit more breathing room, because we're gonna have to right underneath
these, so let's open up our frame.
Like I said, like the size of the frame doesn't really matter.
I know you can clean that up just later.
Right now, I am focused on creating a good flow.
OK, so what will group these actions go to our last panel.
So let's do Comen Z just to show you what just happened there, will select both of these since there
are instances of our initial arrow.
So we want to actually disconnect that.
So what you can do is you can right click and you can detach that instance or you can select them and
click option command and B and you'll notice that they're both frames again.
And if we do option command K now we can name the second arrow.
And we can copy that and paste it and take this and put it into our components file up here.
So now we have another component to use.
OK, so now I know that step one.
Well, that's right.
Step one.
And let's make that smaller.
And let's start writing a little bit of a description for it.
OK, now we have our text perfect.
So what we can do is our description should be something like.
What is the policy and what do they do to get to the next screen so user arrives are welcomed screens
and notices a button to proceed forward for registration.
This text is a little too big, we can pump that down just a bit.
The user is also able to practice a second paragraph.
The user is also able to skip this step and go straight to our home page.
So now we know what the user can do on step one.
And what they can do here, so I know that step one, I'm going to be able to click this big primary
call to action and go straight to the registration or I can avoid that and skip it.
And I'll eventually have to register once I check out.
But I can go right into the home screen and we can give them a little bit of a teaser on why our app
is so great.
So step two, what happens on step two?
So step two, we're not going to really focus on the actual home screen right now, but we're going
to focus on step two.
And step two should be something like the user starts the kind of the registration process.
So maybe it's like the user is prompted to add their email and password.
They can confirm those details and proceed.
OK, so let's just build that out really quickly and use the assets tab right here.
There is probably.
This should be.
Let's go back to our component's page so we can just fix that really quickly.
So another interesting thing you can do here is you can right click and go to the master component and
over here.
022 is like top.
Bring that right in and now.
We can select top and bottom, so perfect.
Let's go back to our float so we have an input, we have a couple of inputs.
And we have a primary in.
Great.
OK, that's up to.
Now, step three, what should the user see, the user should probably see a step to add their photo,
possibly so we can.
The user can add a photo or skip that step.
So we do want to make this registration fairly easy.
So the ability to actually skip the step is kind of key, especially here where a photo isn't necessarily
needed.
So we'll just write that in and you'll notice the way I'm actually writing.
It's not really friendly.
It's kind of extremely logical.
And the reason why I'm doing that is because I really want people to understand and be able to kind
of read this once.
And it's kind of like a manual or a blueprint in a way.
I really want them to understand it at first glance.
So that is step three step for now.
We probably get into some more interesting things like actually adding their interests.
So step for the user can know the user can now pick interests and hobbies to personalize their shopping
experience.
So this is probably like headline.
There's probably some text here, there's probably a bunch of little buttons, like little pills or
checkboxes that they can take off, so it's but a headline up here, SkyBitz and text.
Maybe there's a series of checkboxes we can actually just modify these if we want to speed things along.
OK, so now they are prompted to actually pick their interests and hobbies to personalize their experience,
and the next step is what's the next step?
Be here.
So they pick their interests.
They've possibly uploaded a profile.
You know, maybe we're missing a step here.
And that's totally fine.
We can review these.
I often just go back to my team, just get some insight on what they think of our current flow.
So you should definitely do this, not necessarily in a silo.
Get some feedback really quickly.
We're going to end our fall right here, so step five, success, the user has registered for the individual
product and can now access all of our features.
So essentially.
The user will see a success screen, maybe it is this little ball, maybe it's some, like, welcome.
Screen text that we use there.
That is perfect, and that's it, that's essentially our user fee for onboarding.
It's really detailed.
We understand the actual purpose of the flow.
We understand that there's a possible break here and we need to think about what that looks like for
the user.
We started building out these steps a little bit more in thinking about them, that this is a pretty
linear flow right now.
There are some moments where the user can make a decision like over here, they can actually just you
know, they can skip a step.
Now, we're starting to think about all the elements that are going to be here as well.
If you have more refined sketches, you can actually start wireframe.
And at this point, there really is no right or wrong way to do this.
I like to think about this very conceptually.
So I'm not really worried about, like, the visual design or anything like that just at the moment.
But I do know that I'm starting to think about this from a user's perspective and what they should be
seeing and what they should be doing at each step.
So this is our fault for registering with our product.