Scope out the pages of your website

Time to write up what the purpose of each and every page on your site is, and outline clearly what you expect to be on each page.

Drafting out the website scope

On your first run through of the page scope, it will definitely be a draft. The scoping process should be iterative and will require you to gather specifics you don't know when you first start writing it. That's a normal part of the process.

During this phase, your goal is to uncover all the relevant information that will help everyone involved in your project be able to do their jobs more easily and to detail what you want with a lot of clarity.

Note: You do not need to be technically orientated to write the scope. You just need to be able to think and be observant.

Linked at the bottom of this chapter is a single page template and also a google sheet example of the type of scoping document I regularly use in preparing comprehensive/briefed sites.

The purpose of providing this template isn’t to say this is the only way to do it. However the most common question I get asked when I start asking for a proper brief from a prospective client is “do you have an example I can fill in.”

The template is an example and yes it can get filled in, and these instructions will explain how. You can create your own format and use that; the layout just needs to be consistent for the entire brief and achieve the same, or similar, result.


scoping-process-detail

Start with the site map.


iterate-process-sitemap

The site map is an easy first step, and it gives an outline to the project. It helps to speed this part up with the initial pages already marked out and grouped.

As you progress through this stage, you will find the process is now iterative, meaning things will be changing here and on the sitemap as you will no doubt identify pages that aren’t yet in the sitemap. Once you then add them to the sitemap, you will need to scope them here. Which is great it means the process is working. We are uncovering needed items that make up your site.

Working through our site map we will create little scoping briefs for each page no matter how small.


The Website Scoping Template

Here is what the Google Sheets template looks like:

scope-1

Note about the Numbering.

In the top left of the template example, you will see a number "1.0," which signifies the page number in our sitemap.

The numbering is structured to help visualize the navigation quickly as well as information architecture (the structure of all the content and information of the site).

e.g. If Personal Law is 2.0, then Wills underneath it would be 2.1, etc.

For now, leave the numbering until later in the process, it saves you a lot of moving/renumbering time later on.

The Example

Look back at out Legal Services Sitemap and we will pick out way through it page by page to scope out the entire site.

The Home Page will be our 1.0 page. That’s our main page and can’t be forgotten. Though this most likely won't get written up until we have completed everything else about the site. Working in this way is opposite to a lot of planning approaches that aim to solve the home page first.

Typically I prefer this approach where we scope out all of the pages from the bottom upwards and finish at the top. This ensures I have thought through what experience I want to create before I worry too much about the gateway. It also means I have clarified my site priorities as well, and that helps me identify the most important elements needed on the home page.


clarify priorities

First Steps

For this example lets write up the Contact Page first.

Note: Don’t worry about getting it 100% accurate, you are most likely going to change your mind as you work through this process and will want to modify elements as you practice digger deeper into the page by page needs and that’s what we want. It’s much easier to clarify and change here in notes than it is once actual development has started.

In The Google Sheet follow these steps:

  • click the arrow to the right of the Template tab (bottom of the screen) and the following menu will appear.

menu-google-sheet2

  • Now click Duplicate and a new tab will be added. You can see I already added one for Home Page.
  • The new tab will turn up between the Template Tab and the Home Page Tab.
  • Click and hold it and move it to the right of home page.
  • Click the arrow on the new tab and choose Rename, change it to Contact.

sheets-menu-contact

Note: This process can be easily followed for every page you add. Make sure you keep them in the order of your sitemap. Like anything in an organisational tree, keeping everything in order helps you see if you have covered everything and more easily find what you need to when going back to edit.

Fill in the Page Scope

Now we will start to put content into the template. I would usually delete the page number if I don’t know what it is going to be yet or change it to XX so I can do a search across everything later looking for all instances of XX to fix up.

Elements to fill in:

Page:

The name of the page. It’s fairly obvious what this should be.

Note. This isn’t the title of the page that is displayed on the site; this is purely the identification of the page in relation to the sitemap and its function. In the content phase, these titles for display will be clarified and finalised ready for use in production.

URL:

The file path on the final website e.g. /contact/ or /contact-us/

Note: You can leave these at this point unless you are well versed in the URL structure you want. It might well be this gets left to your online marketing or SEO team depending on the people in your project team and what you uncover in the research phase.

Summary of page / Goal:

A clear explanation of what the heck this page is doing here on your site? Why / what should it be doing! The Purpose of the page.

Note: You might not know the answer to this. Brilliant! Now we start to get to the pointy end of understanding what you learned about your audience and what you think you need and finding if the basic ‘copy that’ plan has legs. Why spend money and energy making pages on a site if they serve no purpose. Would you print thousands of brochures for no reason?

Think back to the goal setting chapter and reflect on the overall goals for your site. How does this page support them?

For example, make it easy for our prospective clients to reach us in multiple ways.

That gives you something to work with it.

Ideally it’s specific, measurable and realistic.

Functionality:

This should be a list of everything you need on this page.

Note: It doesn’t have to be the how or the technical description of how things will happen. For complex business flows, we will add those into additional areas later. IT also isn’t specific content. On our contact page, we would list – Phone number – but we wouldn’t list the specific phone number to use. That’s content and comes in the content guide.

I prefer bullet points for this list, but unfortunately, Google sheets don’t like bullet formatting inside cells, so I just insert new lines for each point.

contact-detail

The importance of the functionality cannot be overstated.

Don’t get hung up on the exact how at this point. The goal is to get the detail onto paper so it can be seen.

I cheated previously and added ‘Inquiry Form’ into the sitemap based on my experience. However at the sitemap phase that might never have occurred to you. As you write this out, you should be evaluating your current site for what might be necessary, and also other websites that appear to offer you the kind of experience you want your customers to have.

In doing so, you notice the form and then add it to your list.

By not worrying about the specific content your focus remains on what you want and need without being overly concerned if you put the right content in place. This method will eliminate the need to have complete final content in this phase. That might not even be your job, so you may have to delay the scope finalisation to get the perfect copy. Trust me that could be a long time coming.

When adding inquiry form to the requirements, hopefully, you will then trigger questions about where does that inquiry go? What happens next?

Let's say you go and investigate, or reflect on the last inquiry you made online. What happened? Did you get a response on screen? Was there an email sent to you? Etc.

Now you have thought through what you want to happen you need to add additional functionality to cater for this.

Let's say we have decided to have a separate form (as per the example sitemap) that isn’t embedded this means an extra page is needed. If the inquiry form then loads a new page for the thank you screen this also needs to be noted in not only the sitemap but ultimately each of the scope pages.

First, let’s finish off this page.

Media / Copy Requirements:

List here the items you will need to complete this page.

Note: If you have specific artwork or copy that you think this page will need list it out. Again you don’t need the specific files; this is for later in the process of gathering content assets.

Examples might be:

  • 1800 phone number plus the local (international dial) number
  • Determine, who will receive the inquiries (need email address/s)
  • Clear icons for Facebook and Twitter
  • Photo of our building could look good on this page

contact-with-media

Amendments:

Used once you start finalizing the document and sharing it with your team.

Note: this also allows for scope amendments and changes to occur when working with your developers and for it to be recorded. Useful for testing and understanding what changes have occurred to the original and also if there are cost implications.

The beauty of Google sheets is that the entire process can be viewed transparently by all and easily shared, and version control is inbuilt.

This is the updated sitemap including our new Inquiry Form page:

Legal-Practice-sitemap

New Worksheets

Let’s now create two new worksheets for the Inquiry Form and the Inquiry Response Page, using the duplicate method that we used above.

sheets-menu-inquiry

In the new Inquiry Form worksheet, we will follow the same process to outline what we want.

Note: In this worksheet we are going to be more definitive. It is a Functional element, not just a general page that will ultimately need very specific requirements. It’s ok to start with basics for some pages but before the end of the process, you will need to make sure you have worked out the exact requirements for every page and all functional elements.

Page Goal:

To make it super easy for prospective clients to inform us of their needs or questions, and to help existing clients contact us if they need help

Functionality:

Here list out the fields you will want in your contact form. What information do you want do you want to gather?

Answer this question first: If you open up your email in the morning and have a new client inquiry what would it say?

Then ask: How can I get the answers above in the simplest possible way from a user?

Fill in the fields in the sheet.

Here’s an example:

inquiry-form-1

I specifically left out something important to highlight what steps you need to take.

We have determined it is going to go to a thank you page and yet no mention of that in this document yet. It’s important that you link up every decision you make, so it is highlighted where it needs to be.

Which also highlights needing information about automated emails:

inquiry-form-3

It is now starting to resemble a useful guide to this page. It’s not an afterthought late in the design or development process and shouldn’t be. Getting the ‘inquiry’ could be your primary goal for the site, so focussing on the actual page that does the converting is more important in many ways than the pages before it.

Let's Do that Again

Next, let’s also do the thank you page.

inquiry-thanks

As you work your way through this process, you should be able to add in more little pieces of information. As you open this up to help from other team members they too will be able to add in important pieces of information that will be critical to getting this right.

Yes, not everything can be decided by you or up front, hence the use of ?? or a similar notation. It can be something you use to go back through and clarify what is going to be needed.

In looking at this functionality, you need to come back to the understanding of how this will work for the person using it, not always about what you want out of it.

For example, when you look at the way to add in additional content on the thank you page, you need to balance between cluttering the screen and the person seeing it not being able clearly to see the key objective – confirmation of their inquiry – and also whether adding something extra adds value to them.

If someone has made an inquiry on our development site about a possible new project, linking out to a chapter in this guide makes sense for them if they haven’t seen it. Especially a chapter about choosing your developer. Here we give them tools to help them in their choice, and not necessarily another post from our blog which might be contextually irrelevant to them at this point.

It might seem not that important to go down to the next level of detail. However if you don’t, then this might be left as not included into the core project budget/estimation and might not be part of your content teams production requirements.

Getting in depth

There are business processes that will also need matching to this as well, and if you don’t have it in your project plan, it will highly likely get forgotten.

contact-us-internal-mail

and more importantly, the one that goes to the person making the inquiry

contact-customer-email

That’s the starting point for building out the actual page by page scope. And it does need to be page by page. As much as you would love to lumping every page into a common template and guide, if you are going to do that you might as well get a simple out of the box WordPress theme with a right sidebar and just make every page the same.

Content Page Example

If you are still here, then you follow on with the process of determining the purpose of every page. What role does it serve your customers, why does it belong on the site, and how will it fulfill that role?

Let's do the Legal Services Page.

legal-services

Note that in my mind I have an idea of how this might look. I am not guiding that here, as my role isn’t to design how it looks, and if I get prescriptive I can only get back what I ask for. So I am trying to design the purpose and result and the experience.

If I look at other legal sites as an example, I can see similar pages with just links and links or tables of links, so the user is confronted with a wall of links, not assistance.

I want the page (and all content on it) to be something the user would find useful and helpful. I added a cheeky sub-goal in it about how long a user will spend on this page, but that is part of the functional design. If the designer ends up adding a bunch of visual distractions and doesn’t pay attention to what we need, then everyone loses out.

Hopefully, the development team and others will ask “How can we achieve this?”. Then you know you have built a useful scoping brief. Now you have people thinking of how not just slapping it together.

I am going to tackle Wills, one of the Personal Law areas.

wills

As you progress through all the sub pages of your site, it gets harder to be distinctive.

When you come back to these to flesh them out in more detail relating to content you are going to want to list much more detail than this to help everyone understand. Whether you do that with a link to a related document of content that thoroughly outlines it or by building out the functionality.

e.g. Highlight likely problems: for example. Don’t know where to start on getting a Will?

And ..

Has someone in your family died and you are confused about the will options.

By addressing these up front you help people understand what it is that you offer without a bland list like:

The Personal Law Will Services we offer are:

  • Creating and updating wills
  • Contesting someone’s will
  • etc.

Rather than hiding FAQs on a topic in a general FAQ section by blending them in as part of your content and options you are providing useful information in an easily digestible format.

In this instance I am getting specific about content as an example, the Scope sheet doesn’t need to be a complete piece of content, but you can use examples if they help differentiate this from another page.

You may then determine that the issues and content raised on this topic mean you want to separate the content into more pages. Contesting Wills, Preparing your First will, etc. If so update the sitemap, create more templates and away you go.

Finishing Steps

To finish up this chapter here is how to tidy up what we have created when you are at the end point of this document.

Back to Numbering.

Now is the time to lock in the numbering both on your site map and this scope document.

In our example:

sheets-menu-most

On each worksheet.


legal-services-numbered

Note I have now changed the page number to match 2.0. Tip: In Spreadsheets 2.0 will get rounded out to 2 by default so rather than worrying about changing the number formatting, and because we aren’t calculating it enter it with a single quote to make it “text” to the spreadsheet. Thus, 2.0 is entered ‘2.0

In our Sitemap:

sitemap-numbered

Now that you have done this for every page it’s time to proceed onto the start of the visual process wireframing.

Skipping to wireframing before now means you are adding shapes and layouts without thought to the function, goal or content needs, and isn’t going to get the best results.

The result you will produce with this level of scope should be infinitely better.


Resources

One Page template.

A pdf example of a printed version of the page template.

Website Scoping Template

Google Sheets Template.

You can copy this template and store your own copy to work on.

Website Scoping Google Sheet



BUY the entire guide as an ebook or paperback

 

Buy the Guide

 

Available on Amazon, Kobo, iBooks, Barnes & Noble and other great bookstores

Free access to the Website Planning Guide Facebook Group with any version you purchase