All right. 1
So now we've got the color palette down and we know roughly how we want our user interface to look based 2
on some of the stuff we found on mobile patterns. 3
What's the next step? The next step is creating a user flow diagram. 4
Now what is a user flow diagram? 5
Essentially an engineering diagram. 6
It's a very high level representation of a user's journey through your app or through your website. 7
For example say you open up the Amazon app. On the home screen you can decide to search for an item or 8
you can have a look in your basket and go to check out or you can just browse through the list of suggested 9
items. 10
So a user flow diagram is what we use to design a user's journey. 11
It's a bit like a website site map. And a user flow diagram is made up of three things. 12
One you use rectangles to represent screens, 13
so the home screen or the login screen. And then use diamonds to represent decisions such as tapping 14
the login button or swiping to the left or zooming in on an image. 15
So diamonds offer decisions. 16
And finally use arrows to link up screens and decisions together 17
and in the process you create a user flow diagram. 18
So let's show you an example. 19
So this is the Twitter app and on the left is the home screen. 20
So this is what shows up when you launch Twitter. 21
And that's of course the feed that's that we're seeing right now. 22
And on the right is what happens when you tap the new tweet button over here. 23
So once you tap this you go to this screen which is the compose screen 24
and here you can type in a tweet. And you have two actions essentially. You can either discard your tweet 25
by clicking the cross or you can click the tweet button to send off your tweet into the world. 26
Now of course there's actually quite a few more buttons that are available. 27
But let's just map this very basic user flow of going into Twitter, 28
composing a new tweet and either deciding to discard or sending it out into the world. 29
So this feed screen would be converted to a rectangle labeled feed, the compose button would become a 30
diamond which represents the new tweet action. 31
Once you click on the new tweet action. it should take you to the compose screen which is again represented 32
by a rectangle. 33
And finally on the compose screen you have two possible actions that you can take: 34
you can either press cancel to go back to the feed or you can press tweet to send your tweet out into 35
the world. And then we can link all of these actions up with arrows to show how the user progresses 36
through the app and completes a journey of composing and sending out a new tweet. 37
Now going back to our workout app example. 38
So this is something that I've just drawn up off the top of my head, 39
what I would want from my workout app. 40
So you should be able to firstly enter through the welcome screen. And instead of letting users register 41
with email I've decided that they can either log in with their Facebook account or they can log in with 42
Google. And after they log in they are taken to the home screen. And at the home screen they have a number of 43
actions that they can perform. 44
They can either start a new workout or browse through different workouts or they can check their own 45
profile or they can check out their workout stats. 46
Now while this app is very simple and it's relatively easy to map out most of the functionality in a 47
single page, this is certainly not the way that we would recommend you do it because it can become very 48
complex very quickly. 49
But instead what you should do is you should map out a user flow diagram for a single user journey. 50
So what does that mean? 51
For example, if we only wanted to map out the diagram for a user going into the app and completing a 52
workout session, well what they would do is they would go into the welcome screen, they would log in that 53
would take them to the homescreen. 54
They can then click to browse through workouts which takes them to the list the workouts, they select 55
the ones that they want to do 56
and then after they've done selecting they get taken to the workout session screen. And here they can 57
end the workout or go to the next exercise. 58
If they end the workout, they get taken back to the homescreen etc. etc. 59
Now why is all of this necessary? 60
You know, a lot of students ask you know "why can't I just go straight to designing my app in Photoshop?" 61
Or even more extreme, 62
"why can't I just start coding and see how it goes?" 63
Well, because when you're at the earliest stage of designing which is this stage the first stage which 64
is mapping out you use a flow diagram, 65
it's very easy to make any changes as necessary. 66
So for example if in our workout app we wanted people to have the option of starting a default workout 67
without having to go through browsing and selecting it, 68
we can simply edit the user flow diagram like so. We're on the home screen, 69
we have a single button or a single action that can take us to the workout session starting a default 70
workout. 71
This process probably took me two seconds. 72
Now this process in Photoshop, having to change the homescreen, having to add a new 73
action, having to link all these things up which would have probably taken me a few hours. And this whole 74
process, if I was doing it in code, would probably take me a few days. 75
So the beauty of designing from as basic as possible, 76
so starting from user flow diagram, is that you get to a point where you're happy with how your app 77
functions or how your app would logically work before you commit yourself to any designs before you 78
commit yourself to miles and miles of code. Which means that you end up saving time and therefore money. 79
A lot of the students who we've had on our physical in-person programming bootcamps have paid you know 40,000 80
50,000 easily for an app that is incomplete because they don't start out with a very basic use of flow 81
diagram. 82
They don't go through the formal design process. And only once the app has materialized into code that 83
they've commissioned a freelancer to do or they've commissioned an agency to do. So they get it in their 84
hands and they realize "This is not what I wanted." And making any changes at that stage 85
once designers have worked on it, once programmers have worked on it, is very very costly and very time 86
consuming. 87
So I highly urge you guys to always start from the basics. 88
So just sketch out a user floor diagram. And this is the time where instead of just listening to me 89
telling you all about it, it's time for you to do some hands on work. 90
So the premise is that you're commissioned to design a recipe app. And this recipe app is going to allow 91
the user to do two very simple things. 92
One is browse through a list of recipes and two is save or favorite those recipes so that they can refer 93
to it later on. 94
Now it's time to pause the video, take a piece of paper take a pencil pencil and sketch out the user 95
flow diagram for this recipe app. 96
And if you get confused at all or if you forget about how we design user flow diagrams, you can always 97
rewind the video and see how we did it for the Twitter app or how I did it for the workout app. 98
And once you've completed the challenge, I'll see you in the next video when we talk about wire framing.