All language subtitles for 15 - Sketching User Flows 2

Welcome back.

And we're going to jump right in to sketching more flows.

This time we're going to focus on screen flows.

Now, here, you should really focus on a user's actions through a specific flow.

It could be a small sequence, a sequence of screens, or it could be a journey that branches.

So let's think about our client again.

This could be a user who actually searches for a product.

So let's get in there.

So I'm just going to just title this.

I mean, it's really hard to kind of draw on this tablet, but I'm not going to really title everything

we can just say, like.

Search.

Zoom out.

And what we're going to do is we're going to just draw a frame here.

Perfect.

Once again, not really worrying about the details here, but we're going to just focus on how does

a user complete this flow properly?

How do they achieve their goal of finding a product?

I'm going to do is I think they'll come to the home page and they may access our search bar.

There may be a navigation.

I'm not sure what those navigation items are just yet, but this is what the make up of the page is

thus far.

After they interact with that.

The next sequence is a user sees results.

So.

Pardon my messiness, but that's okay.

So they'll see some results.

And over here we'll have some images.

I know that there's going to be some sort of content here, and this is going to really help me start

building some sort of requirements that I need to account for when I'm designing elements.

So like, I know that there's these cards that have an image, they have some text.

I'm not sure what that text is.

It could be a product name, it could be a combination of that plus price plus other elements.

But I do know that when they do click over here in this area.

We're going to move over.

Step three would probably be something like a product description.

So we'll just write item.

So I mean, you don't need to copy exactly what I'm doing.

I really urge you to think outside the box, take some time to just sketch out.

I mean, you can use a tablet, whatever really works for you.

The item description.

I'm starting to really think about some of the content that's going there.

It could be like a name.

Let's get in there and start writing a little bit of content.

Price could be over here.

There could be like options to change color.

I'm not sure exactly, but there's some text and then maybe there's like a button sticky to the bottom

that's just like add to cart.

Just double tap with two fingers in concept and you'll be able to actually just go back.

So if I go like this double tap, perfect next step, they've clicked that button.

They've added that to their cart.

Step four.

Actually, you know what?

If they add that to the car, they found the item.

They'll probably just go to the car and we'll end the flow right here.

I think we can actually start thinking about alternate scenarios.

So they've added their item to a cart.

Perfect.

And maybe there's a checkout button.

Over there.

Another interesting thing is we start thinking about different things like hierarchy.

So if navigation sticky to the bottom, maybe we start using that for primary buttons and start sticking

other things to the top, which are a little bit more harder to access on mobile.

Just different things we're starting to think about in terms of page hierarchy.

It's really going to help us influence like ways we start building site maps and actually start building

that page hierarchy.

Let's think about different alternate flow.

What we know here is that we made the assumption that they're going to come in and they're going to

click that search bar.

But there's other ways to actually find a product.

And this is where we can start thinking about other ways to make this process a little bit easier.

So we'll label this one and we'll just call this home.

But weapons, if we really think about like placing products strategically there.

Products for our user.

So we do know that the application that we are building is for a personalized shopping experience,

like a really personalized shopping experience based off of their habits, based off of their interests.

And we can really push items at the front and really hope that these users will go down that funnel

instead of actually just searching.

We want to make this experience much more enjoyable and more catered to them so we could really take

advantage of that.

So we'll start thinking about maybe there are images here.

Of products that they could like or products based off of their interest, products that maybe they're

in their wish list and are on sale.

So we start thinking about these different types of scenarios.

It looks like enough.

I just fix that.

So if they do come to the home screen, they could actually tap on one of these products here.

And if they do.

The next step in their flow would be to actually go for the item description page that we actually built

over here.

So we start thinking about all those different scenarios and look at that.

We already kind of came up with a little user flow and an optional user flow.

We should always think about more than one scenario when we're building something like this, because

there always is more than one scenario and one route to get to a certain page or reach a certain goal.

This is really going to help influence our page hierarchies, like I mentioned before, and site maps.

That's how you draw screen flows.