Transcription
Today, I'm going to share with you my web design process from start to finish, but be sure to stay till the end when I'll share a free Trello template and client questionnaire that I use in my own web design business. Are you ready? Let's go.
I break down every web design project into four sections: onboarding, design and development, launch, and then offboarding. Now, that last one might sound like a made-up word, and that's because it kind of is, but it's something that I've seen actually double or even triple the lifelong revenue that I get from one single client. So it can't be skipped.
With onboarding, the first step is always the discovery call. And this is where you get somebody to jump on a Zoom call, get on a phone call, talk about their project, and see if you are a good fit for what they're looking for. But you've got to be really careful. What I've seen a lot of web designers do, and even freelancers who I've been across the seat from, is they end up talking about themselves so much. It's kind of like going on a date. You don't want to be the only person talking, right? You want there to be a lot of good back and forth. In fact, you want to make sure to make the client the star of the show. You want to ask them about their business, their hopes, and their dreams, things that they found frustrating with their current website, things that they found frustrating working with other freelancers. You're trying to unearth some really good information that will help you as you go along the process of building their website.
After you've done a discovery call, you move on to a project proposal, which hopefully turns into a contract and your first payment. With each of these, you want to make sure that you're over-communicating. Nothing will kill what could have been a fantastic project by simply not responding or responding too late. Trust me, you're going to beat out 90 percent of your competition if you just respond to emails within 48 hours.
Now, listen, you don't have a project until you have a signed contract and a first payment. Without those, it's just a lovely idea. I've had clients who I've had great conversations with. They've taken me out for lunch. I met their staff, and then lo and behold, they ghosted me, and I never heard from them again. So don't put your eggs in any basket, but especially a basket that doesn't have a signed contract and a first payment.
After I get those, I move on to our kickoff call. And on the kickoff call, we start getting really intentional about the dates of the project, including timelines as well as deadlines. And not just deadlines for me, deadlines for the clients as well. Nothing will derail a project quite like having to wait on a client to get you the stuff that you need just to keep moving forward, whether that's copy, your images, branding elements, or maybe even feedback on some of the stuff that you're doing.
So how do you avoid that? You give them deadlines with consequences, and those consequences might be a fee, or it might be a missed opportunity to give feedback. For instance, with revisions, I give all of my clients 24 hours to respond. If they don't respond within 24 hours, that round of revisions, they're going to wait until the very end. If you give them three days, they're going to wait until three days. If you give them 24 hours, they're going to do it within 24 hours. This is one of the best ways that I've seen to keep projects moving forward.
The next step in our process is the design and development stage. Now, in this stage, you want to step up the complexity in bite-sized chunks. What do I mean by that? You never just want to go and start designing the homepage. That might lead to a lot of unnecessary work. You might have to go back and change things completely, and it doesn't allow your client to really be speaking into the process because no matter what they've told you, until they start seeing things, it's going to be really tough for them to communicate what it is that they're actually looking for.
So how do you do that? Well, you start with a sitemap and a wireframe. A sitemap is just a really basic layout of all the pages on the website and how they're connected to one another. And then a wireframe is a really low-fi mockup of what each of those pages is going to look like. And this is where I differ from most of the designers that I know. A lot of other designers will tell you, you do a low-fi wireframe where you've got rectangles that represent images and you draw a little squiggly line that represents text, or maybe the little pictures of icons when you want an icon in a certain spot. But that's actually gotten me into trouble in the past. So what I like to do is go even more low-fi. We're talking about low, low-fi. Okay. This is where I just say, okay, this first section on the homepage is going to be about this. The second section is going to be about this. The third section is going to be about this. There's no design decisions being communicated in my wireframes.
And why is that? Well, in the past, if I've ever showed the client something, and then as I was designing it, had to make a different decision, I would have to convince them that this new decision was better than the wireframe that I showed them. For instance, I set a wireframe up for a client and I used just a really boilerplate font. They had approved the wireframe, and then I went on to start designing it and show them the designs, and they loved it, but they said, "Could we use the font that we used in the wireframes?" And that absolutely deflated me because it was not a creative font, and I didn't really feel like it fit. So my encouragement to you is to go as low-fi as you can. I use a tool called Octopus.do for all of my wireframes, and they actually have an AI component where you can tell them what type of website that you're working on, and it'll kind of spill out a rough idea of what it thinks you should be doing. It's a great first thing to start with.
Once I get the sitemap and wireframes all kind of signed off on, then I go to the homepage, and it's typically the homepage that takes the majority of my time to build out. And why is that? Well, the homepage really sets the stage for all of the other pages on the website. It's most of the times one of the longest pages, and you can take sections of that homepage and then copy it over to other pages. So you're not having to come up with completely new layouts and design elements for every single page.
And once I'm done with the design of the homepage, I'll send it off to the client for revision requests. Now, I don't just send them a URL, right? This is really important, and one of the biggest things that will help you avoid revisions in the future. You've got to really clearly be able to say, "This is why I put this here," or "This is why I used this element." Most clients aren't really going to have an idea for what good design is. So there needs to be a reasoning behind your decision. So I'll include a Loom video, and sometimes I'll even jump on a call so I can show clients exactly what I did and get a little bit of feedback in that moment as well.
Once I send that off, they've got 24 hours to respond, and I move on to the rest of the pages. And this looks a lot like the homepage. I go and design, and then I send it off to the client where they'll give me some feedback.
So at this point, you're probably wondering how many revisions I do for each project. I only do one revision for each step of the project, right? So they get a revision on the wireframes and the sitemap. They get a revision on the homepage, and then they get a revision on all of the other pages. So every time they have 24 hours to give me feedback. Then I'll go and work on that, and once that's done, it's done. There's no back and forth. "What do you think about it now?" It's just, "Give me your feedback. I go, I make changes based on your feedback, and then I move to the next phase."
If at any point they're like, "Hey, can we go back and change the sitemap?" The answer is, "That round of revisions is currently closed," and so we are moving on. Now, if you want to, you can allow them to pay an additional fee to go back and make changes, or you can just be generous. This isn't about sticking it to your clients. This is just about continuing to move a project forward. And that's something I try to really communicate with every single client. I'm not just the web designer; I'm also a little bit of a project manager, and it's my job just to make sure that things move forward because everybody wants their website finished yesterday. There's nobody that's like, "We've got a year," right? So you're actually helping your clients if you just move things quickly and efficiently.
Once all of that's done, it's time to move on to the launch phase. At this point, the client and I will pick a launch date. And typically, it's a time when they don't have a lot of website traffic, and I know I can get the help that I need from the platforms that we'll be launching from. In that time, I'm testing everything, right? I'm filling out contact forms. If they've got products, I'm test-buying those products. I'm signing up for lead magnets. I'm seeing if I'm getting the emails. I'm just dogfooding my entire website because you don't want to launch a website only to have to pull it back because things weren't working the way that they were supposed to be. So you've done all the testing that you had to do, and you launch the website. Congratulations.
The next step in my process is the offboarding. Now, this is one of the ones that I was talking about at the very beginning that I've seen so many web designers fail to follow through on. There's a few parts of the offboarding stage, right? First, you want to make sure that the client feels that they are supported within those first couple weeks of the website being launched. The client's going to have a lot of questions, right? "How do I log in?" "How do I add a blog post?" "How do I add a new product?" There's so many things that they could be doing that maybe they never had the ability to do before on their old website. So you want to give them a little bit of a grace period where you're just available to kind of jump in and answer questions as need be.
Now, one of the things that helps with this is to have an FAQ doc where they can kind of look through and see, like, "Okay, here's this that I need to do if I ever want to change the text out or change an image out." Something I do is record Loom videos where I just kind of walk through that client-specific site and how they do something. I put that on a Word doc that they then get to keep for perpetuity. It's almost like a help doc you'd have on an application or a SaaS product.
And you'd think at this point you'd be absolutely done with the project, but you'd be wrong. Okay? You want to keep following up continuously with the client. So remember important dates. It's like the date they launched their new website, or maybe birthdays, or maybe business anniversaries, right? You're just looking for excuses to stay in communication with this person that you did business with. You don't want to hound them down every single day or every single week, not even every single month, but at a really comfortable pace, you want to be reaching out and saying, "Hey, how's it going? How's the business? How's the website?"
And why is that? Well, there's no business like repeat business. Okay? You've already convinced this client that you're worth giving money to, and so it's going to be even easier to convince them in the future to do it again. I've had some clients that have stayed with me for nearly a decade just because I kept following up with them. So, inevitably, what would happen after I said, "Hey, how's it going? How's the business going?" They'd say, "Oh, by the way, we were thinking about doing this." And I said, "Great, let me write you up a proposal." I don't even have to go through the discovery process because I know exactly what they're looking for and what their website looks like. So do yourself a favor and make sure to follow up with your past clients on a consistent basis.
Well, hey, I hope this episode has been helpful for you. Like I mentioned earlier, I've got some free resources, including a Trello template that I use on every single project that outlines this exact process that I took you through that you can use in your own web design business. So if you'd like that, there's a link to this in the description, as well as a client questionnaire that I use.