1
00:00:00,490 --> 00:00:02,380
Hey, everyone, and welcome back.

2
00:00:02,800 --> 00:00:06,820
We're going to be talking about user flows, I know we talked a little bit about it when we were talking

3
00:00:06,820 --> 00:00:12,070
about sketching, but now we're at the point where, you know, we have a bunch of sketches and we really

4
00:00:12,070 --> 00:00:17,830
want to go in and find some details there and maybe explore some of those screen photos a little bit

5
00:00:17,830 --> 00:00:18,170
more.

6
00:00:18,700 --> 00:00:23,560
So what our user flows I see this question asked about users all the time.

7
00:00:23,570 --> 00:00:28,360
I mean, bunch people always want to know what exactly they are because a lot of people work on them,

8
00:00:28,360 --> 00:00:31,770
but they never really share them with the team, which is mistake number one.

9
00:00:32,140 --> 00:00:35,860
And when they do create them, they're usually just this mess.

10
00:00:35,980 --> 00:00:39,100
And we're going to get into what that looks like and how we can remedy that.

11
00:00:39,340 --> 00:00:42,960
So what are user Flo's user flows are as simple as that?

12
00:00:43,180 --> 00:00:47,020
I mean, not necessarily that simple, but that is essentially a user flow.

13
00:00:47,350 --> 00:00:51,940
A user flow is a series of steps the user takes to achieve a meaningful goal.

14
00:00:52,370 --> 00:00:58,480
So step one, whatever is here, they click on it, they get to their step two and then they go two,

15
00:00:58,480 --> 00:00:59,260
step three.

16
00:00:59,530 --> 00:01:01,330
And this is their goal at the end.

17
00:01:02,270 --> 00:01:03,880
So why do we use them?

18
00:01:04,600 --> 00:01:10,660
Well, they're used to communicate the intended flow of user through various pages and actions in a

19
00:01:10,660 --> 00:01:15,820
product, an app or in whatever website that is essentially what user flow is.

20
00:01:16,030 --> 00:01:17,500
So how do we make them?

21
00:01:17,920 --> 00:01:25,150
Well, your flow should include a name, steps users and a description of what happens at each step.

22
00:01:26,020 --> 00:01:27,310
So let's scroll down here a bit.

23
00:01:28,680 --> 00:01:34,650
This was created by Ryan Singer, and he created this great shorthand for user flows.

24
00:01:35,220 --> 00:01:41,670
He actually calls the music flows, but same thing, what the user sees, what they do next.

25
00:01:41,670 --> 00:01:44,970
And the next step is what they see next and what they do next.

26
00:01:45,000 --> 00:01:46,750
That's how simple it is.

27
00:01:47,340 --> 00:01:52,740
So you should think of your current screen as what the user sees and what they need to do.

28
00:01:53,220 --> 00:01:59,550
And that arrow over here will lead to the next screen and there they'll see what they see next and what

29
00:01:59,550 --> 00:02:00,450
they need to do next.

30
00:02:00,960 --> 00:02:06,480
But ultimately, user flows are just another method that we use to define the product, experience,

31
00:02:06,480 --> 00:02:11,490
website, etc. But it isn't just another method.

32
00:02:12,210 --> 00:02:18,030
They have the ability to really define scenarios or sections of something abstract or technical from

33
00:02:18,030 --> 00:02:19,260
the perspective of the user.

34
00:02:19,710 --> 00:02:25,470
So if we're thinking about like a user onboarding or a user checking, I mean, that could be a very

35
00:02:25,470 --> 00:02:31,040
technical, especially when we're thinking about building features and writing user stories for development.

36
00:02:31,560 --> 00:02:36,330
But if we break them down into the individual user stories, depending on the different routes that

37
00:02:36,360 --> 00:02:41,040
certain flow may take, all of a sudden it starts coming much more from a user's perspective.

38
00:02:41,460 --> 00:02:42,400
Let's get into this.

39
00:02:42,570 --> 00:02:45,140
First, I want to talk about an example here.

40
00:02:45,780 --> 00:02:47,130
So step one.

41
00:02:48,140 --> 00:02:49,530
I usually goes to a welcome screen.

42
00:02:50,120 --> 00:02:52,400
Their goal here is to register for a product.

43
00:02:52,820 --> 00:02:58,730
Step two, they've actually gone through some sort of social login and step three.

44
00:02:58,880 --> 00:03:01,620
They get instant access to the product.

45
00:03:02,180 --> 00:03:09,110
So there's three steps, some sort of welcome screen which takes them to a social login, which is really

46
00:03:09,110 --> 00:03:10,330
easy design pattern.

47
00:03:11,060 --> 00:03:13,220
And then they're right in the app.

48
00:03:13,820 --> 00:03:15,610
You may be asking, well, why do they help?

49
00:03:15,620 --> 00:03:20,360
Well, they're the best way to solve the issue of communicating the way we want our products to work

50
00:03:20,600 --> 00:03:23,210
and the way users really interact with our products.

51
00:03:23,600 --> 00:03:29,180
They help us think about our product and the users who interact with it in three simple questions.

52
00:03:29,630 --> 00:03:31,330
What is the goal of this thing?

53
00:03:32,440 --> 00:03:36,280
Who is doing it and how do they do it?

54
00:03:38,090 --> 00:03:45,470
So before we actually jump into, like, understanding the do's and don'ts and building our own, I

55
00:03:45,470 --> 00:03:49,200
want to talk about the process of actually creating a user flow first.

56
00:03:49,730 --> 00:03:50,900
So let's jump right into that.

57
00:03:51,980 --> 00:04:00,270
Before we begin, let's start with step one, what is the purpose of your user flow?

58
00:04:01,040 --> 00:04:04,190
You need to name your flow and that name describes its purpose.

59
00:04:04,430 --> 00:04:07,520
That is the goal the user achieves by completing the steps.

60
00:04:07,640 --> 00:04:12,760
So surprising a lot of people actually forget this part or they make it really vague.

61
00:04:13,490 --> 00:04:15,520
I want to know what the user wants to do.

62
00:04:15,590 --> 00:04:19,760
So I know at the end of this the users are going to find the right product.

63
00:04:20,300 --> 00:04:24,980
So really describe the actual title and don't forget it, step two.

64
00:04:27,130 --> 00:04:33,220
Despite popular belief, user flows go in one direction, limit your decision points in each flow so

65
00:04:33,220 --> 00:04:36,900
you can avoid these crazy huge site maps or huge prototypes.

66
00:04:36,910 --> 00:04:40,600
I mean, they have their place, but not really for describing user flows.

67
00:04:41,580 --> 00:04:45,840
It's OK to have multiple decision points, prototypes in the same map, and we'll get into that later,

68
00:04:45,840 --> 00:04:49,110
but right here we want to convey a distinct interaction.

69
00:04:49,350 --> 00:04:50,880
User flows really work best.

70
00:04:51,980 --> 00:04:56,960
So just keeping it simple and maybe asking yourself, why is this the case?

71
00:04:57,260 --> 00:05:05,140
Well, we're telling a story and it's easier for anyone to remember a story like this than a large site

72
00:05:05,150 --> 00:05:11,000
map or a series of cards in Jira or Trello or whatever product management tool that you may be using.

73
00:05:11,270 --> 00:05:15,710
So try your best to tell a nice, simple story that goes in one direction.

74
00:05:15,710 --> 00:05:20,900
Doesn't sprawl everywhere you use your flows should represent a complete task.

75
00:05:21,990 --> 00:05:26,700
To ensure that your product is organized, the scope of each flow should really be a single task or

76
00:05:26,700 --> 00:05:27,700
goal for your user.

77
00:05:28,140 --> 00:05:34,350
So even though over here we have like a negative experience, we need to possibly break that out and

78
00:05:34,350 --> 00:05:36,210
get them back into some sort of funnel.

79
00:05:36,900 --> 00:05:38,370
Right here is the end goal.

80
00:05:39,060 --> 00:05:41,400
And we're describing each of our steps to get there.

81
00:05:42,530 --> 00:05:47,990
But we're not making this crazy, sprawling map like I spoke about before, so keep them concise.

82
00:05:47,990 --> 00:05:51,080
If they're too short, then you fail to really tell a story.

83
00:05:51,090 --> 00:05:54,230
And if they're way too long, then you basically lose the meaning.

84
00:05:55,070 --> 00:05:58,100
Remember, you use flow should be the clearest model of your product.

85
00:05:58,100 --> 00:06:00,520
And you can do that if you follow the rules I laid out.

86
00:06:01,190 --> 00:06:02,510
Just remember, no one is.

87
00:06:02,510 --> 00:06:04,130
What is the purpose of the user flow?

88
00:06:04,610 --> 00:06:11,390
Number two is go in one direction and number three is represent some sort of complete task, keeping

89
00:06:11,390 --> 00:06:12,290
concise as well.

90
00:06:12,770 --> 00:06:15,410
Next, we're going to jump into the dos and don'ts of user flows.