Skip to main content

The UX Brief & Persona

Lesson 3 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

The UX Brief & Persona

Lesson 3 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

3. The UX Brief & Persona

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final 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

Bonus Materials with Purchase

Six Completed Files
Exercise Files

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 ARTICLES

RELATED ARTICLES