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.
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.