The importance of website sitemaps

As part of the website process, we produce visual sitemaps - here's a closer look at what they are and why they are so useful.

Ollie Jackson
Ollie, UX/UI Designer

Sitemaps provide a solid foundation when designing a new website or restructuring an existing one.

They’re also an invaluable point of reference at multiple stages of a project, including; wireframes, web design, content planning and development.

In this post we’ll answer the following:

  1. What is a sitemap?
  2. Why are they useful?
  3. What should they contain

What is a sitemap?

Sitemaps contain a list of all the pages that will be included on a website. They are typically arranged like a flowchart.

Visualising a sitemap in this way provides the following benefits:

  • It’s easier to get a birds-eye-view of the overall website structure
  • You get a clearer sense of the page depth and where it sits within the site
  • You can easily view the pathways through the website and the relationships between pages

When are sitemaps created?

The sitemap is the first design deliverable that we produce. It immediately follows the content phase. We take what we’ve learned during this phase - including Data Collection and User Journey Mapping and use this to construct the sitemap.

Regardless of whether we’re tackling a redesign or helping to create an entirely new website, we’ll treat the process of creating a sitemap in the exact same way.

When thinking about a website redesign it’s important to understand what is currently working (and should therefore be ring-fenced), but also what isn’t working - that way we can identify where to make improvements.

Sitemaps should be a visual representation of everything we’ve learned during the content phase and should reflect the overall goals of the business.

Why are they useful?

They confirm how the navigation should be structured

The creation of the sitemap allows us to confirm what should be placed in the top-level navigation menu. Having already created our User Journeys, we can take what we’ve learned and apply this to our navigation. The top-level navigation menu is designed to support the primary aim a user has when they arrive on your website. Users won’t begin in the same place, they will be looking for different things - but we’ll know this having already created our User Journeys. 🙂

The top-level navigation menu is from where everything else follows. And so by confirming this at the sitemap stage we can be confident that the structure we put in place is aligned with the aims of the user and the business goals.

They confirm what content needs to be created or reworked

As we put the sitemap together, there will be areas of the website that need new content to be created, or existing content to be reworked. It’s important that we know this at the sitemap stage, as this will inform the wireframes that we create and eventually, the final visual designs.

Sitemaps are also useful for identifying content that is duplicated or no longer required. Duplicate content is confusing for users, doesn’t align with our goal of creating streamlined and coherent user journeys and can hamper your SEO efforts.

They provide an early indication of the development requirements

Whilst we are yet to create wireframes or visual designs, a sitemap does give us the first opportunity to consider what the development requirements will be.

It is particularly useful in the case of a redesign because anything that we identify as needing to change will have implications for the build phase - including how content is modelled in the CMS and how to construct the website in a way that is most flexible and designed to scale.

It’s much easier to gauge the development requirements at the sitemap stage as the hierarchical view clearly illustrates the relationships between pages and the breadth and depth of the content.

They make sure nothing is missed

Something that can cause a project to be delayed or to go over-budget is not taking the initial time to ensure everything has been considered. We don't want to be mid-way through the build of a website, only to find that critical functionality hasn’t been discussed or important content hasn’t been accounted for.

What do they look like?

A visual sitemap will feel not dissimilar to a flowchart - but rather than illustrating a process, we’re illustrating the hierarchical structure of a website and in particular the linkages between pages. The sitemap should also be representative of the overall URL structure of the website.

Typically, sitemaps are constructed using a series of illustrations (to denote what a page is) and arrows (to denote how one page links to another). We’ll also note what each page should be called and annotate key details where appropriate - such as which pages will only be accessible from the footer.

Once assembled, a sitemap gives us a much clearer sense as to how the user journeys that we’ve created will apply in principle - including the page structures and how heavily nested some pages.

Summary

As simple as sitemaps may look, the decisions that we take as this part of the process will go a long way to shaping the final website, including how usable it is and how successful it is in meeting the overall goals of the business.

With a sitemap we can:

  • Confirm how the navigation should be structured
  • Confirm what content needs to be created or reworked
  • Get an early indication of the development requirements
  • Make sure nothing is missed during the following phases

Whether a sitemap is being created as part of a new website or a redesign, they are an invaluable asset that help to inform multiple other parts of a project - including wireframes, visual designs and the eventual build. Just like the building of a house, sitemaps provide a solid foundation from which everything else can follow successfully.

© 2021 Club Studio Ltd