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.
OK.
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 the structure of our product sometimes to 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 with our home screen that their 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 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 like 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 of 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, you know, added to your car and buy
it right away.
Maybe this is linked to some sort of notification, like when a product goes on sale, but we can start
thinking about like, OK, we we have a homepage and maybe we have like a saved page as well.
I do know one thing we do need for sure it not is a cart, and we need to make that much more prominent
because if a user add something to a cart, we want that to be right at the bottom or right in place
where a user can see it and click easily and notice that maybe there's a notification there.
So let's create like a little card screen and then 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 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 the user is going to cart, my assumption at least is that they want to check out, you know,
review their products, check out quickly.
So we want to make that experience really quick.
So we have several navigation pieces over here.
Car could live in here as well.
Strong little Curt.
That's going to have to work.
OK, 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 like if we reach right here.
So you 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 homepage and that's the first layer.
This is layer one.
But on layer to.
I can actually go straight to a product page.
So I know that's on there to and from there, I can go in to check it.
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.
OK, 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 little profile button at the top, and maybe that leads to
like a user settings page or like your current orders.
But doesn't seem like that is prioritizing, maybe that should be prioritized.
So maybe we could create an order screen so 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 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 is 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 nap 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 in 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, you know, sketching a little bit
more screens, thinking about how these different screens linked 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 you, I can get to like a category possibly.
So let's write that in.
And, you know, there's other things.
OK, 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 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 save page, so funny 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 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 there, which lists, maybe if they have something in relation to like 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 on our
site maps.
So that's how you can take an approach that sketchy navigation schemes.
It's really easy way to just kind of get that over view of your application.
I mean, we just kind of scratched 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 routes like we did.
And that's navigation schemes.