What we are making in this Figma course

Hi everyone, in this video we're going to look at what we're making. We are going to start making some wireframes initially, then we will make some high fidelity versions, that look a little prettier, that one's actually pretty messy, let's look at this one here. See the screens down the bottom, so we're going to work on these, we're going to build Styles, Components, all sorts of goodness, let's have a look at one of the mock-up version. 

So yeah, it's, this is going to be what we make, we'll design it, we'll add some interactivity, we'll make a form, people can purchase stuff. It's going to follow our brief, both our persona and our Task Flow, so let's talk about what those things are. 

So we are going to focus on the software Figma, but I will throw in some kind of general UX design advice, for people that are quite new. So what are we working to? We got a company called Scott Headphones, that wants us to design a few pages for this Task Flow. The Task Flow here, in this case is, they want a Home page that goes to some features about the product, those, that product can be added to a Checkout, and then once the credit card details are filled in, Confirmations, that's what they've asked us to build. They've given us a persona, so let's quickly talk about what our persona is. 

So this is just a bare bones kind of persona, they can run to one whole page, two whole pages, but this is going to be enough for this particular course. What is it for? So I'll read it out, you can read, but our ideal customer is a woman named Sarah. Sarah's in her 20s, she has a Bachelor's degree, she works for herself, she's married with kids, and she lives in Ireland. She has never bought anything like this before, and some of her concerns is that she is very Eco-environmentally, and waste conscious. 

So why do we have a persona? It's to allow us to be specific, not specifically to Sarah herself, Sarah is representative of a type of person, a group of people that are going to be using this website. It helps me distance myself, otherwise I end up building things that I would like, based on my own history, and the way I know the product. So this gives me boundaries, otherwise you end up, either designing for yourself or for everybody, and then nobody wins, because you end up with this generic thing, that doesn't actually work for the target audience. 

So our persona helps us to find that audience, it also helps when you are dealing with the client or stakeholders as well, because you can detach your own kind of personal preferences, like I want Brush Script, they want Times New Roman, but what does Sarah want? Like we need to have empathy for her, in her situation, and her experience with the product, and it does, it helps with those conversations, to be separated from what Dan likes as the designer, what the client likes as her or himself, and let's talk about what's right for Sarah, and that's through to like color, fonts, language types of imagery organization of information, like what features should be shown earlier, based on some of the preferences she has, and some of the knowledge of the product. 

Now this is just like a super quick overview of persona, it's a, we're kind of learning UX design here in Figma. A UX researcher, we'll spend a lot more time, and potentially produce a lot more documentation around, and understand Sarah a lot more than kind of what we've done here. So I guess that's a kind of a broad overview, if you're new. If you are new, my advice to you is, to spend some time now or after this course, researching personas, what they're for, to get a better understanding, and just know that this is a very simplified version of it, but good for what we need for this course. 

Now Task Flow, if you haven't heard of it before, Task Flow here, we've been given, instead of designing all of the mobile website, we've been asked to design a certain kind of important critical feature. So we have to design this Home page, it shows the Products, or the Product Features, a Checkout page and a Confirmation page. So this is a nice simple Task Flow, they can be a bit more complicated, they can be less complicated, it might be like, you know, Task Flows could include things, like how, you know, how does a person cancel this product, what is the process there? 

You might be designing the cancellation process, maybe it's the sign up process, maybe it's how to change your password, how to download or upload a document. It might be a specific thing that needs to be done, on your particular app or website. So let's consider it, a Task Flow, and also actually let's throw in this other term, kind of his buddy. 

So Task Flow versus User Flows comes up quite a bit. There's this great article here by Erica Harano, I'll put a link on the screen here, but after this video, or after this course, do spend a bit more time understanding these, but I'll give you the brief rundown. So basically, Task Flows, have a look, they've got the Pancake Task Flow, so I'm going to look at this, finding a recipe version, very simple, kind of like what we're doing in our course, Home page, search for pancakes, search results, find the Super Banana Pancake recipe, simple Task Flow. It's step by step, but sequential, kind of linear, whereas a Task Flow is a lot more complex, let's have a look at this one. 

So this one here, can you see, we end up with, it's the same kind of process, so you start at the Home page, and you end up with Super Banana Pancake, but there's a lot more ways of getting there. There's more than one option, which we know is always the case, like this option is like the big one here, the first one is-- are they going to use the search bar at all? The Task Flow up above said, assumed, using the search option, but there is going to be, your persona might not be a search bar kind of person, again, they're going to go this way. 

So know they're not going to use the search bar, so then we're going to have to build out and mock up, the browsing the categories, and there's a Breakfast category, and then there's a Breakfast page, and they're finding pancakes within that breakfast page, and then they click on the recipe that they want, and they've ended up, back at the same place, but it's a different way of getting there, there is, you can see the key up here, there's Decision nodes, the different shapes for different actions, these are our pages, these are interactions, between the user and the interface, and these are decisions. They've got the start and stop there, so User Flows are more complex, show different options, so you've got to make sure that you are designing for the right thing. 

If you're designing your User Flow, it's going to have more to it, in a bigger job, whereas a Task Flow can be quite a simple boundaried option. Now you will have Task Flows within this User Flow, you can still see our Home page, search results, banana, is still there, it's just kind of baked into this, more complex, or different pathway that the user might follow. A User Flow will help you find more things, like any sort of dead ends, or people get stuck in a loop, or don't know where to go anymore, so yeah, that's the brief User Flow versus Task Flow. 

Another thing to mention is that we've been asked to design, a mobile website version of this, not an app, so an app, you just have the one mobile size screen, because it's a mobile website, It means you're probably going to have to design out, not only the mobile version but maybe a tablet, and a desktop version as well. So that can often catch you out when you're new, and you're like, if somebody asks you to design a desktop website, you're going to have to-- the developer is going to want to see what, you know, how the site breaks down to a mobile version, or up into a desktop version. So take that into account, but our focus here is the mobile version, and lastly, this is a pretty bare bones in terms of, you know, we've got a persona, we've got a company name and a Task Flow, and often a brief can be a lot bigger than this, like designing a whole website, and sometimes you can get a lot of details around it. 

So for me as a designer, what would be hard with this particular one, is how much do I know about Scott Headphones? Not very much at this stage, I would like to see, I'd like to talk to them or have my Product Manager talk to them, or you know, whoever's in charge, talk to them about, what they're about, what are their values, what is their mission, to help me kind of help with this persona, to kind of build another level on there. 

Sometimes you won't get that information, and sometimes you will. If you get given something from a bigger company, they're probably going to have values and mission statement, so you can go off and find that and add that to your kind of tool set, when you are designing this thing, to have better conversations with the stakeholders, when you are referencing what you're doing, versus where they're going as a company, equally, you're going to get jobs where there is no values, and there is no mission, and they haven't really thought about it, and you're going to have to do your best with what you've got, and as you get more experienced push back for those types of things. 

 It's probably conversations that I want to have more and more, the more experienced I get, like, not just a persona, but like why are we doing this, where is the direction we're going, who am I helping, why are we helping, to really influence my design work, but anyway, this is a good starting point for this course, let's, let's move on.