All language subtitles for 16 - Sketching User Flows 3

We're back in concepts on my iPad and we're going to be sketching navigation schemes.

Now navigation schemes really help you figure out which options your users can choose, the directions

they can move in, and various parts of your product.

It helps to define your navigation and the hierarchies within.

I always do this at the beginning and it really helps influence my user flows later and my site maps.

Basically, this is the structure of your product.

So what I like to do is let's just title this quickly.

So number three is a different type of flow and we're going to call it structure.

I like to call it structure.

There we go.

So number three.

Now, what we're trying to do here is we're really trying to think about navigation schemes.

We're trying to think about that structure of our product.

Sometimes I start thinking about the different types of screens that we actually do need.

The one screen I know we need and that we've actually had sketched a couple of times is our home screen,

that main screen that somebody comes to.

So when I think about the home screen, I'm thinking about like maybe like a welcome message on top.

Maybe there's like a profile image, just different things like that.

I mentioned certain things like having like product images at the top so we can start thinking about

that a bit more and what that could look like and what that experience can feel like.

Maybe there's some deals at the bottom.

But I do know that there is some sort of home page, so we can kind of create a little icon here.

Now, when I think about a user moving through this app, maybe they have a saved page as well.

You know, sometimes we don't want to buy a product right away or we're waiting for a sale and we just

save it to some sort of wish list or something like that.

So let's have a saved page.

I think that's a really smart way.

We're allowing users to keep track of their products.

So maybe there's some text there.

We have some sort of persistent UI or navigation at the bottom.

And over here, it could be something really simple like.

Just a list of products that they have.

With some details.

Maybe there's a call to action here that add it to your cart and buy it right away.

Maybe this is sink to some sort of notification like when a product goes on sale.

But we can start thinking about like we we have a home page and maybe we have like a saved page as well.

I do know one thing we do need for sure.

That is a cart.

And we need to make that much more prominent because if a user adds something to a cart, we want that

to be right at the bottom or right in the place where a user can see it and click it easily and notice

that maybe there's a notification there.

So let's create like a little card screen.

And now I'm starting to think more about that hierarchy.

I mentioned it a little bit in the last video, but maybe there's a button at the bottom.

And if you notice, like we've had a persistent bottom navigation over here and over here, and what

we've done is we kind of switch that up a bit at the bottom here.

Now we have a button that links them to the checkout process.

And it'll allow them to easily tap that, especially on mobile and especially using that kind of design

pattern.

We're allowing them to click easily and then putting the option to go backwards up top, which is a

little bit more harder.

But if a user is going to cart, my assumption at least is that they want to check out, you know,

review their products, checkout quickly.

So we want to make that experience really quick.

So we have several navigation pieces over here.

Cart could live in here as well.

Let's draw a little cart.

That's going to have to work.

So now we know some basic navigation pieces that we like.

Now we can start thinking about, like our home screen a little bit more.

So if we redraw it here.

See about making your sketches messy.

I mean, it doesn't really matter about the details or too much.

Those start to kind of come naturally later on.

If I start thinking about where these different things lead, I can start thinking about the structure

of our whole product.

So I know that there's a home page and that's the first layer.

This is layer one, but on layer two.

I can actually go straight to a product page.

So I know that's a layer, too.

And from there I can go into check out.

So I start thinking about different ways I can prioritize certain tasks that are really important to

a user and really important to our business schools.

OC There's our cart.

But now we start thinking about that.

We can also start thinking about, well, what happens after this scenario?

You know, a user has gone through the checkout process and they get that nice happy screen and their

item has shipped.

Well, don't you often keep track of your orders?

I know I do, but we can test that assumption later.

Maybe there's a different navigation piece.

You know, we talked about a profile.

The profile button at the top.

And maybe that leads to like a user settings page or like your current orders.

But it doesn't seem like that is prioritized and maybe that should be prioritized.

So maybe we could create an order screen.

So if we go back up.

Maybe there is an order screen.

And let's draw that up just quickly.

Right here, we can start thinking about maybe you can search your existing orders.

I'm not sure if that's a feature we would build right away, but we want to build like that most the

minimum viable product, the pieces, the features that users really want right away.

So if we think about what you would see on an order screen, you'd probably see your products that you

ordered their details and maybe the status.

There's multiple statuses that we need to think about, and this is what I mean when we're talking about

the different requirements that just naturally surface when we start thinking about different components

on a page.

Right here.

This could be a product that has been shipped and there's like a map with a tracker that's like pulsing.

You start thinking about things like motion a bit.

Maybe over here this is a delivered one.

So we could start thinking that we have maybe a fourth navigation piece.

I would argue that, you know, your search is a part of your navigation because it's a very prominent

feature for a product like this.

Being able to search and find products is so important.

So from here, what I would naturally do is I would start kind of sketching a little bit more screens,

thinking about how these different screens link together.

I would actually start building some sort of like mini site map, so I know that home.

Is like my ground zero and from home.

If I move over, I get items.

The product description I can get to.

What else can I get to?

I can get to, like, a category possibly.

So let's write that in.

And you know, there's other things.

So this product is about personalization.

Maybe there's like an interesting portion about like interest.

Maybe that's front and center on something like product like this.

So maybe there's like, I don't know, a component around interest.

So I start thinking about these types of navigation trees.

We can also think about Saved as well.

We created a safe page.

So if I make a little box here for a saved and I go down.

I can start thinking about where saved actually leads.

I know I have products.

I can go to an item description page and that obviously can lead to the cart.

This isn't an entirely complex product, but it's a lot of different ways you can find certain pages

from Saved.

I could probably go directly to a checkout.

That would be awesome, especially if something comes up as like on sale or like.

Yeah, like a flash sale.

That would prompt a lot of people to probably just bite the bullet and buy what's in their wishlist.

Maybe we have other items.

That are relevant to them.

And whatever's in their wishlist.

Maybe if they have something in relation to shoes, maybe there's another pair of shoes that we can

kind of push to them and hopefully they'll choose those pairs.

It really depends.

So we can start thinking about this navigation tree, which will definitely affect how we build out

our site maps.

So that's how you can take an approach at sketching navigation schemes.

It's really easy way to just kind of get that over view of your application.

I mean, we just kind of scratch the surface over here, but I urge you to kind of go back.

You know, you don't necessarily need to copy exactly what I did here.

Like I said before, use what you think is best.

Whether that's like paper, do it digitally, refine them, ask questions constantly.

Never stop asking questions because you'll find different roads like we did.

And that's navigation schemes.