The UX brief & persona for our real life project
A free video tutorial from Daniel Walter Scott
Adobe Certified Instructor & Adobe Certified Expert
4.7 instructor rating • 28 courses • 274,073 students
Learn more from the full courseUser Experience Design Essentials - Adobe XD UI UX Design
Use XD to get a job in UI Design, User Interface, User Experience design, UX design & Web Design
11:45:03 of on-demand video • Updated July 2020
- Become a UX designer.
- You will be able to start earning money from your XD Skills.
- You will be able to add UX designer to your CV
- Build a UX project from beginning to end.
- Become a UI designer.
- Build & test a full mobile app.
- Build & test a full website design.
- You will have a project of your own to add to your portfolio.
- 93 lectures of well-structured, step by step content.
- Learn to design websites & mobile phone apps.
- Work with fonts & colors.
- Prototype your designs with interactions.
- Test on mobile phones.
- You'll create realistic prototype complete with micro interactions.
- Send your designs for feedback & commenting.
- Export production ready assets.
- Create your first UX brief & persona.
- Create quick wireframes.
- How to use premade UI kits.
- Learn professional workflow tricks & shortcuts.
- You will get the finished files so you never fall behind
- Downloadable exercise files
- Forum support from me and the rest of the BYOL crew
- All the techniques used by UX professionals
- Build a mobile app prototype that responses to voice commands.
- You will be able to talk correctly with other UX design professionals.
- You'll learn how to choose colors.
- You'll learn how to pick the correct fonts.
- You'll be able to send your finished work to other professionals in the correct formats.
English So before we get started I want to quickly... just outline the brief for this project... because this is an actual project from one of my clients. I thought that would be a nice way... to kind of explore XD, through an actual project. So what we had to do, there's kind of the UX research side of things... and we had to build out a client brief, which I'll show you here. And we had to build out the persona... just like who their target audience is going to be. So let's have a little look here on the screen at... both what the client sent me as an initial brief... and then what we had to actually move it into. So we had an actual project to work through. So let's check it out here now. So first up, like any good creative job... you've got to kind of get the brief right, especially for UX... because often the client, especially the clients I deal with... haven't really run through a lot of UX projects before. So I guess, what's covered, what's not covered, those sorts of things. So a brief is always essential for any project, right? So I figured I'd show you the one that we got. So this is the brief we got from the client. Basically was pretty thin. They've got a website, bringyourownlaptop.com... and they've built this kind of back-end for it... for their trainers to use. And they want to kind of just release it... to other trainers to start using, potentially as a product. So they want a website, they want an app, very, very, very kind of basic. So what I did is I had a little look through their details... through the analytics for their website. I know that about them because I've dealt with them before... but basically I went through the kind of UX research project. Working out who the competitors were, what the product does... it's USPs, who the potential users would be... and built out a brief, so this is the thing that I emailed them. Basically just covers the basics of most briefs. Let's just quickly run through it. If you're not interested you can just skip on and we'll start making XD stuff... but in this case, project name, description. Just kind of, basically that's what they've said. So just kind of outlining the description. Who's it for is quite important, so we built a persona. I'll show you that in a second, what the persona actually looks like... but this is what we agreed with the client, who the potential persona is. Now the big thing with personas is that... you can guess, and you can have a best guess... but you need to revise potentially who your persona might be... because you might go, "Yeah, it's definitely this person"... but you need to allow wiggle room, and bit of spelling and grammar. So we've built out who we think the client is for. We build out a features list, just to make sure... that we know what's actually going into the wireframes at the beginning... what the important parts are. We leave out things like a footer... or other features that are kind of just normal. The Contact Us page needs to be there, all of that stuff. So this is the kind of unique stuff for this project. Competitors and Product Inspiration... this just helps us know, and the client know that we're aligned in terms of... this is the kind of thing we're building. Deliverables, this is super important. So we go through two parts. There's wire framing, and then there's high fidelity. Basically high fidelity means-- wireframes are really simple... high fidelity has all the fonts, colors, and images. So we build wireframes purely just for client approval. I don't go out and test wireframes; we'll talk about that later on. Then we build a high fidelity prototype, then we go out to some user testing. Based on the user testing, we'll do usability report... and that can be big or small. Basically just feeds back what you found out in your user testing. Then once that's all finished... and we've tidied up any of their problems with the user testing... we'll grab all of the UI assets for the developers. That just means giving them images, code, icons, and symbols. So they can build either the app or the website. So that's where our job's going to finish. So I always have like a 'not included', just in case the client-- just to kind of make sure the boundaries are set nice and clear. So they've asked us to prototype the back-end... which is the kind of instructor side of this website. There is also a student side of it, which they've already got developed. They don't want us to redesign that, so I'm just making sure it's clear. They told me that, it's clear, we're not covering that... because they expect to use their kind of current system. It's the instructor side that we're going to be testing. Costs, so this is what I charge for this job. Jobs vary, often they kind of start at about two, two and a half grand, US... and get up to about 10 grand for larger projects. This one here, basically I work out what my day rate is... and it's roughly about $800. Then I kind of work out how many days I need... to work with something like a timeline. Add in a bit of a buffer, and then give them an hourly rate after that. So that, if they do start asking for stuff that's not covered in the deliverables... you can say, "Sure, I can do that... but it's going to probably take me another half day." Then they know your hourly rate... so they know that it's going to cost X, Y, and Z. And I find that's a good way from stopping the job to creep out. So job creep happens with every job. They go, "Oh, can you quickly just add this extra little thing?" And you're kind of, you add it, and you-- you'll decide later on, if you bill them for it or not, and then... the job overruns, and you either surprise them with a giant bill... or you just suck in those costs, which suck. So I make sure that at the beginning I give them a set cost... because that's what everyone wants, nobody wants an hourly rate... but give them an hourly rate as well. So that when you're chatting, and they're like... "Hey, can you also do this?... and you're like, "Sure, it's going to probably take me three hours." They know what your hourly rate is... and you can add to your bill, and everyone's clear right from the beginning. I always ask for a 50% payment upfront to start the work. There's so many jobs that I end up starting that never kind of get finished. So I like to make sure I get 50% upfront... so I can cover my costs for the initial part. The most important part... the kind of doing the UX research, and working out the features. That's kind of the super important part the job, I think. So I always ask for a percentage upfront. You might have asked for something smaller than that... but 50% is quite common, and then 50% on completion. Deadlines, every job's a little different, but yeah, this is what we've done. So there's a kind of a, them and me. So I'll do the user research to get started with... and the wireframes get delivered to bringyourlaptop then. Then they give me feedback by this certain date... then I give them the high fidelity. Then they give me feedback on that high fidelity... and then it actually goes to user testing. And then we allow for a couple of weeks with user testing. This can be different, depends on how, like for this project we're going... to do a lot of what's called Hallway testing or Over-the-Shoulder testing. We're going to try and meet up with people to do physical live stuff. Find people that match our persona and actually work with them. Now again we're not going to cover full-on testing here. I've got another course for that. Check out "How to be a UX designer" for some of the testing techniques... but yeah, we're going to do over the shoulder stuff... plus we'll probably do some unmoderated testing... where we go to say usertesting.com, I find this really useful. And you can just send it to them, and people record themselves. It's cheap, it's quick, and it's something you don't have to organize meetings for... and you have recordings so you can snip out bits... so you could show the client some of the results. Then there will be a user testing, and completed report. Basically just feedback about, "This is what happened in the user testing." "These are the changes we're going to make." And you make those changes... and once the final changes have been done... we'll hand over the assets to the developer to get built... which in this case would be-- I'll probably end up doing the web side of things. At least the front end web design stuff... but the app and the back end development will have to be done by a developer... which is totally out of my zone. I'm more of that creative side, the front-end side. So that is the kind of brief that we've sent through to the client. Always make sure that-- because I bet you... I 100% promise that this will not get hit by the 4th of December. Mainly because of the feedback, so your client will see this date... and say they'll do it, but things will just turn up late. It will just be one or two days late. And I just make sure, as soon as it is a couple of days late... I revise the next timeline... so that they know that it's them that pushed it out. So when it is like two months overdue... it's not because of me, it's because of their poor feedback. So be really kind of rigid at the beginning, saying that... "It needs to be here by this date," and as soon as they're late... add that to the time, and just kind of push that out... because this is going to look long if it pushes over to the next year... because that's going to add like another couple of weeks... in the middle, over Christmas. So we should have been handing this over kind of mid-December... and before you know it, it's February. And they had in their head, middle of December. So just be very clear about timelines and deadlines. Now again, this is my process, you might be working in an agency... and that $4000 just wouldn't cover their rent. So you might be starting in the $5000, and ending in the $50,000 mark... depending on how large the project is. You might be just getting started... and you might be taking on work a lot cheaper than that, and you're okay. You might be doing designs for 1500, or even 500 to get your first job...- but I figured I'd show you where I'm at as a freelance UX designer... so you've got some sort of idea of pricing, timelines, and briefs. Let's have a quick look at the persona that I've got made. So this is the persona that we built for this project. Now, the initial brief can have a rough outline. What we've done since then is some UX research... into who this person is most likely to be. The nice thing about this particular client... is that they have lots of Google Analytics... and have a strong YouTube channel... so it's easy to get in there and see actual hard data about... who's using the channel, who's using their product. And then talking to the client about who this potential person could be. Then what goes into this will really depend on your project. So we've given this guy a name, Peter, that's a fake stock library image... but I feel like it represents the person. We give him an age, his job title, and the place he lives. Now what goes in here? What you really want to do is be able to communicate... well, after reading this, know the person. So do you need to write down the toothpaste he uses or the car he drives? Potentially, but potentially not. If it's a Prius or a Ferrari, that's kind of an indication potentially... of what kind of person he is. I've seen some personas that just get into like minutest detail. I guess what you want in there... is just so you can have enough in here to kind of walk away and go... I understand where Peter's coming from, in relation to my product. So it could be shorter than this, probably not much shorter... but I wouldn't make it too much longer either. So have a read through this... just so you understand who Peter is while we're doing this project. What I've done for you is... in the exercise files there is a folder called 'Persona Template'. You can use this if you want, there's an Illustrator file. You can switch out the images, fonts, and stuff... and use that if you like, you have total permission to use it. But yeah, have a read through, and see how Peter does things. So have a read through and understand Peter and its positions... that when we're building in XD... we can make some decisions based on what Peter would want. Not what the client wants, and not what I want personally. So that's the brief and personas. Let's get on to the next video.