How to create
a sitemap
in 8 steps:

Designing a better
UX flow


Sitemaps help you visualize the interconnections of your different pages in a way that will make sense for your users and for search engines. Read on to understand how to build site maps and speed up the process with templates and digital tools like Miro.


Anna has written about experience design, product development, and workshop facilitation. She has been working in distributed teams for three years, and she is passionate about helping these teams to succeed.

What is a sitemap?

A sitemap is often defined as an XML or HTML code that Google uses to crawl your website. We’re going to be talking about the other type of sitemap, a design and UX sitemap. A sitemap is a planning tool that presents a list of website pages, typically organized in a hierarchical fashion, that are accessible to users.

Here’s an example:

Why a visual sitemap is a prerequisite to building a website

Sitemapping is a useful process for designers and UX professionals who are looking for a way to improve website navigation, understand the scope of work, and avoid missing out on critical parts of a website’s architecture. Ultimately, sitemapping helps you deliver a better user experience. Let’s dive deeper and understand the purpose of sitemaps.

Sitemaps help with all of the following:


Design with UX flow in mind

A sitemap, once laid out, will allow you to create a website with a navigation flow that makes sense not only to the user, but to a search engine as well. It’s a footprint showing how each page relates to the website’s hierarchy.

See which pages and subdomains make sense

When designing a website from scratch, you rarely know the exact amount of pages and subdomains you’ll need. Laying a sitemap out visually helps you to understand this part of the project.

Spot errors in pages and subdomains

When you build a website with a sitemap, you can easily see where a site may become cumbersome and bloated. You can fix these problems before you start to build.

Create a roadmap for designers

For the coders and designers who are building your website, this sitemap helps keep tasks on track and provides context for the design team to make better decisions.

8 steps to creating your visual sitemap

Sitemapping is essential when you are building a new website, but it doesn’t mean it has to be complicated. Follow our quick guide to build your first sitemap:

1.

Grab Miro’s Sitemap Template

Your sitemap will be used by different teammates and stakeholders, so it’s important to document your decisions digitally so they are easily accessible by everyone on the team. If you are using Miro, you can start by choosing the sitemapping template from the library.

2.

List primary pages on your website

Think of all the major sections of your future website, then write them down on stickies (one section = one sticky).

This can be things like:


  • Tour
  • Case Studies
  • Product
  • Pricing
  • Enterprise
  • Blog
  • Login
  • Sign Up

3.

List secondary pages

What else do you want to include? A lot of content isn’t important enough to be a category on your website, but it’s still worth including. This content usually goes into secondary pages that can’t be accessed through the website’s main page but can be put under different categories. Write down ideas for secondary pages on stickies.

This can be things like:


Case Studies

  • Education
  • Legal
  • Business
  • Etc.

Pricing

  • Free Tier
  • Personal Tier
  • Business Tier
  • Etc.

4.

Put your pages together using the template

Sort out your stickies, putting secondary pages under primary pages in columns. This will put pages in a sort of family-tree layout.

5.

Consult with members of the team

See which pages are needed and which aren’t. If you have 20 different primary pages, you’re going to get a very bloated website, so consult with all the stakeholders to understand what your team’s top priorities are.

6.

Trim unnecessary primary and secondary pages

Once you’ve gotten feedback, trim what seems to be cumbersome.

7.

Review with the team

When you’re satisfied, review with the team to see if the layout makes sense and if all the stakeholders agree with the final result.

8.

Keep space for notes and comments!

You can leave stickies or comments for designers and other stakeholders over different pages you want to pay special attention to.

Examples of visual sitemaps

To better understand how the result might look, we decided to share Miro’s site map and also an example of how it might look like if we bloated the number of pages and didn’t think through the structure. You can use these as an example when you are creating a map for your product’s website.

What a good sitemap looks like

A good sitemap represents all key pages of the site and structures them in a way that is clear to the user and doesn’t feel cluttered.

What a bad sitemap looks like

The sitemap presented above is rearranged in a way that feels cluttery (it has 13 pages instead of nine) and at the same time, it’s not complete and some parts of the site are not mentioned.

Let Miro help you turn ideas into action

When done right, sitemapping can lay a solid foundation for your product’s or service’s success, providing a clear framework for your customers to understand your value proposition. The key to success is having a flexible tool for visual thinking, involving stakeholders early on, and being ready to iterate. Miro can help you make this process transparent for your team and create a source of truth everyone can refer to.


Create my sitemap now with Miro


Read also

Learn how to build and scale best-in-class teams
Product Management Today