The UX Brief & Persona
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final Quiz
Lesson Info
The UX Brief & Persona
Okay. 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 and I thought that would be a nice way to kind of explore XD through an actual project. So what we had to do this kind of the UX research side of things and we had to build out a client brief, which I will show you here. And we had to build out the persona. Okay. Just like who the target audience is going to be. So let's have a little look here on the screen at Yeah, 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. All right. So let's check it out here now. Okay. 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 an unsure what's what's in covered, what's not covered, those so...
rts 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. So basically it was pretty thin. They've got a website bringing in laptop dot com and they've built this kind of back in for it for their trainers to use and they want to kind of just release it to other trainers to start using to potentially use it as a product. Okay. So they want a website. They want an app. They very very, very kind of basic. So what I did is I had a little look through their details, okay, through the analytics for their website. I know a bit 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 okay and built out brief. So this is the thing that I emailed them. Okay. And basically just covers the basics of most briefs. Okay, 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. Okay. Project name description. Just kind of basically that's what they've said. Um So just kind of outlining the description who's it for is quite important. Okay, 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 better spelling and grammar. Okay. So we've built out who we think the client is for. We build out of features list. Okay. Just to make sure that we know what's actually going into the wire frames at the beginning, what the important parts are. Okay. We leave out things like a footer or other features that are kind of just normal there 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 were aligned in terms of this is the kind of thing we're building. Okay, deliverables. This is super important. So we go through two parts is white framing and then there's high fidelity, basically. High fidelity means, you know, white frames are really simple. High fidelity has all the fonts and colors and images. So we build wire frames purely just for client approval. Okay, I don't go out and test wire frames. We'll talk about that later on. Then we build a whole fidelity prototype and then we go out to some user testing based on the user testing will do usability report 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 the problems with the user testing will grab all of the UI assets for the developers and that just means giving them images and code and icons and symbols so they can build either the app or the website so that's where our jobs going to finish. Okay. So I always have like a not included just in case the client. Just just to kind of make sure the boundaries are set nice and clear. So they've asked us to prototype the back end. Okay. Which is the kind of instructor side of this website. There is also a student side of it which they've already got develops. They don't, 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 systems, the instructor side that we're going to be testing costs. Okay. So this is what I charge for this job jobs very often they kind of start at about 2, 2.5 grand us and get up to about 10 grand for larger projects. This one here basically work out what my day rate is and it's roughly about $800. And then I kind of work out how many days I need to work with something like a timeline adding 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 and then they know your hourly rate so they know that you know 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 kind of, you add it and you you'll decide later on if you build them for it or not and then the job overruns and you you either surprise them with a giant bill or you just suck in those costs which suck. So I make sure that the beginning I give them a set cost because that's what everyone wants. Nobody wants an hourly rate But give them an alley rate as well so that when you're chatting and they're like Oh hey can you also do this? And you're like sure it's gonna probably take me three hours, they know what the rate is and you can add it to your bill and everyone's clear right from the beginning. I always asked for 50% payment up front, okay 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% up front so I can cover my costs for the initial part like that. It's the most important part that kind of doing the UX research and working out the features that's the kind of the super important part of the job I think. So I always ask for a percentage up front. You might ask something smaller than that. But 50% is quite common And then 50% on completion deadlines. Okay. Every job is 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 the wire frames, get delivered to bring your laptop. Then then they give me feedback by this certain day. 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're allowed 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 um moderated testing where we go to use a user testing dot com. I find it's really useful and you can just send it to them and people record themselves sheeps quick and it's something you don't have to organize meetings for and you have recordings so you can snip out but so you can show the clients some of the results. Okay then there will be a user testing and completed report. Um and 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 will 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. Okay. 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 and more of the creative side. The front end side. So yeah that is the kind of brief that we sent through to the client. Always make sure that because I bet you 100% promise that this will not get hit the fourth of december mainly because the feedback. Okay so your client will see this date and say they'll do it but things will just turn up late, you know just be one or two days late and I just make sure as soon as it is a couple of days later I revise the next timeline. Okay 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. Okay, so be really kind of rigid at the beginning saying that, yep, it needs to be here by this day 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 it is 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 at an agency and that $4000 just wouldn't cover the 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 UK, 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 and timelines and briefs, let's have a quick look at the persona that got made. Alright, so this is the persona that we built for this project. Now the initial brief kind of a rough outline, what we've done since then is some UX research into who this person is most likely to be. And 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. Okay. So, and 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 a place he lives. Okay. Now, what goes in here, what you really want to do is be able to communicate well after reading this, know the person. Okay, 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. Okay. So, um, some, I've seen some personas that just get into like minutia 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, I understand where Peter is coming from in relation to my product. Okay, 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 call persona template and you can use this if you want. There's an illustrator file. You can switch out the images and fonts and stuff and use it if you like. You have total permission to use it, but you have a read through and see how Peter does things. So have a read through and understand Peter and his positions that when we're building an XD, we can make some decisions based on what Peter would want, not what the client wants and not what I want personally. Alright, so that's the brief and personas. Let's get on to the next video
Class Materials
Ratings and Reviews
Haseebullah Johar
Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.
Student Work
Related Classes
Web Design