Creating a visual site map helps everyone involved see the scope of the project and helps to get people discussing the project at a Macro level in 1 or 2 pages.
A site map is a list of pages of a website. There are several meanings for the term Sitemap:
For this planning phase of your website, it is the first type we are referring to. Typically it will be a visual diagram.
One of the key roles a sitemap has to offer is to help everyone involved in the project, especially your main stakeholders, have a simplistic way to gauge the size and scope of what is being undertaken.
When trying to plan how to achieve goals, establish where your must-haves fit in, how much content you will need, what other resources will be required and how to get the necessary budget, having a way to provide size, scale and purpose in a simple one or two-page document is critical.
Not everyone in the decision-making process wants to read through pages of specifications and field lists. Many want to know the macro level, coupled with some other critical questions, so they feel they understand what is being proposed.
If you think about a list of directions compared to the actual route drawn on the map, one is used to get an overall picture of how, while the other is applied in the detail of what you need to do at any given moment. The sitemap summarises at the top level the project and key elements. It's the zoomed view of the new site.
It also is a great initial checklist and way to get initial thoughts on paper to build from.
There are several ways to draft a site map either as a simple list or as a flow chart (diagram).
Which method you choose might be determined by how you best work, and in many ways both have a role to play in identifying the types of pages and areas of your site you are going to need.
You will find it easiest to start creating the top level as a chart and then depending on the depth of the site progressing to a list, before producing a final set of flow charts.
Let’s step through how these work.
For the example, we will show you of how to chart a sitemap we will use http://draw.io (a web-based diagram app).
Let's work through the site map for a hypothetical Legal Practice.
Note: In the examples shown we are working in a simplistic way of connecting information we know we want to have on our site and translating that into our site map and scope. There are many expanded and advanced areas that can be covered in choosing the information architecture and other needs. For this example, we want to provide a practical how-to for everyone rather than just advanced practitioners.
Our legal practice looks after some Personal Law and some Commercial Law. It’s a location-based practice with a team of 20 and covering a broad range of each legal services.
For many companies starting a site map will work like this from what we already have an idea on or other examples. It’s a starting point that helps you group what you already know which we can improve on and expand in steps as we move through the process.
It’s much easier to see what needs improvement when you have it laid out in front of everyone.
Let’s lay these pages down in our Charting Software to help us visualise what we are working with.
Your starting site map will look a little like this:
Don’t bother connecting the boxes yet (with lines and arrows), typically you will end up changing your mind a few times about what pages live where, and the hardest thing to do is these connections, so leave them until last.
In advanced sessions, this process might be down with post-it notes in a meeting room which allows you to build out all the pages and shuffle them until everyone agrees, then create the sitemap. Pen and paper work well too.
Knock over all the super easy stuff up front as well. That is the pages you are relatively sure will need to be on the site based on your current site or competitors or what you know to be good practice.
Once you see the sitemap built out you will be able to determine if they still make sense and keep them, modify them or remove them quickly later in the design process.
Try to remember that when looking at your existing site and other people's sites it isn't about copying, it's to give you an idea to make decisions from. Always ask what's the purpose for every page you add.
We want you to be thinking through the ‘best’ structure for your new site, not just re-skinning what you already have (see common mistakes).
So our next version would start to look a little like this:
Here you can see the extra pages on our site added.
Easy so far. That's quite typical of how you would start drafting a new site.
As we break out the legal services that we offer they can be added to the sitemap as subpages under Legal Services.
As an example:
These outline the topics or subcategories of our services. They match up pretty well to the content we already have in online and offline documents and importantly are the subject matter areas we offer to our clients.
Ultimately this is the offer we believe we have that we present to our prospective and current clients.
At this point, we aren't sure how much content we will have per topic area, and it's possible as we continue through our planning process that some topics will end up with additional content.
For example, we aren't sure if the Family Law page might have subpages for Divorce, Pre-Nuptials, Child Custody or whether this will all live on the one page. We may not know this entirely until after the Research phases are finished and content discussions.
At this point, we are trying to cover off all the key base pages/topics we know we need to cover.
We haven’t dug deep into content architecture, depth of content topics or other related information needs. We will address these progressively through the following stages of our scope.
This phase is about learning how to create the basic sitemap and updating it incrementally through the process until we can create the final site map version.
Here is our initial sitemap that will use in the next stage of our scoping process.
Below is an example of how this would look if you choose to do it in more of a list format using something like Excel (or Google Sheets).
There are some other final steps we need to take to finish off a sitemap. These steps tie in with the next steps in our scoping process so we will complete the numbering and connecting steps once we are sure everything has been added.