0
1
00:00:00,470 --> 00:00:00,820
All right.
1

2
00:00:00,820 --> 00:00:07,570
So now we've got the color palette down and we know roughly how we want our user interface to look based
2

3
00:00:07,570 --> 00:00:10,230
on some of the stuff we found on mobile patterns.
3

4
00:00:10,330 --> 00:00:15,160
What's the next step? The next step is creating a user flow diagram.
4

5
00:00:15,160 --> 00:00:17,090
Now what is a user flow diagram?
5

6
00:00:17,110 --> 00:00:19,110
Essentially an engineering diagram.
6

7
00:00:19,120 --> 00:00:25,170
It's a very high level representation of a user's journey through your app or through your website.
7

8
00:00:25,180 --> 00:00:31,690
For example say you open up the Amazon app. On the home screen you can decide to search for an item or
8

9
00:00:31,690 --> 00:00:38,140
you can have a look in your basket and go to check out or you can just browse through the list of suggested
9

10
00:00:38,170 --> 00:00:38,680
items.
10

11
00:00:38,710 --> 00:00:44,230
So a user flow diagram is what we use to design a user's journey.
11

12
00:00:44,230 --> 00:00:49,920
It's a bit like a website site map. And a user flow diagram is made up of three things.
12

13
00:00:49,970 --> 00:00:54,320
One you use rectangles to represent screens,
13

14
00:00:54,340 --> 00:01:01,510
so the home screen or the login screen. And then use diamonds to represent decisions such as tapping
14

15
00:01:01,510 --> 00:01:08,090
the login button or swiping to the left or zooming in on an image.
15

16
00:01:08,110 --> 00:01:10,080
So diamonds offer decisions.
16

17
00:01:10,180 --> 00:01:14,850
And finally use arrows to link up screens and decisions together
17

18
00:01:15,040 --> 00:01:17,730
and in the process you create a user flow diagram.
18

19
00:01:17,920 --> 00:01:20,190
So let's show you an example.
19

20
00:01:20,200 --> 00:01:24,220
So this is the Twitter app and on the left is the home screen.
20

21
00:01:24,220 --> 00:01:26,740
So this is what shows up when you launch Twitter.
21

22
00:01:26,740 --> 00:01:30,460
And that's of course the feed that's that we're seeing right now.
22

23
00:01:30,760 --> 00:01:36,910
And on the right is what happens when you tap the new tweet button over here.
23

24
00:01:36,910 --> 00:01:41,470
So once you tap this you go to this screen which is the compose screen
24

25
00:01:41,470 --> 00:01:48,550
and here you can type in a tweet. And you have two actions essentially. You can either discard your tweet
25

26
00:01:48,550 --> 00:01:55,150
by clicking the cross or you can click the tweet button to send off your tweet into the world.
26

27
00:01:55,150 --> 00:01:58,930
Now of course there's actually quite a few more buttons that are available.
27

28
00:01:59,170 --> 00:02:05,200
But let's just map this very basic user flow of going into Twitter,
28

29
00:02:05,440 --> 00:02:11,350
composing a new tweet and either deciding to discard or sending it out into the world.
29

30
00:02:11,350 --> 00:02:19,690
So this feed screen would be converted to a rectangle labeled feed, the compose button would become a
30

31
00:02:19,750 --> 00:02:23,650
diamond which represents the new tweet action.
31

32
00:02:23,740 --> 00:02:30,580
Once you click on the new tweet action. it should take you to the compose screen which is again represented
32

33
00:02:30,610 --> 00:02:32,040
by a rectangle.
33

34
00:02:32,170 --> 00:02:37,990
And finally on the compose screen you have two possible actions that you can take:
34

35
00:02:38,050 --> 00:02:46,150
you can either press cancel to go back to the feed or you can press tweet to send your tweet out into
35

36
00:02:46,150 --> 00:02:52,300
the world. And then we can link all of these actions up with arrows to show how the user progresses
36

37
00:02:52,300 --> 00:02:57,250
through the app and completes a journey of composing and sending out a new tweet.
37

38
00:02:57,250 --> 00:03:00,650
Now going back to our workout app example.
38

39
00:03:00,760 --> 00:03:03,430
So this is something that I've just drawn up off the top of my head,
39

40
00:03:03,460 --> 00:03:06,070
what I would want from my workout app.
40

41
00:03:06,130 --> 00:03:12,640
So you should be able to firstly enter through the welcome screen. And instead of letting users register
41

42
00:03:12,670 --> 00:03:18,400
with email I've decided that they can either log in with their Facebook account or they can log in with
42

43
00:03:18,430 --> 00:03:25,030
Google. And after they log in they are taken to the home screen. And at the home screen they have a number of
43

44
00:03:25,030 --> 00:03:26,560
actions that they can perform.
44

45
00:03:26,590 --> 00:03:32,290
They can either start a new workout or browse through different workouts or they can check their own
45

46
00:03:32,290 --> 00:03:36,220
profile or they can check out their workout stats.
46

47
00:03:36,220 --> 00:03:42,580
Now while this app is very simple and it's relatively easy to map out most of the functionality in a
47

48
00:03:42,580 --> 00:03:48,820
single page, this is certainly not the way that we would recommend you do it because it can become very
48

49
00:03:48,820 --> 00:03:50,470
complex very quickly.
49

50
00:03:50,500 --> 00:03:57,190
But instead what you should do is you should map out a user flow diagram for a single user journey.
50

51
00:03:57,190 --> 00:03:58,470
So what does that mean?
51

52
00:03:58,480 --> 00:04:05,920
For example, if we only wanted to map out the diagram for a user going into the app and completing a
52

53
00:04:05,920 --> 00:04:11,170
workout session, well what they would do is they would go into the welcome screen, they would log in that
53

54
00:04:11,170 --> 00:04:12,880
would take them to the homescreen.
54

55
00:04:13,090 --> 00:04:18,850
They can then click to browse through workouts which takes them to the list the workouts, they select
55

56
00:04:18,850 --> 00:04:20,320
the ones that they want to do
56

57
00:04:20,470 --> 00:04:27,700
and then after they've done selecting they get taken to the workout session screen. And here they can
57

58
00:04:27,700 --> 00:04:30,560
end the workout or go to the next exercise.
58

59
00:04:30,670 --> 00:04:34,670
If they end the workout, they get taken back to the homescreen etc. etc.
59

60
00:04:34,750 --> 00:04:37,480
Now why is all of this necessary?
60

61
00:04:37,480 --> 00:04:43,660
You know, a lot of students ask you know "why can't I just go straight to designing my app in Photoshop?"
61

62
00:04:43,990 --> 00:04:45,310
Or even more extreme,
62

63
00:04:45,310 --> 00:04:48,190
"why can't I just start coding and see how it goes?"
63

64
00:04:48,490 --> 00:04:55,390
Well, because when you're at the earliest stage of designing which is this stage the first stage which
64

65
00:04:55,390 --> 00:04:57,670
is mapping out you use a flow diagram,
65

66
00:04:57,760 --> 00:05:01,440
it's very easy to make any changes as necessary.
66

67
00:05:01,800 --> 00:05:09,870
So for example if in our workout app we wanted people to have the option of starting a default workout
67

68
00:05:10,140 --> 00:05:13,330
without having to go through browsing and selecting it,
68

69
00:05:13,380 --> 00:05:18,830
we can simply edit the user flow diagram like so. We're on the home screen,
69

70
00:05:18,820 --> 00:05:24,710
we have a single button or a single action that can take us to the workout session starting a default
70

71
00:05:24,750 --> 00:05:25,330
workout.
71

72
00:05:25,440 --> 00:05:28,560
This process probably took me two seconds.
72

73
00:05:28,560 --> 00:05:35,700
Now this process in Photoshop, having to change the homescreen, having to add a new
73

74
00:05:35,760 --> 00:05:42,810
action, having to link all these things up which would have probably taken me a few hours. And this whole
74

75
00:05:42,810 --> 00:05:48,440
process, if I was doing it in code, would probably take me a few days.
75

76
00:05:48,450 --> 00:05:52,130
So the beauty of designing from as basic as possible,
76

77
00:05:52,140 --> 00:05:58,500
so starting from user flow diagram, is that you get to a point where you're happy with how your app
77

78
00:05:58,500 --> 00:06:05,370
functions or how your app would logically work before you commit yourself to any designs before you
78

79
00:06:05,370 --> 00:06:11,940
commit yourself to miles and miles of code. Which means that you end up saving time and therefore money.
79

80
00:06:11,960 --> 00:06:19,080
A lot of the students who we've had on our physical in-person programming bootcamps have paid you know 40,000
80

81
00:06:19,080 --> 00:06:27,990
50,000 easily for an app that is incomplete because they don't start out with a very basic use of flow
81

82
00:06:27,990 --> 00:06:28,760
diagram.
82

83
00:06:28,770 --> 00:06:35,910
They don't go through the formal design process. And only once the app has materialized into code that
83

84
00:06:35,910 --> 00:06:41,430
they've commissioned a freelancer to do or they've commissioned an agency to do. So they get it in their
84

85
00:06:41,430 --> 00:06:48,320
hands and they realize "This is not what I wanted." And making any changes at that stage
85

86
00:06:48,330 --> 00:06:54,420
once designers have worked on it, once programmers have worked on it, is very very costly and very time
86

87
00:06:54,420 --> 00:06:55,430
consuming.
87

88
00:06:55,500 --> 00:07:00,000
So I highly urge you guys to always start from the basics.
88

89
00:07:00,150 --> 00:07:05,040
So just sketch out a user floor diagram. And this is the time where instead of just listening to me
89

90
00:07:05,880 --> 00:07:10,820
telling you all about it, it's time for you to do some hands on work.
90

91
00:07:10,830 --> 00:07:17,490
So the premise is that you're commissioned to design a recipe app. And this recipe app is going to allow
91

92
00:07:17,490 --> 00:07:20,210
the user to do two very simple things.
92

93
00:07:20,340 --> 00:07:28,590
One is browse through a list of recipes and two is save or favorite those recipes so that they can refer
93

94
00:07:28,590 --> 00:07:30,000
to it later on.
94

95
00:07:30,000 --> 00:07:36,480
Now it's time to pause the video, take a piece of paper take a pencil pencil and sketch out the user
95

96
00:07:36,480 --> 00:07:39,380
flow diagram for this recipe app.
96

97
00:07:39,750 --> 00:07:45,300
And if you get confused at all or if you forget about how we design user flow diagrams, you can always
97

98
00:07:45,300 --> 00:07:50,780
rewind the video and see how we did it for the Twitter app or how I did it for the workout app.
98

99
00:07:50,880 --> 00:07:55,590
And once you've completed the challenge, I'll see you in the next video when we talk about wire framing.