Site maps help you visualize the interconnections of your different pages in a way that will make sense for your users and search engines. Read on to understand how to build site maps and speed up the process with templates and digital tools like Miro.
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.
Why a visual sitemap is a prerequisite to building a website
Site mapping 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, site mapping helps you deliver a better user experience. Let’s dive deeper and understand the purpose of sitemaps.
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
Site mapping 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 to everyone on the team. If you are using Miro, you can start by choosing the site mapping 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 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 site map presented above is rearranged in a way that feels cluttered (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, site mapping 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’s sitemap creator can help you make this process transparent for your team and create a source of truth everyone can refer to.
