WordPress Web Design / Development Process

Project Panorama is a WordPress Project Management Plugin that will have you loving your job again!

If you’re in a position where you’ll be delivering a WordPress website to a client or as part of your job, approaching the project with a proven and methodical process will save you wasted effort and ensure you deliver the highest quality end product.

The seven-phase approach outlined in this article has been honed over 15 years of delivering WordPress services.

We’ll cover:

  • Discovery
  • Specifications
  • Strategy
  • Design
  • Development
  • Build-out
  • Quality Assurance
  • Launch

Let’s dive in!

Discovery

Earlier in my career, I thought web design projects started with design. I was wrong.

You’re actually starting the moment you have your first discussion with a prospect, boss, or department. You can’t build a WordPress website if you don’t know what you’re building.

Discovery is an overlooked but critically important phase. The success of the project is significantly impacted by how well you understand the website requirements. Failure to do so could mean building a site that doesn’t meet the needs of the project or requiring time-intensive rework where there are misunderstandings.

Consider this example, let’s say you’re looking to have a building built. You wouldn’t want an architect to start creating drawings before they understood your needs? A single-family home will be designed differently than an office building.

The same applies to web design and development.

The goal of the discovery phase is to establish:

  1. The business objectives of the site
  2. The functional requirements of the site
  3. The content requirements of the site

This will ensure you have everything you need to tackle the next phase, specifications.

Make sure you document these three points and get your client or stakeholders to sign off on them. This way, should things change later on in the project you have justification for charging more or taking more time.

Specifications

Let’s revisit our building example. You wouldn’t build a house without detailed specifications on the footprint, the number of rooms, baths, etc…

Similarly, you need to write up detailed specifications on what exactly you’ll build into the website before moving forward.

Typically specifications are more detailed accounts of the requirements from the discovery phase. Your goal is to remove any ambiguity from what is or isn’t included in the project. More detail is better.

We break our specifications into the following groups of deliverables:

  • Strategy
  • Design
  • Development
  • Build-out
  • Quality Assurance
  • Launch

If this list looks familiar, it’s because you’ll be clearly documenting everything you plan on doing throughout the remainder of the project. For each of these group’s we’ll stipulate:

  • Require meetings
  • Specific deliverables (design concepts, sitemaps, etc…)
  • Required plugins or themes
  • Number of pages on the site
  • Approximate length of pages
  • Who’ll be supplying the content and assets
  • Rounds of revisions and testing

Again, the more granular you are the better. For example, if there are going to be contact forms on the site we’ll indicate how many fields can be added before it costs more money. This prevents you from being blindsided by a multi-page, hundred field form.

Get your client or stakeholders to sign off on the specifications. This ensures everyone is on the same page and gives you leverage should they want to change something later in the project.

With the specification approved you can start diving into building the WordPress website.

Strategy

Before you can determine the look and feel or what theme to use, you need to spend time identifying how you’ll approach the project. This occurs in the strategy phase.

Simply put, strategy describes:

  • Where you are now
  • Where you want to be
  • How you’ll get there

It doesn’t need to be overly complicated. We’ll typically create a brief document that includes:

  • Project summary (where we are now)
  • A list of business objectives and key performance indicators (where we want to be)
  • How we’ll get there:
    • Sitemap
    • Creative brief / recommended theme
    • Content inventory
    • Wireframes

While strategy is a great deliverable, going through the process is incredibly valuable. It will help focus your attention on goals of the project and allow you to plan on how best to achieve them without getting bogged down in the nuace of look and feel, plugins, themes, etc…

Design

With a clear roadmap of where you’re going you can start the design process. If you’re a designer this is where you’d create high fidelity mock-ups of any unique pages or templates on the site. Some common examples include:

  • Homepage
  • Basic interior page
  • Product page
  • Service page
  • Team page

If you’re not a designer (or you’re not hiring one) then you can achieve the same result by installing the theme you’re recommending, building out unique templates with filler content, and customizing it per the project requirements. Rather than sharing a link to the site and new theme I recommend taking screenshots of the key pages. This prevents common questions and confusion around navigating a largely incomplete site.

As in all previous phases, get client sign off before moving forward. I guarantee you’ll encounter design changes at the end of a project sometime in your career.

Development

At this stage you know the goals, you have detailed specifications, and you know what the site will look like. Now you can start building.

The specifics of this phase will change based on your approach. You might use an existing theme or build one custom. You might be creating custom functionality or leveraging existing plugins. You might be doing a bit of everything.

Regardless of approach, the goal of this phase is to get the site ready for integrating content. Some tips:

  • Always build your sites on a development server rather than modifying a live site
  • Don’t share the development site with your client until you’re ready for them to give feedback (they will give you feedback even if you ask them not to)
  • Take notes along the way, inveitably you’ll come across something you need to circle back to at a later date. This will prevent you from forgetting it.

When you’ve completed development you’re ready to build out the site!

Build-out

The build-out phase is where you take an “empty shell” of a website and turn it into a finished product. If we use our building analogy, this is where you’ll be putting in and arranging furniture so the family can live and use their new space.

Unless you are supplying the content, your client or stakeholders should have delivered all final content prior to starting the build out. A couple of important lessons:

  • Make sure you compare what was delivered against your content inventory from the strategy phase (most clients will miss a handful of assets or pages)
  • Get your client to sign off that the content is final, you don’t want to be replacing all the content on the site for free

Common build-out tasks include:

  • Populating content
  • Building contact forms
  • Adding products
  • Loading images

At this stage, the website should be looking like a finished product!

Quality Assurance

All websites should be tested for quality prior to handing off to your client. Even small websites are complicated. During this phase you should go through each page of the site and look for any content that’s missed, anything that looks out of place, or broken.

You should also test the website on your previously agreed upon browsers, devices and opperating systems. For example, you might have agreed that you will test on:

  • Latest version of Chrome Mac/PC
  • Latest version of Firefox Mac/PC
  • Latest version of Edge
  • iPhone XS
  • Samsung Gallexy

It’s best to have someone who’s not familiar with the site test it. They’ll have fresh eyes and will often catch things you don’t. If that’s not possible, just do your best with what you have.

Once complete, hand the site off to your client for review. A couple of important tips:

  • Tell them how many rounds of revisions they get (this prevents a never ending loop of revisions, and I recommend 2)
  • Have them add their feedback to a shared Google Doc or Spreadsheet so you’re not getting an email every time they see something
  • Remind them what is in scope (bugs, small changes, etc…) and what isn’t (new functionality, design changes, etc…)

Launch

Once you’ve made it through the quality assurance phase you’re ready to launch the site. Like all phases prior, make sure you get sign off agreeing the client has reviewed the site and has no more edits or changes.

I recommend scheduling launch dates no sooner than 48 hours after approval and not on Fridays. This prevents making last minute edits right until launch (which typically will cause mistakes and errors) and ensures you’ll be working and available should something come up after launch.

Depending on the hosting situation how you go about launching the site could change. Managed hosting services like WP Engine allow you to copy one enviornment to another, facilitating easy migration from development to production.

Other hosting enviornments will require a more manual process.

Once the site is live make sure to follow up with the client and let them know how they can edit and manage their site and get a positive review for all your hard work!

Back to school sale, ends soon!
Stay Connected Sale – 50% off
+