Website brief

June 3, 2022

How to Create a Perfect Website Brief? - Experts Zone #25

Przemek

Przemek Mikus

COO
SHARE
How to Create a Perfect Website Brief? - Experts Zone #25
web development(14)
development process(8)

So, you’ve decided to create a new website and that’s great. However, no matter if you decide to find a digital agency that will create one for you or if you want to build a website on your own. You should start with an absolutely essential starting point – a plan that will guide the creative process later on. Such a plan, and an important element of creating a successful website, is called a website brief. Simply speaking, the main idea behind a good website brief is to connect the gap between what a business owner wants to achieve and what a development and design teams can make. There is no industry standard methodology for creating such a brief, however, there are best practices on what it should include to make a website a success. Let’s dive deeper into how to create a perfect web design brief then! You will find a website brief template with 50 questions below - at the end of the article.

Get the "50 questions Build a Website brief"

Enter your email and we will send you the brief


What is a website brief?

Let’s start with a short introduction and explain what a website brief is. For most industry professionals, a web brief is a cornerstone of any successful website project. It’s a kind of business plan that makes the website development process easier and more effective when it comes to meeting the needs of the business owner. A well-written document should thoroughly explain and define the problems that need to be solved by the website. It is supposed to provide all the important considerations and constraints that you should think of when building a new site. The brief should describe the design process and define what is expected, as well as what the timeframe and available budget are.

With a well-written website design brief, all parties know what is expected of them. The design and coding stages are thoroughly explained step by step which has a positive effect on the quality, efficiency, time, and cost. When everyone is on the same page, you can be sure that your new website will be the right one for your business.

The purpose of creating a website brief

In today’s world, a website is almost as important as your employees are – it works 24 hours a day, 7 days a week. If created correctly, it answers all questions your customer might have. It’s a selling platform so you should make sure it’s one of your highest priorities if you want to boost your online presence.

Okay, a website is something you should treat seriously, but what about a website brief? Why invest time in creating it? First, all successful websites are built on a foundation. It’s like a plan for your website – the more information you consider upfront, the better and the more efficient the site you will be able to build. A website brief is a vital tool for communicating ideas to make sure all stakeholders have clarity on the project. It tells web designers and developers everything they should know to give you an accurate quotation for your project. A brief makes everything far more straightforward, as well as points out a clear objective of what you would like your new website to achieve. Should it bring new customers to your business? Should it include the portfolio of your work? Whatever your goal is, make sure it’s included in the brief.

Let’s create a perfect website brief step by step

So how to create a killer website brief? Let’s go through the 9 most important points to touch on while creating one.

Step 1 – Gather basic data about your business

Start with writing an introduction to your brand. A good website requires a well-prepared brief that contains all the information about the website owner, their business, and their company. It’s basic, yet important data. This is crucial if you want the design and development teams to become familiar with the brand and its vision, mission, and values. This first step should determine the direction of the project and include a list of core stakeholders – this will help in defining who’s responsible for particular deliverables.

If you don’t know how to kick off the project, think of an ‘About us’ page your existing website may include. Such a site should give a visitor an idea of how a company wants to be seen by the world. An ‘About us’ page may contain the history of the brand, its core beliefs, mission, vision, values, purpose, and brand positioning, as well as voice and tone. Collecting such data is the simplest way to gain a clear idea of the brand’s pillars.

While creating the big picture, you should also think of your project description and background. Plan to address where you are now in the process and how your business is perceived in the marketplace. Include the level of your brand recognition and your value proposition. You can also add the benefits of your product and what the benefits mean to customers.

Step 2 – What is your project about?

Time to state the purpose, aims, and objectives of your future website. Any marketing tool exists to serve a purpose and it’s the same with a website. This is why you should prepare an overview of the problems your website (and your brand) is going to solve.

Usually, your purpose, aims, and objectives may include (but are not limited to):

  • Increasing sales and revenue.
  • Generating leads and inquiries.
  • Increasing brand awareness.
  • Improving online presence.
  • Reaching new audiences.
  • Communicating expertise and experience in a certain area.
  • Ranking alongside competitors.
  • Driving subscriptions.
  • Serving as a connection hub.
  • Becoming a source of reliable information for the target audience.
  • Improving search engine rankings.
  • Streamlining existing processes.

Before you decide on goals and objectives, answer the following questions: Do you want your customers to complete the transaction on your website? What do you want your customers to do when they land on your website? What calls to action do you want to include? What business function is your website supposed to support?

During this stage, you should also come up with a project overview. A website brief should define the scope of your project so that everyone is fully aware of what is involved in making it a success. This will ensure that the design is as it should be and stays within scope. If there is a current website (or an existing one that is about to be replaced), include this in a website brief, too. You can share what worked and what didn’t.

Step 3 – The brand book is crucial

This step describes content and graphics for the project – design requirements and specs that will make the look and feel of the new website. Knowing such requirements early on saves a lot of money and time (fewer revisions and rework).

While creating a website brief, make sure the interface is appealing. Focus on illustrations and engaging content. Outline project responsibilities to define who’s going to do what. The main project responsibilities would be design, content, imagery (professional photography, custom photography services, etc.), translations (will your website be multi-lingual?), post-launch marketing (PPC, social media, email), and post-launch content updates (will you be managing the website content in-house or do you require assistance?).

This step is highly dependent on the goal your website is about to serve. An e-commerce site and a blog have different requirements when it comes to design and content. If you want to build a marketplace, you will e.g. need product categories, payment methods section, discount codes, etc. Don’t forget that your website should be an extension of your brand so you should pay attention to any guidelines designers should adhere to. They should know if they are limited to certain brand colors, typefaces, logos, etc.

Step 4 – Functionality of the project

Time to include the UX stuff – functionality, features, and basic minimum requirements. They usually result from the purpose and objectives of the website but still, they should be included and described in your website brief. They should outline the website scope of the technical and creative possibilities addressed. Briefly speaking, you should list the major features that need to be coded. One of the good practices to implement is to separate your needs into two categories – must-haves (features and functionalities you cannot do without) and nice-to-haves (add-ons – features you want but aren’t pivotal). Sometimes it can be hard to differentiate them but it’s all up to you and depends on the things you want for your business.

Examples of functionalities may be account creation, filters and product listing, payment options, discount code functionality, wish lists, interactive media, online bookings, knowledge center, social media sharing, help desk for online sales, live chat, security, size guides, navigation, comment section, subdomains, news section, gamification, etc. Where possible, you should include a brief description of each feature.

Including a list of features and functionalities together with relevant technical requirements and specifications upfront is the best way to avoid multiple revisions in the future and, in consequence, avoid additional costs.

Step 5 – Page content, menus, general navigation

Time to describe a rough sitemap in your web design brief. How many pages and subpages do you want to include? Who will be responsible for producing the content and approving the entire process? When it comes to content, try to be as specific as possible. Consider external resources for writing the content if you don’t have internal resources. If you already have a website, take the opportunity to verify if the existing content still meets the customers’ needs.

Very often, business owners consider website content a final stage of the project. It’s the opposite. You should be aware of whether you have the resources or skills to create it and then supply the text to go on the website. Decide who will be responsible for generating content and if you are able to provide any brand guidelines, images, videos, etc. Don’t leave it till the very end of the process!

During this stage, you should also describe what you want to include in the menus and what the general navigation will be. A well-thought structure and layout usually make the user experience much better. The ultimate objective of most websites is to quickly find the information the user is looking for.

Step 6 – Date and budget

No one likes deadlines, that’s a fact. However, there is a reason why you should include it in your website brief. Defining a deadline can help you narrow and focus your search. In addition, it may minimize the chances of spending more money than expected. Discuss how many people will be included in the project team – your website brief should include job titles, roles, and responsibilities. It’s important to create a transparent schedule that includes possible delays. This will allow you and your team to better plan how to use resources over the development period. Make sure that the deadline and schedules are realistic, though.

It's also significant to set a development and web design budget. The truth is that a budget is something that can really affect the features and functionalities of your website. It allows for even more features and innovation or the opposite, it may be the reason why you have to prioritize the features that you consider most important. Setting the budget in a web brief also determines what kind of tools are available for your website. While establishing a budget you should, among the others, consider hosting, web design and development, post-launch maintenance, as well as digital marketing. For instance, when you are on a tight budget, your website may be a little more basic, which may mean using a website builder or a simple CMS. If you have more money to spend, you can invest in complex design or tailor-made solutions.

Step 7 – Outline the technical issues

This step is especially crucial for large projects. Including technical requirements and possible issues in your website brief may help you avoid scope creep later on. Think of technologies you can use. Write them down and link them with features your website should have. Does it feature user logins? Is it an e-commerce website? Do you need API integration? What kind of user data will you include on your website? Those are just examples of questions you should ask yourself while defining technical requirements and issues. If possible, on top of technical issues, your website brief should also include solutions to them. Is it possible to avoid the issues? If so, how to do it? The more details you include, the more likely you spend less time on testing and fixing bugs later, especially when it comes to the features and functionalities that cost more than others to implement.

Step 8 – Introduce your competitors and the parties to model on them

Time to describe your industry’s competitive landscape. Who are your main competitors? Which websites have designs you like? Compare layouts, themes, graphics, unique tools, etc. It’s helpful to thoroughly describe who your competitors are and what they do.

Answer the questions like: What is your competition doing? What do you like and dislike about their websites? List their strengths and weaknesses to define competitive pressures on your project. You can include their marketing activities that make their approaches effective. Are there any useful aspects you could use? An analysis of your competitors’ may be a great help for your designers and developers.

Step 9: Website modernization

You may think that it’s unusual to include post-launch modernization and maintenance in a website brief but in fact, it’s important, especially if you plan to launch several versions of the website targeting audiences in different countries. If so, what languages will you need? Technical aspects include things like hosting – do you already have a web hosting for your business? If you do, verify your hosting package and make sure it’s enough. A modern setup should be fully secure (with regular backups) and fast. Think of admin permissions and restricting some users’ access to your website if needed.

If you want your website to perform well, you should think about housekeeping upfront. Your website should be free of coding and speed issues, glitches, and bugs, but in most cases, they occur at some point. This is why you should decide who will be responsible for maintaining your website and fixing the bugs when they happen. If you collaborate with a web development agency that will build your website for you, your web design brief should clearly tell how often the actual analysis to find errors should be done. Also, make it clear how you expect any future adjustments and iterations.

Finally, you may consider promotion and digital marketing that will promote your business. An online company is no different from a traditional one so marketing activity shouldn’t be overlooked while creating a website brief. You can list social media campaigns, SEO (search engine optimisation), email marketing, PPC and display paid ads, content marketing, etc. You can even include offline promotions like brochures or direct mail.

Who should create a web brief?

A good web design brief benefits all stakeholders involved in a web design project. It’s used to clarify what results are expected from the website and identify the site’s must-haves and nice-to-haves. All parties involved in creating a brief can review it and provide their output. The more effort is put into creating such a document, the easier and more effective the design and development processes will be.

In most cases, business owners create a brief when they decide to hire an external agency to build a website for them. A web design brief is a kind of plan for the entire project that should be delivered by a client after signing a contract with the web design agency. Such a document helps in staying on track and within budget as it’s considered a point of reference for your external partner. Sometimes, when you’re not able to create a web brief yourself, you can ask the agency to do it for you.

Advantages of creating a website brief

Below you will find the most important reasons why you should put an effort into creating a web design brief:

  • It streamlines your web design project, especially if you use an agency to create your website.
  • It saves time – designers won’t work on ideas that don’t match your vision and values. This also saves money and helps you stay within budget.
  • It reminds the project’s core objectives – in case of any doubts, developers can refer to the brief.
  • It keeps all stakeholders on the right track and gives them a clear understanding of the task at hand.
  • It allows you to specify exactly what you want.
  • It helps you define an ideal target market.

And what about measuring your website’s success?

Before you finalize your web brief, think about how you want to measure and report your website’s performance. The most popular metrics are conversions, bounce rate, time-on-page, source of traffic, session analytics, etc. This is crucial especially if you have sales or visitor targets. It’s recommended to set targets for the first two years after your website is launched. When it comes to tools and platforms, Google Analytics has been an industry standard, however, there are many analytics tools you may consider.

Summary

As you can see, creating a website brief may result in a smooth and successful web design project with everyone having a clear picture of what they need to do and how. A web brief can help you track issues early and eliminate them before they put your project at risk.

At Frontend House, we master building perfect websites that serve various purposes. If you want us to create one for you, we’ll be happy to schedule a call to discuss your needs. If you need help with preparing a brief, we’ve got you covered, too.

Get the "50 questions Build a Website brief"

Enter your email and we will send you the brief

What do you think? Share your impressions!

Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Olga
Olga
Bartek

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet the author

Przemek

Przemek Mikus

COO

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.