A Simple Web Design Process Freelance Clients Will Love in 7 Steps

[00:00:00] Chris: This week, I talked to a listener about a step by step process that you can take your clients through on every project. Best news is it's going to make them happy and keep you from being frustrated. Are you ready? Let's go.

Having an efficient web design process is an essential part of being. A successful freelance web designer, but sadly, most folks approach every single project differently without any repeatable system. So they just kind of shoot from the hip with everything, right. Maybe like a wireframe here, a bit of a mock-up they're asked for some feedback and then.

I see how it goes. And unfortunately that's a recipe for upset clients and a lot of frustration on your part as a freelancer. And so this week on the self-made web designer podcast, I talk to Evan and Evan is a product designer by day, but he's starting to pick up some freelance. In his spare time and rather than going in blind and just kind of figuring it out and stumbling through as it happens, right.

He's trying to be strategic about how he's taking his clients through the project that he's working on. So we chatted a bit about the best way to go about that and I'm sharing our conversation with you. But before we dive in, did you know that I give away my web design client process and a Trello board?

To go along with it. I've outlined the very process that I use with clients and the very Trello board that I used to start every project. And you can have it as well, 100% for free, take it, adjust it and make it exactly what. Needed to be. You can find a link to that. Download in the show notes, or simply go to this episode's webpage and find it.

All right. Are you ready to jump into my conversation with Evan and hear about a simple web design process? Freelance clients are going to love in just seven steps. Okay. Let's do it. I've recently

[00:02:11] Evan: transitioned positions from, uh, Not a design position to a design position that works from home primarily.

Um, and the work is good, but I'm also looking into just branching out in the freelance world. Um, and I've been listening to your podcast for a long time, and I'm kind of at the point now where I'm able to take a step out and actually start working projects. And, uh, I, since it's so new to

[00:02:38] Chris: me, I feel like I'm a little behind on

[00:02:41] Evan: the business process side of things.

And I'm really strong in design and I'm getting there in the development side. But in terms of the life cycle of a project from start to finish, I feel like I'm kind of all over the place. I don't know whether the things that I should be thinking about asking a client before committing to something so that I know that I'm not overselling underselling or over committing to something that I shouldn't.

[00:03:09] Chris: And this is all coming up because

[00:03:10] Evan: I have a, um, a project coming up that I want to make sure that I do it the right way. And, um, that just kind of, that's kind of where I am right now, where I'm in the research phase of just asking questions. And I want to make sure that I understand. Things completely and have my eyes wide open so that I'm not, um, letting anybody down without knowing about something going

[00:03:30] Chris: into it.

So that's kind of where I am. Yeah. Well, I mean, good for you for trying to think through the process of what to do and how to best serve your client. You know, most, most folks will go years without thinking like, wait, maybe I should be doing things at different. So, so w well done on that. Tell me a little bit about the project that you're working on with this client.

Is it, is it a website builder? Is it an app build? What does that look like for you? It's a

[00:03:57] Evan: website redesign, um, it's well established, um, company up in New York who for primary focuses on out of home marketing. And so their task right now is they're just trying to do a little bit of a refresh on their branding, um, update a lot of their graphics and then part of that is going to be redesigning their website.

Um, so that's what I come in. I'm working in tandem with a local company in my area. Um, that's. Doing all the branding side stuff. So, um, I'm solely focused on the

[00:04:30] Chris: web part of the, got it. So you're going to be taking essentially like a mood board that they give you with some graphics with the color palette and font and everything, and then implementing that into a website, so to speak.

Yes. Okay. Okay. Cool. Yeah. So. There's not a one. And the reason why I ask about the nature and the scope of the project is because there's not really a one size fits all. Um, when it comes to a lot of this stuff, because so many people do so many different things when it comes to web design, web design is a, is a big word, right?

It encompasses just a ton of things. And so. Um, you really have to make a decision on one of two things you have to figure out like, am I going to do the same thing on every project over and over again? And if that's the case, then you can get really systematized about what you're doing and not doing right.

You can create, um, you know, really fine steps from step 1.1, 1.2, 1.3, 1.31 1.32. You know? Um, but if it's, if it's. You know, somewhat different per project. Um, then you want to have steps, but you want to, you want them to be, uh, more, you know, like the, the bumper guards that you would put inside of a bowling alley.

If you're a kid, you know, is aware, at least it's going to hit some pens, you know? Um, so, so what I would say as a, as a general idea, Is to start at the end. Like what, what would make an incredibly successful projects for your client and, um, you know, and then, and then go backwards from there. And the answer to that question is it's not going to be answered by you.

It's actually going to be answered by the client. And so, um, this is where, you know, the, the first step in every project, no matter if it's real specific or real general, right. It is that you just ask a boatload of questions, right. Just, just a ton. And there's, there's a debrief there's, um, you know, clarification calls, um, because that.

That portion of the system or of the process is going to set you up for success or for failure. And this is where I got it wrong. A ton at the very beginning, I just kind of assumed, right? Like, oh, this client wants this, they're this kind of company, this is the thing that is going, or they're really gonna, like, rather than just going, what do you really like?

You know, like some of those really simple questions of like, just, just tell me what it is that, that you're looking for. So, so you start every project with. Just a ton of questions. And I'm thinking through things, you know, and, and there's really like, there's this, this, like I was talking with my daughter about logo design yesterday.

And, um, cause I'm trying to teach her how to do it. You know, I've got mystic web design, that's my business. I'm trying to bring as many metrics into it as I possibly can. Right. So, um, uh, I was showing her logos and she's like, man, these are just really simple. And I was like, They're simple, but that doesn't mean they don't take a lot of work and a lot of, uh, a lot of intentionality about what you're thinking through it.

So it's the same thing with, with the questions that you're asking this simpler the better. Um, but a good question takes some work to find a good, simple question. Right? Um, so a few that I have found are. What, what would a home run look like for you on this project? Like, if I were just to knock it out of the park, what would that look like?

Um, what would a strike out look like for you? So I'm trying to get both the, the extreme of just knocking their socks off and the extreme of them, like likely wanting to fire me. Right. So I can know, like, those are, those are the. Um, the top level and the lower level things that I need to be figuring out, number one, the lower level stuff, how to stay away from, and the top level stuff, how to, how to really shoot for, um, you know, so then you get into the practicalities with website, like how many pages you need, how much functionality do you need it to have?

Like, like all of that stuff. You need to talk to them about what are your expectations from me. Right. And, and that's another big question, right? So they're going to have some expectations and some of them are explicit and then some of them are internal. Like they're not sharing them with you. 'cause they, they haven't like it.

Hasn't fully become a thought. Um, and so you need to work to like pull that stuff out of them, you know? So I'm asking that very simply. What, what are your expectations of me? Like I know this sounds and a lot of times I'll preface any type of question that I say with like, this may sound simple and, and you, you may feel like it's a dumb question, but I don't, I don't want to.

Anything as a guest, right? I don't want to assume anything about what you think about what's going to happen here. And so that way, you know, they don't feel like I'm patronizing them or, or they don't feel like, man, this guy doesn't know what he's talking about. If he's like, like try to get this stuff from me.

And what I have found is if you start out your process with just a ton of clarifying questions, uh, a ton of, uh, information gathering, then. The client is a lot less likely to be annoyed at that point. Versus like, if you get into the middle of the project and you start going, wow, I don't know the answers to these questions.

Like that's when it's like, we should have covered these bases before. Right. But here we are. And you know, we're, you know, three or four weeks into this and you don't even know about what pages I'm hoping to have or whatever. So does all that make sense?

[00:10:22] Evan: Perfect. That makes sense. It sounds like you're saying.

To be successful and most projects, you need a roadmap for what a roadmap looks like.

[00:10:30] Chris: Exactly. I am all about having, um, you know, like a systematized process that you're, you're showing up and you just kind of know, like there's no, there's no effort to think of what am I doing today? Right? There is a, here is we're in this stage of the process.

Here's my punch list in this stage of the process. And I'm just going to go for it, especially if this is a part-time thing, right. You want to kind of take. Out the necessity to have to use a lot of brain power, to get something going on your, to, to, to have forward motion on the project. Because inevitably what happens is you get to the end of your day, you have very little brain power to offer, you know?

And, and so if you have to think, if you have to sit down with your computer and laptop and open up and be like, okay, what am I. Today, right. Then you very quickly will go to the Facebook tab or Instagram and start going. Like I'm just kind of veg out for a little bit. And then you, you start like faltering on, on, uh, on your progress.

So step one is just a ton of, of clarity, a ton of fact-finding and getting as much information, um, as you can. Then from there, it goes, you know, in your situation. Um, like if I were doing branding, we would, uh, we'd be doing a mood board for color palettes fonts, um, logo ideas. Um, I I'd be asking them questions about their, um, You know, they're, they're, um, the perfect user or ideal client, um, so to speak.

And, but for you, a mood board is going to look like, um, let's look at a few websites and, and talk about what you like about them, what you don't like about them. And then I'm going to send you a few snapshots of what I'm thinking about how this website is going to look, right? So it's, it's a very 30,000 foot, uh, Kind of explanation of what direction you think you're going and what you're doing is you're, you're starting out and this is how every process should be.

You're starting out really wide, right? Like really a theory, you know, like, um, you, you know, who's your, who's your ideal client? Um, what kind of experience do you want them to have when they hit your landing page? You know, what's the end goal, right? That's, that's just, that's way out there in the clouds.

And then. Every step of the process, you get a little bit closer to like, here it is. Right. So we've done the question work, and now we bring it in and now we say, okay, so now it's time to look at what those, what it might look like to marry what you've told me and what I'm seeing from my branding. And, and, and have a general idea based on some things that other people have done.

So I'm trying to think, I'm trying to get what you like and what you don't like. Right. And then I'm in that process is also clarification of like, not just, I don't like this, but why, why do you not like this? Right. Because that might be. A lot different of an answer for you than it is from them. Right. Um, and so then we, from that stage would be, um, getting a little bit smaller and going a little bit more practical.

So we'd be doing some wireframing. Um, and this is, you know, if you're doing product design, you're super familiar with this stuff. Um, but one of the things that I have found is really important. And when you go into a lo-fi wire, And you know it for the podcast, anybody listening, wireframe is like just a bare bones, like a skeleton of what the website's gonna look like.

You have images that look like, um, placeholders with like, you know, the little image icon on it. You've got text, you've got headers, you've got layout, but it's, there's no colors to it. There's no actual images to it. There's new graphics. It's just a low fat. Uh, I, I idea of what it's going to end up looking like.

So, um, the thing that I have found is somewhat of a mistake when it comes to that portion is that you need to make sure the client understands that when they sign off on that, this is what they are signing off on. And, and this is go, this goes for the mood board as well. I've gone through the process.

I've done mood boards, I've done wire frames. Um, I've done a mock-up. And then when I went to develop it, the client was like, whoa, whoa, whoa. Like, wait, this isn't what I thought it was going to look like. And I had to say, Oh, like what happened? Like what was wrong between what I was showing you, the site was going to look like and what you didn't understand, it was going to look like, you know?

Um, so you want to have just a list of things that you're communicating. And I almost say like, make a checklist of something that you're going to give to them to say that when you say yes to this, or when you sign off on. This is what you're signing off on. Right? So when it comes to a wireframe, you're signing off on the size of the fonts.

You're signing off on the layout, you're signing off on the shades of the coloring. So what I'll do is like if I have a white background, um, then that will likely be white. If I have a gray background that will likely be some color that I'm going to fill in. So, um, I just don't want to leave any of those details up for interpreter.

Because if I do, it's likely that the client is going to interpret it incorrectly. Um, and so. From there is when I would do a more Hi-Fi mock-up so, um, then we start introducing images. We start introducing colors. We, we, um, maybe fine tune, um, a little bit of what the wireframe looked like. I start looking at, um, the potential mobile, mobile responsiveness, you know, like how it's, when things shift and get smaller.

How are things going to shift on this screen? Um, and then only from there, do I do, uh, revisions? So the revision process, um, Uh, is important to, to take on before development. Um, because once you've developed things, it is much more difficult to go back and make a revision than if you're just mocking a mocking it up and Figma or sketch or whatever it is that you use.

Right. Um, and so my revision process is, is always being fine tuned. Um, but typically I'll say you've got one or two revisions with me, and that depends on their price point. Right. And I have them go through a site called markup.io. And, um, it's a, it's a great tool. Uh, you might be familiar with it as a product designer.

It, it takes a snapshot of your website or even anything on your screen. And you could use a mobile app. And then the client has the ability to add little comments and then you can reply to those comments. Or you can say that you have resolved that comment. Right. Um, and so that way, what you're doing is you're avoiding an endless chain of emails, um, of revision requests.

Because when I, when I've done things that way, like. I, I missed stuff. The client gets mad. I look unprofessional and it's not that I'm not trying. It's just that, like, we have an, uh, an email reply of like a hundred replies and it's almost impossible that like actually follow along. So you don't have to use market.io.

There's other great things out there. Um, but just something, something outside of just an email or just text message or I've had clients try to use word docs before and I'm like, no, no, no, no. Like I'm not a copywriter, you know, like we're doing design, you know? So are you tracking with all of this? This all makes sense.

It is. Yeah.

[00:18:08] Evan: The stuff that I've touched on in my normal day-to-day

[00:18:10] Chris: job

[00:18:12] Evan: throughout the day, which allows you to do comments right on the design file too. So where I am now is that I primarily like live in Figma and my whole job is to just pass that to somebody to develop. So there's a little. Sensibility.

And so now that I'm expanding out, I just want to understand things that I should be aware of when I'm incorporating more work on my shoulders

to,

[00:18:31] Chris: to do, you know, what's great is now that you're doing the development, you're going to have a better idea of when you're designing something, what that means for a developer, you know, and you, you having done this in your background, like you probably already have a, somewhat of a sense.

Um, but you're going to know your limitations a little bit more. Um, and what, what are you working in Webflow? Is that what I heard you say? Yes. Yeah. And that's a great platform. And so, you know, just like anything else, it'll have things that are easy to do or have things that it's going to take some work.

Um, and so really this being kind of your, one of your projects all on your own, this, this will be just a little. Portion for that. So no need to feel like you have to be super professional in, in the midst of all this, when you're doing that. Like, if it takes you much longer, like, you know, just my, my stance has always been to communicate up front with the client, like where I'm at and my skill level, you know?

So a client asks me to. Do something I've never done before. Right. Can I do it probably. Is it going to be a little bit messier than, than me just mocking up a website? Definitely. You know, so are you going to feel that as a client? Maybe not. You know, and so I just have those conversations so that they know when we get to a point where I'm a little bit.

Depth. Like, it's not like, man, what's going on, Chris? Why isn't this working the way that we thought it would. Right. So, um, you know, that, that's where I would say, you know, you asked about how do you, um, not over promise and under-deliver, if there's a question mark in your head, you know, or if you've never done something before, just say it, you know, like I'm not, I'm not afraid of that.

Right. I'm I am an advocate for. Being relationally driven as a freelancer and being 100% open and honest. And you know, if you preface that, if you say like, this is me, right, I'm not going to make myself sound great just to get the job right. Then somebody is going to respect you a lot more. And you're actually much more likely to get the project than if you just smoke and mirrors everybody.

And you're like, no, this is no problem. I'll get it done for you in half an hour. You know, when. It takes like four months and they're, everybody's frustrated and you don't keep going as a freelancer because nobody trusts you anymore. All the hard work is really done and, and the design portion of it, because that's where things are.

People have a lot of opinions, you know, like, um, how something was looking or flowing or whatever. Um, and so once you make it to the development process, like it's really just. Make what you've mocked up, you know? Um, and then I'll typically have like a final run through on, um, the development side of things.

And then we have launched protocols. So we, we look at their website and we say, w what's transitioning over what's what's what pages are going away. Right. So we don't want to leave any four or four pages out there. When it makes sure they all have redirects. Um, is there anything that I needed to do with Google analytics?

Um, as far as setup goes, um, I need to make sure that I'm telling Google to crawl the new site. Um, we're doing site maps for Google as well. Um, so the searchability is a little bit easier. Um, and you know, just all of those practical things of like, you know, it's like, it's like moving a house. Like it's, it's not a fun, like it's, it's really kind of the sexier part of the whole process.

You got to make sure everything's packed up and ready to go and make sure nothing breaks. And in the process, you know, I've, I've had folks who had really great SEO and I've had to really make sure, like we are not losing any links from any page that they have backlinks on all that kind of stuff. So thinking through that, and then the last part of it all, um, which is where a lot of freelancers miss.

Is the off-boarding process, right? So you've onboarded by doing a ton of questions and you're going to off-board by tuning a ton of questions. And this will be, this will give you incredible insight, um, for how you did what you could do differently. Um, it'll tell you why they chose you over somebody else.

So you're asking those questions. Why me, you know, why not. Um, another influencer that or another, um, not influencer. Maybe you are an influencer, another designer that, uh, is cheaper, you know? Um, and then also these will help you get testimonies for the future. So you can put this on your own website. If they say I really enjoyed working with Evan, he was nothing but professional.

Like, boom, you've got a, an example for a testimony that you can put on your way. And then it, it, it leaves you open for followup as well. Right? So that, um, when you've got a client, you don't just want to be done and then throw the peace sign up and never talk to them again. Like this is an ongoing relationship that you want to check in every quarter, you know?

So putting something on your calendar, Hey, just wanted to check in how's the website. How are you guys doing? Um, anything I can help you with kind of stuff, you know? Um, because you want to keep yourself top of mind when either somebody else from the organization has another project that they might be interested in, you getting on, or maybe somebody that's connected to them, like who did your website?

Right. And they don't want to have to go a year from now, who was it that did our website, right? Like you want to, you want to keep them at the, uh, at the top of, uh, keep yourself at the top of their mind. So anyways, that's kind of like a fire hydrant of, of information when it comes to all that stuff. Is it any clarification on any of those steps?

[00:24:14] Evan: I am looking at the

[00:24:20] Chris: they've given me,

[00:24:24] Evan: uh,

[00:24:27] Chris: Sure. Yeah,

for sure. For sure. Well, man, I mean you're off to a strong start, so you know, another thing in the midst of all this is. You have to be sure. Like, just because you've got a process doesn't mean that you need to stick to that at all costs, right? Like I'm constantly fine tuning things when it comes to like, like the checklist of things that you are signing off for, when you say that this is approved, like that just came from a project that I'm currently working.

Right. And I'm like, man, how did, how did we miss this? Like where did we go wrong? And so I had a conversation with my wife. Who's helping me on the project. Like what can we do so that this never happens again, you know? Um, so that way, you know, five years from now, when you're doing, you know, 10 projects a month, you're not pulling your hair out because your system is crappy.

You know, like it's, it's the best time at the very beginning of what you're doing. Um, to just spend time massaging that process so that when things do start amping up, um, it's not nearly as painful and it's much easier to pass along to somebody that you contract to say like, Hey, this is the process, right?

And here's step one, here's step two, here's step three and so on. And so. So anything else I can help you out with today, man? Oh, this is

[00:25:46] Evan: all perfect information. I

really

[00:25:48] Chris: appreciate you taking the time to talk to me, man. It was so fun getting to chat with Evan about his new project, and hopefully you got a lot out of that episode as well.

And you got some tangible insight on how to implement your own web design process with clients. Uh, way, like right now, like don't wait for it. Just get it going. Hey, if you'd like to chat, I do free 15 minute phone calls every single week. And I would love to have a conversation with you. So go to self-made web designer.com.

If you've got questions or just want to talk to a real person about your freelance web design. Board development journey. Hey, we've got another episode coming up soon, so make sure to subscribe wherever you are listening or watching. So you don't miss it until next time. Keep working hard and don't forget if you don't quit, you.