How to Write a Design Brief to Keep Your Web Design Projects On Track

How to Write a Design Brief to Keep Your Web Design Projects On Track

Design-brief-heroOver the past few years, there’s been a lot of talk about the design brief. Ever since R/GA’s controversial presentation at the Cannes Lions International Festival of Creativity in 2014, creatives around the world have been debating whether or not briefs are still relevant in the design, development, and media industries.

But briefs are far more important than R/GA’s talk led on. They are an integral step when creating a strategic approach to project coordination. When effectively written, a design brief will not only allow you to identify and avoid roadblocks early on, but also help smooth out and speed up your design and development process altogether.

Whether you’ve used briefs in the past or not, you should consider adding them to every project’s workflow. Here’s everything you need to know about writing a strategic design brief to keep yourself organized and delight your clients.

Free Design Brief Template
We've created a simple brief template that you can customize and use for your web design and development projects. Download your template for free today.

What exactly is a design brief?

A design brief is a project management document that allows you to identify the scope, scale, and core details of your upcoming design project. Populated with the right information, the design brief has the potential to be one of your most powerful tools. It can be used to inform design decisions and effectively guide the overall workflow of your project; from conception to completion.

While every designer and agency tackles briefs in their own way, you’ll get the most out of it if you create yours collaboratively with your client at the onset of a project. Working on your brief this way allows you to clarify goals and objectives, receive input from important stakeholders, and, ultimately, hold both parties accountable for the final product.

If you and your clients have reached consensus before any work begins, you’ll likely avoid many unnecessary revisions or “We didn’t ask for that” moments during and after the project.

Here are a few other benefits of using design briefs in your projects:

  • Provides designers the necessary insight, background, and foundation for the effective creation of the visual design
  • Offers your team a more detailed picture of the client’s expectations, giving you everything you need to delight them
  • Helps keep individual contributors on track, while keeping the project on time and on budget
  • Gives the client a sense of involvement in the process, and comfort that the project is properly understood
  • Provides you with all design specs upfront
  • Helps you understand your client’s taste and identify their “must not-haves” for the project

Your design brief has value even after the completion of your project. If you’ve taken the time to draft a comprehensive brief, you’ll be able to use it as the basis for a case study to use in future pitches. If you’re unfamiliar with how to do this, check out our detailed walkthrough on how to write a web design case study.

The anatomy of a design brief

Briefs can come in a variety of shapes and sizes depending on the type of project you’re working on and the client you’re working with. To give you a sense of what to include, here are the core sections of an effective design brief.

1. Company profile

You should always ensure your briefs include an overview of your client’s business. This ensures that all members of your team are familiar with your client, their brand, and any internal factors that can influence the direction or success of the project.

Here are the key elements to include in this section:

  • Company details including name, industry, product lines, etc.
  • Brand differentiator and/or unique selling proposition
  • Brand mission, vision, values, and messaging
  • Key stakeholders, contributors, and points of contact within the business
  • List of direct and indirect competitors

When working with larger clients — especially when projects involve multiple stakeholders — it can be beneficial to formally acknowledge who within the organization has final approval for the project.

2. Project overview

The project overview is where you should provide a detailed description of the project that includes as much context and background as possible. When initially meeting with your client, try to formulate this section by asking the questions: “What are you doing?” and “Why are you doing it?”

The what is simple. Your overview should define the scope and scale of the project and its deliverables. Are you building something new? Are you redesigning something that exists? What other assets does the client expect at the completion of the project? These are all things that should be covered in this section.

The why is a little more complex. You should try to answer this question by identifying the design problem(s) your client faces that necessitated this project. Sometimes, by digging a little deeper into the why, you can discover alternative solutions that strategically meet the needs of your clients.

3. Goals and objectives

Designing websites may be a core offering that is central to your business, but to a client (especially those in ecommerce), a website is their business. In numbers or plain language, provide measurable outcomes for what this project is trying to achieve.

Goals reflect the overarching purpose of your project, while objectives highlight the granular methods in achieving that goal. Some sample examples of goals and their corresponding objectives for a website build or redesign could be:

The client wants more traffic to their website

  • Increase the amount of weekly sessions by 20% by X date.
  • Grow proportion of new monthly traffic to 40% of total by X date.

The client is looking to drive more revenue from their website

  • Increase daily revenue by 50% by X date.
  • Grow the total average order amount by 25% by X date.
  • Reduce cart abandonment by 15% by X date.

The client wants to increase engagement with their online content

  • Reduce average bounce rates by 10% by X date.
  • Increase the average number of pages viewed per session by 25% by X date.
  • Increase average time on page per user by 15% by X date.

By establishing goals and objectives up front, you’re not only suited to make more informed decisions around your design, but you’re also better armed to prove your value and worth to the client outside of the visual aesthetics of their website.

4. Target audience

Another way to inform your design decisions is to develop a solid understanding of the users who will be interacting with your client’s website.

If you’re lucky, your client will already be equipped with relevant research about their target audience and be willing to share it with you. However, not all business owners will have this information. If you find yourself in this circumstance, you have two options. You can try to use this opportunity to offer user research services as a value-add to the project. If they don’t bite, try asking them who their ideal customer is and work together to build an audience persona through discussion.

Your audience persona should include demographics such as age and gender, as well as psychographics like media consumption habits. This information can unveil important details about what resonates most with your client’s customers online. Are they apt to use mobile more than desktop? Do certain colors resonate more with their lifestyle?

Hopefully by defining their audience in your design brief, you’ll be armed to make informed decisions during design.

5. Design requirements

By including specific design requirements in your design brief, you can ensure you and your team has everything needed to work efficiently and meet client expectations. These details will not only round out your brief, but will also ensure that you don’t find yourself redesigning once you receive specs after the fact.

While requirements may vary for each project, you can include any of the following details about your deliverables:

  • Asset dimensions/resolutions
  • File formats
  • Required color palette
  • Image assets to be included
  • Associated copy documents

It is also worthwhile to include any reference materials in this section. These could include brand guidelines, mockups, moodboards, and anything else you feel could assist with the completion of the project. The more thorough your supporting documentation is, the less chance you’ll run into roadblocks while working through the design itself.

6. Budget and schedule

If you work in an agency, budgets and schedules are often seen as an afterthought and left for the client services team to deal with. However, these project components are just as vital for creatives as they are for your account services counterparts, and are unignorable for those of you working as freelancers.

The budget

Having a clear understanding of your client’s budget allows you to effectively manage their expectations as to what their money can get them, while also controlling how your team uses their time. When initially meeting with your client to scope out their job, make sure you allocate budget across all disciplines: research, design, copywriting, development, coordination, testing, and review. That way, you’re much more likely to avoid scope creep.

Without an explicit budget, it can be easy for you or your team to dive deep into a job and lose track of how many billable hours you’ve spent. To help avoid this type of situation, I also recommend using a time tracking app to help stay within the budgetary limits of the project.

The schedule

Projects need to stay on time to stay profitable — that’s why schedules are a must-have for your briefs. Your schedule should be realistic and account for potential changes or unexpected obstacles.

An effective schedule should not only highlight the final deadline, but also identify any progress milestones between the onset and endpoint of the project. It is crucial that your team can mutually anticipate completion dates for concepts, final designs, development work, and review periods.

While schedules are vital for keeping your team on track, they can also be valuable for your clients. Some clients you’ll work with won’t know how long it takes to research, design, and build a website. Thus, it’s important to set the expectation of what’s realistic and possible with them when creating your design brief. This, just like the entire design brief, ensures your team and client are on the same page from the get-go.

You might also like: The 7 Best Free Shopify Resources and Tools for Front-End Developers

Start introducing the design brief into your projects

The design brief has the potential to be one of your most valuable project management tools. Try to incorporate these tips into your design or development workflow so your projects begin with a strategic start.

We’ve put together a sample design brief template that you can use as your starting point for each project you work on. Feel free to alter it as you wish and make it your own. Download below and let us know what you think!

Free Design Brief Template
We've created a simple brief template that you can customize and use for your web design and development projects. Download your template for free today.

About the Author

Simon is a coffee lover, former agency digital strategist, and Shopify’s Partner Content Marketing Lead. When he isn’t hustling at the Shopify HQ, you can most likely find him dining at restaurants across the city or brushing up on the latest design trends.

Grow your business with the Shopify Partner Program

Learn more