How To Create a Bulletproof Web Design Project Brief

Elizabeth Alli -

I've been designing websites for a long time now. Most of that time has been spent as a freelancer working for startups, corporations and small businesses. Each project that I do usually starts out with a discovery call, followed by a string of correspondence (usually through email) where we nail down the project scope specifics and then ends with a quote and deposit payment from the client.

Naturally, there are many ways to go about this, and I've done a poor job of it many times. This is what I've come up with that has worked really well for me over the years and maybe helpful to you to.

Step 1 - Discovery Phase:

So you have a potential client. You've had a call with them about their general needs. Maybe they want a website designed and developed. Maybe they want a mobile app built. They mostly know exactly what they need and even if they do know, they probably really don't know.

This is a chance for you as the freelancer to both asked questions about their business and their problem and educate/sell them on the solution that you imagine will work best and how you plan to execute that solution.

Step 2 - Survey

Let's use a B2B (Business to consumer) website as an example. The client needs a new site to advertise their AR app building software. They know they want to get more developers using their software to build AR apps but their not sure what that needs to look like.

This is a where a bit of UX (User Experience design) comes in handy.

I like to send out a short discovery survey to get them to answer some direct questions about their business, their market, their current position and their goals.

I've shared my Client Discovery Questionnaire here for Notion, you can click here to copy it to your Notion workspace for free!

Tip: If you are also the developer of the web project you'll want to know what your starting point is. Will you be working with an existing dev team? Does the client already have a domain name and hosting? Or will you be a one-woman/man show setting up their entire platform from scratch?

Once they've filled out the survey. Let them know that you will review their answers and send them a project scope/estimate shortly.

Keep in mind: While you're looking over their answers, start thinking from different angles. First, from the perspective of the business and how to get them to their goal as directly as possible and what that might look like. Then from their user perspective and how to convince that market why their business provides something that is valuable to them. It's always a matter of balancing the business goals with the market needs.

It's always a matter of balancing the business goals with the market needs.

Step 3 - Project Scope

Now that you've given that some thought its time to outline your plan of getting them from point A (where they are now) to point B (the end of the project).

Write an intro paragraph that summarizes your plan for meeting their business and project needs.

Example:

"The following proposal outlines the project scope and lays out a plan to collaborate with your technical to complete the redesign and WordPress integration of [enter project name or website here]

This short engagement will focus on a 4 page redesign of your existing website in order to establish you as an authority and premium resource in the field of AR software."

Next, I like to create a outline detailing all the things I anticipate I will have to do and how long I think it will take including time for calls and answering emails:

Phase 1 Design - 4-Page Website

  • Create 2 style tiles - share and iterate twice  (4hrs)
  • Site Wire-frame - share and iterate once (2hrs)
  • Global design elements: Header/Navigation, Footer (1 hr)
  • Image curation, editing and resizing (2hrs)
  • Page 1 - Homepage mockup - 4 sections (6hrs)
  • Page 2 - About us - Intro paragraph, Employees with bios and social links (2hrs)
  • Page 3 - Blog - Blog roll with large images and sidebar (2hrs)
  • Page 4 - Contact Us - Contact form that is routed to different email addresses with select dropdown (1hr)

Total time:  ~22 hours of design time

Phase 2 Development: - 4 Page Website WordPress Implementation

  • Hosting and server setup (2hrs)
  • Global element setup (3hrs)
  • Page 1 -Homepage implementation (2hr)
  • Page 2 -About us implementation (2hrs)
  • Page 3 -Blog implementation (2hrs)
  • Page 4 -Contact form integration and testing (3hrs)
  • Responsive programming and testing (2hrs)

Total time: ~16 hours of development time

Total project time: ~38hrs

*These times are derived from past project hour tracking that historically detailed approximately how long it took me to complete these tasks. (I like to use Billings)

Step 4 - Estimate your time

Now throw all these times/hourly numbers out the window. Yep, that's what I said. The point of adding hours next to each item isn't to share those with the client, it's to get your head straight. It's an exercise for setting self-expectations, being clear on the work that needs to get done at a granular level and leaving buffer room for iterations, reviews, calls, emails and administrative work. So tack on another 2 hours or so for that and you've got yourself a 40 hr project.

I am not a fan of quoting projects at an hourly rate (unless specifically requested by my client). I prefer estimating a project rate and a date of estimated completion. I always calculate based on my hourly rate, but I don't reveal it. The reason I do this is that I want to have a good idea of when I'm in the red when it comes to my work hours spent. That way, I can keep myself on task and prevent scope creep from my clients.

For example, if I've already spent 3.5 hours going back and forth on the style tile iterations with the client I can say to them, 'Hey in order to meet the deadline, I recommend we stop the iterations here and move forward with your favorite tile.' This keeps everybody on task and the project moving towards completion.

Email that to them and let them know that they should look over it and request any changes and that you will send over the final project scope, estimate and contract once you have their sign-off.

Once they've responded and the scope is nailed down. Attach an estimate for the cost of the project that includes the deposit and how they should pay you. (I always require 25% of the entire project cost before starting).

Send that to them in an email along with any updates to the Project Scope you've made attached.

Now you can begin cost negotiations (if any). Hopefully, they request minimal changes and are happy with the estimate and you can move on to collecting your deposit, the signed contract and opening up your design app to get started!

There are so many things that can go wrong and suck up your time unexpectedly during a project and there are also many things that will pleasantly take way less time than you anticipated, but with some foresight, communication and planning you can strike a good balance that keeps everyone happy and the projects flowing!