1
00:00:00,650 --> 00:00:06,320
We're back in concepts on my iPad, and we're going to be sketching navigation schemes.

2
00:00:07,310 --> 00:00:12,260
Now, navigation schemes really help you figure out which options your users can choose, the directions

3
00:00:12,260 --> 00:00:14,480
they can move in and various parts of your product.

4
00:00:15,080 --> 00:00:18,120
It helps to define your navigation and the hierarchies within.

5
00:00:18,500 --> 00:00:23,880
I always do this at the beginning, and it really helps influence my user flows later and my site maps.

6
00:00:24,540 --> 00:00:26,660
Basically, this is the structure of your product.

7
00:00:26,670 --> 00:00:30,860
So what I like to do is let's just title this quickly.

8
00:00:31,850 --> 00:00:36,210
So number three is a different type of flow and we're going to call it structure.

9
00:00:36,890 --> 00:00:37,850
I like to call it structure.

10
00:00:39,440 --> 00:00:40,250
There we go.

11
00:00:41,010 --> 00:00:41,360
OK.

12
00:00:42,510 --> 00:00:47,340
So number three, now, what we're trying to do here is we're really trying to think about navigation

13
00:00:47,340 --> 00:00:51,510
schemes, we're trying to think about that the structure of our product sometimes to start thinking

14
00:00:51,510 --> 00:00:57,060
about the different types of screens that we actually do need, the one screen I know we need and that

15
00:00:57,060 --> 00:01:01,710
we've actually had sketched a couple of times with our home screen that their main screen that somebody

16
00:01:01,710 --> 00:01:02,220
comes to.

17
00:01:03,790 --> 00:01:08,410
So when I think about the home screen, I'm thinking about like maybe like a welcome message on top,

18
00:01:08,420 --> 00:01:12,910
maybe there's a profile image, just different things like that.

19
00:01:13,120 --> 00:01:19,690
I mentioned certain things like having like product images at the top so we can start thinking about

20
00:01:19,690 --> 00:01:23,770
that a bit more and what that could look like and what that experience can feel like.

21
00:01:24,640 --> 00:01:27,330
Maybe there's some deals at the bottom.

22
00:01:29,160 --> 00:01:35,160
But I do know that there is some sort of home page so we can kind of like create a little icon here.

23
00:01:36,750 --> 00:01:44,350
Now, when I think about a user moving through this app, maybe they have a saved page as well, you

24
00:01:44,370 --> 00:01:48,930
know, sometimes we don't want to buy a product right away or we're waiting for a sale and we just save

25
00:01:48,930 --> 00:01:52,280
it to some sort of wish list or something like that.

26
00:01:53,070 --> 00:01:54,840
So let's have a saved page.

27
00:01:55,020 --> 00:01:59,780
I think that's a really smart way of allowing users to keep track of their products.

28
00:02:00,420 --> 00:02:02,140
So maybe there's some text there.

29
00:02:02,790 --> 00:02:06,950
We have some sort of persistent UI or navigation at the bottom.

30
00:02:08,110 --> 00:02:10,600
And over here, it could be something really simple like.

31
00:02:11,750 --> 00:02:14,000
Just a list of products that they have.

32
00:02:15,180 --> 00:02:22,080
With some details, maybe there's a call to action here that, you know, added to your car and buy

33
00:02:22,080 --> 00:02:22,820
it right away.

34
00:02:24,300 --> 00:02:29,670
Maybe this is linked to some sort of notification, like when a product goes on sale, but we can start

35
00:02:29,670 --> 00:02:34,640
thinking about like, OK, we we have a homepage and maybe we have like a saved page as well.

36
00:02:35,600 --> 00:02:41,780
I do know one thing we do need for sure it not is a cart, and we need to make that much more prominent

37
00:02:41,780 --> 00:02:47,930
because if a user add something to a cart, we want that to be right at the bottom or right in place

38
00:02:47,930 --> 00:02:52,490
where a user can see it and click easily and notice that maybe there's a notification there.

39
00:02:54,550 --> 00:03:00,200
So let's create like a little card screen and then I'm starting to think more about that hierarchy.

40
00:03:00,250 --> 00:03:05,020
I mentioned it a little bit in the last video, but maybe there's a button at the bottom.

41
00:03:05,470 --> 00:03:10,270
And if you notice, like, we've had a persistent bottom navigation over here and over here.

42
00:03:10,540 --> 00:03:14,560
And what we've done is we kind of switch that up a bit at the bottom here.

43
00:03:14,590 --> 00:03:19,840
Now we have a button that links them to the checkout process.

44
00:03:20,860 --> 00:03:26,550
And allow them to easily tap that, especially on mobile and especially using that kind of design pattern,

45
00:03:26,920 --> 00:03:34,180
we're allowing them to click easily and then putting the option to go backwards up top, which is a

46
00:03:34,180 --> 00:03:34,890
little bit more harder.

47
00:03:34,900 --> 00:03:42,240
But if the user is going to cart, my assumption at least is that they want to check out, you know,

48
00:03:42,250 --> 00:03:44,150
review their products, check out quickly.

49
00:03:44,380 --> 00:03:46,830
So we want to make that experience really quick.

50
00:03:47,620 --> 00:03:50,200
So we have several navigation pieces over here.

51
00:03:50,650 --> 00:03:52,410
Car could live in here as well.

52
00:03:53,650 --> 00:03:54,710
Strong little Curt.

53
00:03:56,270 --> 00:03:57,300
That's going to have to work.

54
00:03:57,320 --> 00:04:03,140
OK, so now we know some basic navigation pieces that we like, now we can start thinking about like

55
00:04:03,140 --> 00:04:07,340
our home screen a little bit more so like if we reach right here.

56
00:04:09,610 --> 00:04:12,000
So you about making your sketches messy.

57
00:04:12,100 --> 00:04:18,040
I mean, it doesn't really matter about the details or too much, those start to kind of come naturally

58
00:04:18,040 --> 00:04:18,640
later on.

59
00:04:19,720 --> 00:04:25,120
If I start thinking about where these different things lead, I can start thinking about the structure

60
00:04:25,120 --> 00:04:26,250
of our whole product.

61
00:04:26,500 --> 00:04:29,320
So I know that there's a homepage and that's the first layer.

62
00:04:29,830 --> 00:04:30,880
This is layer one.

63
00:04:31,630 --> 00:04:32,650
But on layer to.

64
00:04:34,630 --> 00:04:37,480
I can actually go straight to a product page.

65
00:04:39,040 --> 00:04:43,930
So I know that's on there to and from there, I can go in to check it.

66
00:04:45,960 --> 00:04:50,580
So I start thinking about different ways I can prioritize certain tasks that are really important to

67
00:04:50,580 --> 00:04:53,520
a user and really important to our business schools.

68
00:04:54,210 --> 00:04:55,680
OK, there's our cart.

69
00:04:58,380 --> 00:05:04,710
But now we start thinking about that, we can also start thinking about, well, what happens after

70
00:05:04,710 --> 00:05:12,000
this scenario, you know, a user has gone through the checkout process and they get that nice happy

71
00:05:12,000 --> 00:05:14,390
screen and their item has shipped.

72
00:05:14,910 --> 00:05:18,420
Well, don't you often keep track of your orders?

73
00:05:18,790 --> 00:05:19,650
I know I do.

74
00:05:20,340 --> 00:05:22,050
But we can test that assumption later.

75
00:05:22,650 --> 00:05:24,930
Maybe there's a different navigation piece.

76
00:05:26,160 --> 00:05:32,820
You know, we talked about a profile, the little profile button at the top, and maybe that leads to

77
00:05:33,210 --> 00:05:36,480
like a user settings page or like your current orders.

78
00:05:37,720 --> 00:05:42,790
But doesn't seem like that is prioritizing, maybe that should be prioritized.

79
00:05:42,940 --> 00:05:46,060
So maybe we could create an order screen so we go back up.

80
00:05:47,980 --> 00:05:50,680
Maybe there is an order screen.

81
00:05:52,960 --> 00:05:59,020
And let's draw that up just quickly right here, we can start thinking about maybe you can search your

82
00:05:59,020 --> 00:06:00,000
existing orders.

83
00:06:00,430 --> 00:06:06,730
I'm not sure if that's a feature we would build right away, but we want to build like that most minimum

84
00:06:06,730 --> 00:06:11,030
viable product, the pieces, the features that users really want right away.

85
00:06:11,290 --> 00:06:17,200
So if we think about what you would see on an order screen, you'd probably see your products that you

86
00:06:17,200 --> 00:06:21,220
ordered their details and maybe the status.

87
00:06:22,150 --> 00:06:24,370
There is multiple statuses that we need to think about.

88
00:06:24,370 --> 00:06:28,210
And this is what I mean when we're talking about the different requirements that just naturally surface

89
00:06:28,480 --> 00:06:31,000
when we start thinking about different components on a page.

90
00:06:32,340 --> 00:06:38,940
Right here, this could be a product that has been shipped and there's like a nap with a tracker that's

91
00:06:38,940 --> 00:06:46,800
like pulsing, you start thinking about things like motion a bit, maybe over here, this is a delivered

92
00:06:46,800 --> 00:06:47,250
one.

93
00:06:48,430 --> 00:06:52,660
So we could start thinking that we have in maybe a fourth navigation piece.

94
00:06:54,700 --> 00:06:59,290
I would argue that, you know, your search is a part of your navigation because it's a very prominent

95
00:06:59,290 --> 00:07:03,670
feature for a product like this, being able to search and find products is so important.

96
00:07:04,390 --> 00:07:08,560
So from here, what I would naturally do is I would start kind of, you know, sketching a little bit

97
00:07:08,560 --> 00:07:12,160
more screens, thinking about how these different screens linked together.

98
00:07:12,640 --> 00:07:16,270
I would actually start building some sort of like mini site map.

99
00:07:16,280 --> 00:07:17,620
So I know that home.

100
00:07:18,780 --> 00:07:26,550
Is like my ground zero, and from home, if I move over, I get items.

101
00:07:28,690 --> 00:07:32,000
The product description I can get to.

102
00:07:32,020 --> 00:07:35,050
What else can I get you, I can get to like a category possibly.

103
00:07:37,520 --> 00:07:38,600
So let's write that in.

104
00:07:41,090 --> 00:07:42,940
And, you know, there's other things.

105
00:07:43,400 --> 00:07:49,100
OK, so this product is about personalization, maybe there's like an interesting portion about like

106
00:07:49,100 --> 00:07:52,250
interest, maybe that's front and center on something like product like this.

107
00:07:53,510 --> 00:07:59,450
So maybe there's a component around interest, so I start thinking about these types of navigation trees.

108
00:08:00,740 --> 00:08:02,470
We can also think about saved as well.

109
00:08:02,600 --> 00:08:09,590
We created a save page, so funny little box here for a saved and I go down.

110
00:08:10,590 --> 00:08:16,140
I can start thinking about where saved actually leads, I know I have products, I can go to an item

111
00:08:16,140 --> 00:08:20,310
description page and that obviously can lead the cart.

112
00:08:22,210 --> 00:08:31,150
This isn't an entirely complex product, but it's a lot of different ways you can find certain pages

113
00:08:32,110 --> 00:08:37,960
from saved, I could probably go directly to a checkout that would be awesome, especially if something

114
00:08:37,960 --> 00:08:41,250
comes up as like on sale or like.

115
00:08:41,260 --> 00:08:47,800
Yeah, like a flash sale that would prompt a lot of people to probably just bite the bullet and buy

116
00:08:48,070 --> 00:08:49,240
what's in their wishlist.

117
00:08:50,260 --> 00:08:52,810
Maybe we have other items.

118
00:08:54,350 --> 00:08:56,540
That are relevant to them.

119
00:08:57,580 --> 00:09:02,740
And whatever's in there, which lists, maybe if they have something in relation to like shoes, maybe

120
00:09:02,740 --> 00:09:08,870
there's another pair of shoes that we can kind of push to them and hopefully they'll choose those pairs.

121
00:09:09,280 --> 00:09:10,370
It really depends.

122
00:09:10,720 --> 00:09:16,810
So we can start thinking about this navigation tree, which will definitely affect how we build on our

123
00:09:16,810 --> 00:09:17,440
site maps.

124
00:09:17,980 --> 00:09:21,880
So that's how you can take an approach that sketchy navigation schemes.

125
00:09:22,160 --> 00:09:26,980
It's really easy way to just kind of get that over view of your application.

126
00:09:27,250 --> 00:09:29,710
I mean, we just kind of scratched the surface over here.

127
00:09:29,710 --> 00:09:31,240
But I urge you to kind of go back.

128
00:09:31,630 --> 00:09:34,600
You know, you don't necessarily need to copy exactly what I did here.

129
00:09:35,080 --> 00:09:41,470
Like I said before, use what you think is best, whether that's like paper, do it digitally, refine

130
00:09:41,470 --> 00:09:43,540
them, ask questions constantly.

131
00:09:43,540 --> 00:09:46,600
Never stop asking questions because you'll find different routes like we did.

132
00:09:47,200 --> 00:09:48,670
And that's navigation schemes.