A Step-By-Step Website Design & Development Process

Kyle Van Deusen
August 20, 2020

Share This Article:

Share on facebook
Share on twitter
Share on email

With the official launch of Docket WP drawing near I figured it was high-time I share the website design and development process I use internally in my own agency, OGAL Web Design.

If I had to pick one thing that’s had the biggest impact on my profitability as a web agency— it’s not raising my prices (though that helped)— it’s building a repeatable system that guides me from an initial inquiry to a completed project each and every time.

By following a step-by-step process I’ve cut project timelines down significantly, reduced redundant tasks, and can quickly see where every active project stands (and what action I need to take next).

My biggest regret is all the excuses I made to not do this sooner. I kept thinking that “once I get everything figured out, writing down a process would be easy”. But to be honest, I’m not sure we will every figure everything out. The only way to improve your process is to have one in the first place.

Repeat the things that work, and find new ways for the things that cause mistakes. Continue improving this process with each and every project, and before you know it, every project will be more predictable, easier to manage, and ultimately— more profitable.

My 6-Phase Design & Development Process

Before you dive into the meat and potatoes (hey, Adam), there are a few things I want to note about the process I’m sharing with you…

This is not one size fits all. I’ve realized that processes are actually quite personal. They vary depending on your experience, stack, the type of work your company offers, and about a million other factors. If you think you can copy and paste your way to success, you’re going to be severely disappointed. This is the map that works for me. Perhaps you’ll find some similarities, and perhaps not. You’re better off viewing this list as a process, not the process.

This was not built in a day. The task of building this process took many months over the span of dozens of projects. The first draft looked nothing like this… And that’s okay. You’ll never have this down perfect (as far as I can tell). But you’re better off starting now and continuing to adjust over time with each project. When you find a better way, document it and you’ll save yourself time and money each time you do.

Not every bullet carries the same weight. This goes back to how personal these lists can be. You’ll notice some items are very specific (like “rename application”, while others are broad (like “develop full website”). Some tasks require attention to detail and can be replicated on every project, while some can differ greatly from client to client. These act as shorthand notes to keep me on track— not an instructional manual.

Each “Phase” is distinct. Each phase constitutes a different part of the project. The truth is “web design” isn’t one task. It’s a multi-disciplinary job that requires you to wear many different hats. While I don’t share this full list with my clients, I do share the phases. It’s made clear that any request that causes us to go backwards into a previous phase that is completed is going to come with both an extended timeline and an extra charge. Each phase is dependent on the phase the precedes it— and going back to adjust the sitemap when we’re at launch can (and usually does) effect the design, content, and development (even if it seems like a minor change).

Yes, the order is important. I’ve flipped and flopped these items around hundreds of times. The key is to maximize your efficiency by making sure any task that is dependent on another gets done in the right order— even if one happens 3 phases before the other. As you develop your processes, pay close attention to any time you have to go back and do something or fix something. So much time can be saved by simply doing things in the right order.

With that said— let’s get to the list.

Note: Items in italic are things that the customer is required to do.

Phase 0 – Prospect

  • Initial Contact
  • Project Inquiry Form
  • Determine Client Viability
  • Send “Schedule Discovery Meeting” Email Template
  • Discovery Meeting
  • Proposal
  • Signed Proposal

Phase 1 – Onboarding

  • Setup Invoice
  • Send “Deposit Invoice” Email Template
  • Paid Deposit Invoice
  • Create Client Dashboard
  • Clone “New Project File” In Google Drive & Rename
  • Link Onboarding Questionnaire in Client Dashboard
  • Send “Welcome Aboard” Email Template
  • Completed Onboarding Questionnaire

Phase 2 – Setup

  • Setup Sitemap
  • Send “Sitemap” Email Template
  • Sitemap Approval
  • Setup Content Templates (Google Docs)
  • Link Content Templates in Client Dashboard
  • Send “Content Collection” Email Template
  • Setup Project Color Palette
  • Setup Project Typography
  • Link Color Palette & Typography Proofs in Client Dashboard
  • Send “Typography & Colors” Email Template
  • Typography & Colors Approval
  • Setup Development Site
    • Clone Starter Site in Cloudways
    • Rename Application
    • Add Subdomain in Cloudflare ([company].ogalweb.com)
    • Change Primary Domain Cloudways
    • Install SSL Certificate
    • Connect Development Site to ProjectHuddle Dashboard
    • Add User to ProjectHuddle Project
    • Change Site Title & Tagline
    • Link & Activate ‘Development Site’ Module in Client Dashboard

Phase 3 – Content

  • Customer Supplies All Content
  • Content Collaboration
  • Content Approval

Phase 4 – Initial Design

  • Design Homepage
  • Design Page Views / Templates
  • Save Screenshots of Each Design
  • Upload Screenshots to ProjectHuuddle
  • Send “Initial Design” Email Template
  • Revisions
  • Initial Design Approval

Phase 5 – Development

  • Design All Pages in Sitemap
  • Sent “Site Development” Email Template
  • Revisions (via ProjectHuddle)
  • Development Site Approval (in writing)

Phase 6 – Launch

  • Run WebSite Auditor Audit
  • Ensure Access to DNS, Domain, etc.
  • Send “Pre-Launch” Email Template with Final Invoice
  • Schedule Launch Date
  • Perform Pre-Launch Checklist (in Docket WP)
  • Send “Launch Day” Email Template
  • Launch Website
  • Performance Post-Launch Checklist (in Docket WP)
  • Send “Post-Launch” Email Template

A Couple Notes

During Phase 2 (Setup) you’ll see that I start with getting content templates setup for my client and then go on to a bunch of web setup. Waiting for content tends to be one of the longest stretches, so the tasks that go between “Send ‘Content Collection’ Email Template” and “Customer Supplies All Content” are things I can work on in the background in the meantime. This has been tweaked many times, but this setup allows me to keep things moving forward while I’m waiting on their content. Once the content is done, I already have colors & typography chosen as well as a starter site all setup.


Of course this list had to start and stop somewhere. Things I do to acquire prospects before the first phrase, and my ongoing relationship with the customer after launch are out of the scope of this process.


Email templates (or “canned” emails) have been one of the biggest time savers. Not only does it make sending these emails quicker, but it makes me a better communicator. I’ve tweaked these emails countless times to ensure that I relay all the important information to my client at the appropriate time.

Want a copy of all the Email Templates I use in my process?

Fill in your details below and I’ll send you a copy of all 11 email templates referenced in this process (plus 3 bonus emails I didn’t mention).

Signing up adds you to our email list. You can unsubscribe at any time, and we don’t share your info. Here’s our Privacy Policy.

Share this Content
Share on facebook
Share on twitter
Share on email

Try Docket WP Risk-Free

If having your processes at your fingertips doesn’t boost your productivity and save you from costly mistakes, then you wont pay a dime. If it does, you’ll wonder how you ever lived without it!

import checklists