How to create a UX Sitemap: a simple guideline

schedule11 months - 08/10/2022

“As a little kid, I climbed a lot of trees because I always loved the bird’s-eye view” - Felix Baumgartner, Stratosphere Skydiver

Sometimes UX design requires the perspective of a kid, full of curiosity, to find new heights. By creating a UX sitemap, you’ll be able to take an early glance at your website or application from the tree tops. Let’s look at the what, when, how, and why of UX sitemaps.

What is it?

A UX sitemap is a hierarchical diagram of a website or application, that shows how pages are prioritized, linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird’s eye view.

When is it used?

UX Double Diamond Design Process

Sitemaps are used early in the UX design process, right after the discovery phase. You’ll typically create a sitemap after personas, user journey, and card sorting (Babich, 2019). For an existing website, work on a site audit or content inventory before designing the new sitemap.

Create a UX sitemap after card sorting, and before wireframing.

How to create a UX Sitemap

[Anatomy]

A UX sitemap consists of linked pages, each with a reference number and a label. Reference numbers help you keep track of pages even as you move on to wireframes, prototypes, and iterations (Mears, 2013). Write labels as clear page titles, optimized for users through card sorting.

A single page in a UX sitemap

Start with the homepage, and place pages in following rows by priority (high-level categories to specific pages). You’ll see primary pages in a row, secondary pages in the next, and so on.

3 vertical levels of pages linked by priority

Another way to look at sitemap hierarchy is through URL structure:

website.com/category/sub-category/specific-page

Although optional, you can also include a legend explaining symbols and lines, annotations clarifying information, and illustrated page types to show type distribution (Mock, 2017).

UX sitemap example of a dessert blog website

[Tips for Small, Medium, Large Websites]

Depending on the size and complexity of your website, you can create a flat or deep sitemap.

Flat vs. deep UX sitemaps

For a small website or application (10+ pages) consider creating a flat sitemap, with 4 or less vertical levels. Flat sitemaps enhance discoverability of content because there are fewer levels to click through. The flattest sitemap consists of 1 vertical level, where different sections are placed on one page.

For medium sized (100+ pages), you can still create a flat sitemap but with a wider row of secondary pages. To surface those pages, consider using a mega menu that groups links into sub-categories to improve scanning.

For large sized (1,000+ pages), consider creating a deep sitemap to help house all the information, with 5+ vertical levels. Deep sitemaps can make it harder to discover content, so try to provide alternative ways (like menu shortcuts) to reach deeper pages. Category pages or navigation hubs can also help further organize the volume of pages (Backlinko).

Why is it valuable?

A UX sitemap allows you to plan for usability, whether you’re working on a new website or a redesign (Marie, 2018). It provides a full overview, which then helps teams to simplify, trim off unnecessary pages, and keep what’s important. A UX sitemap also helps you see if linked pages are user and SEO friendly. With a sitemap, you can strategically place content where users would easily find it, and also pinpoint problem areas such pages hidden under an unintuitive label (Mears, 2013).

Conclusion

Overall, a UX sitemap informs user-centered decisions in navigation, labeling, and organization. Here’s a quick recap of what we’ve learned:

What: UX sitemap is a hierarchical diagram of linked pages.
When: Create early in the UX design process, after discovery phase.
How: Each page has a reference number and label, and pages are linked from high-level categories to specific pages. Consider a flat sitemap for smaller websites, and deep sitemap for larger.
Why: UX sitemap shows a full picture of your digital product so you can make better design decisions.

Now that we’ve climbed the conceptual tree of a UX sitemap, I hope you’ve reached new heights on how to improve the UX design of your website or application.