Introduction
So, a sitemap, it’s what us designers like to show off to other people to prove that we are capable of doing complicated things. But it’s not complicated. Let’s unpack sitemaps.
There are a lot of things we need to cover to explain sitemaps such as:
- What a sitemap is
- Why should it exist?
- What to include in a sitemap
- How to create a sitemap
- What is a sitemap?
What is a Sitemap?
It’s how people navigate your app, website or platform. Just like how buildings have blueprints/floor plans that give us a high-level view of a structure, a sitemap essentially does the same thing.
It showcases:
- The unique name of each section
- The hierarchy and relationship of each section and at what level each section lives
- How a user moves through each section and a high-level user flow
- What pages exist, for reference and better management
- It can showcase additional information such as type of page, and high-level view of components that live on a page, to get a better understanding of both the macro information architecture and the macro and more
A sitemap is not the information architecture; a sitemap is one piece of the information architecture.
Why should it exist?
It helps us to get an understanding of:
- The size of our platform
- What pages we need to build
- Which pages are related and can therefore share the same template
- The user’s movement and flow within our website or app
It also helps with:
- Guiding the flow a user goes through in order to discover specific information
- Mapping out different elements that we need in each page at a high level, to again define the complexity of each section
When is it required?
Honestly, with smaller websites you can get away with not building one as the navigation itself can act as your sitemap. Smaller projects, such as a 5-page website, would usually be 1 or maybe 2 levels deep of information and there’s not a lot you would want to map out as the relationship between the pages would be fairly clear.
However, almost every medium to large projects can benefit from having a nice and thorough sitemap.
What to include in a sitemap:
- Page name
- Page level
- Page type
- Flow
- Keys
The idea is to look at a sitemap and quickly understand what is going on, how the website flows and understand the relationship between each section.
How to create a sitemap
I believe we can all understand and relate to an eCommerce website so let’s create an example around that. Let’s imagine that our client is a furniture store and they have approached us in order to improve their website experience by redoing their website architecture.
Where do we start?
Step 1. Heuristic evaluation
Every project starts with a nice heuristic evaluation of any existing information and assets. I would start by evaluating the current flow of information from their current website and map out how a customer gets around on the current site. I would also note down any issues I came across on their platform.
This can be a simple spreadsheet or document; nothing fancy is really required.
NOTE: If this is a brand new website then I would completely skip this step and go to step 2.
Step 2. Content audit
Audit every single thing that would live on the site. This includes anything and everything such as about page, blog and article pages, contact page, different products, FAQs and everything else.
This step is crucial in order to grasp the size of the project and how we might approach it.
Again, a simple spreadsheet or word document will do. I use Google Docs and Sheets for these exercises.
Step 3. Data analysis
If our client has any data, we want to know about it.
This includes:
- Page hits and traffic
- Customer demographics
- Drop-off rates at each section
And as much other information as we can collect. A great place to start is through any analytics tool our customer may be using; most people have Google Analytics and you’d be surprised how much data you can find there.
Step 4. Competitor analysis
Probably the most important step. There is SO MUCH we can learn from what competitors are doing.
In this section, we want to understand not only what our competitors are doing but also why they’re doing it.
Ask the following questions:
- What are they doing better than us?
- Can we catch up?
- Can we improve or do it better?
- What do their customers experience?
- How do their customers move around their site?
- How do we differentiate ourselves?
And so much more. If you skip anything in the research phase, don’t let it be this.
Step 5. Personas
Whether the company already has personas or we need to create them, it’s important to understand our customers:
- Who are your users?
- What are you selling to them?
- Why should they use our products?
- What to prioritise for them in terms of content and flow?
Step 6. Sketch different flows and ideas
Based on all the information we collected, we can now sketch out some quick concepts. You see, sketching is a great tool in the concept stage of any design process as it doesn’t take too long and it usually doesn’t need to look great. We can quickly create concepts of multiple ideas without getting attached to one.
Step 7. Tools
Honestly, it does not matter what you use; whether it’s paper and post-its notes, or an app, use something that you’re most comfortable and familiar with.
Apps I use or have used in the past are:
- Miro
- Figma
- Illustrator
- Slickplan
- Sketch
- XD
My workflow now looks like this:
If I need to collaborate with my team in a workshop:
Miro is my go-to.
If I need to put something together super quick:
Slickplan is my go-to.
If I need it to look presentable and beautiful, I use Figma or Illustrator.
Use what suits your situation best; it doesn’t matter what it is.
Step 8. Validate
After creating your sitemap, the final step is validation and iteration. We want to know that our customers understand our sitemap and flow as well as we do, and depending on the situation there are a few ways to test our sitemaps:
- Card Sorting
- Tree Testing
- User Testing
- A/B Testing
Just to name a few. I will write about these individually in later articles.
Step 9. Build a sitemap using Miro
I’ve made a video on this topic and I go through the same points but provide a hands-on Sitemap Tutorial using Miro, you can check it out from this YouTube Link:
The End
That’s it for sitemaps, let me know if you have any questions or if you would like to add to this article. I always love meeting new people so let’s get connected here and on any other platform that you use, here are my links https://linktr.ee/arysh
That’s it for this and I’ll see you in the next one.
