100 THINGS I LEARNED ABOUT DESIGN  |  AUGUST 10, 2020

100 THINGS I LEARNED ABOUT DESIGN
AUGUST 10, 2020

11. UX Sitemaps

11. UX Sitemaps

The way you organize content on your website or app can make or break the user experience. Structuring content in a logical way helps users achieve their goals and keeps them coming back. In this article we’ll look at how to do this with a UX tool known as the Sitemap.

The way you organize content on your website or app can make or break the user experience. Structuring content in a logical way helps users achieve their goals and keeps them coming back. In this article we’ll look at how to do this with a UX tool known as the Sitemap.

What is a Sitemap? 

It’s a visual representation of your product’s Information Architecture. The Sitemap outlines the different pages on your product, along with the hierarchy between those pages. 

I like to think of Sitemaps like a roadmap for your website or app. But, instead of cities and towns, a Sitemap shows the different categories and subcategories. And just like roads on a map, a Sitemap shows how these categories and subcategories are connected.

What is a Sitemap? 

It’s a visual representation of your product’s Information Architecture. The Sitemap outlines the different pages on your product, along with the hierarchy between those pages. 

I like to think of Sitemaps like a roadmap for your website or app. But, instead of cities and towns, a Sitemap shows the different categories and subcategories. And just like roads on a map, a Sitemap shows how these categories and subcategories are connected.

Why do Sitemaps matter?

Sitemaps give you a bird’s-eye view of all the content on your product and how it’s organized. When you’re designing a Sitemap, you’re essentially defining how the content on your website or app is structured. That means, you’re also defining how users will navigate your product. 

Users may not directly interact with the Sitemap, but it informs your product’s menu, which users do interact with. A lot. That means, if your Sitemap is structured in a logical way, it will help users find what they’re looking for and ultimately achieve their goals. If the structure of your Sitemap is illogical or confusing, it will lead to a poor user experience. 

Let’s not forget that Sitemaps are one of the first visual representations of your product. You’re now going from a concept or idea to a tangible deliverable that you can share with your stakeholders and other teams involved on the project. Which means, you can use your Sitemap to gather feedback and make changes if necessary.

Your Sitemap becomes a source of truth and a living, breathing design artifact that’s updated throughout the entire project. 

How to design Sitemaps? 

The first step of designing a Sitemap is to define the content that your product will offer. I personally like to do this by creating User Flows for my product and translating those flows into pages. The key pages that make up your website or app. 

I cover what this process look like in an article about bridging the gap between Research and Information Architecture. What it really boils down to is understanding your users' goals, and identifying what they need to achieve those goals. In other words, defining what users will do on your product and the pages they need to do it. 

Why do Sitemaps matter?

Sitemaps give you a bird’s-eye view of all the content on your product and how it’s organized. When you’re designing a Sitemap, you’re essentially defining how the content on your website or app is structured. That means, you’re also defining how users will navigate your product. 

Users may not directly interact with the Sitemap, but it informs your product’s menu, which users do interact with. A lot. That means, if your Sitemap is structured in a logical way, it will help users find what they’re looking for and ultimately achieve their goals. If the structure of your Sitemap is illogical or confusing, it will lead to a poor user experience. 

Let’s not forget that Sitemaps are one of the first visual representations of your product. You’re now going from a concept or idea to a tangible deliverable that you can share with your stakeholders and other teams involved on the project. Which means, you can use your Sitemap to gather feedback and make changes if necessary.

Your Sitemap becomes a source of truth and a living, breathing design artifact that's updated throughout the project. 

How to design Sitemaps?

The first step of designing a Sitemap is to define the content that your product will offer. I personally like to do this by creating User Flows for my product and translating those flows into pages. The key pages that make up your website or app. 

I cover what this process look like in an article about bridging the gap between Research and Information Architecture. What it really boils down to is understanding your users' goals, and identifying what they need to achieve those goals. In other words, defining what users will do on your product and the pages they need to do it. 

When it comes to identifying the content on your product, your business stakeholders can be very helpful as well. A lot of times, your stakeholders will have a clear idea of how they want to structure the content and will be more than happy to share that with you. Then it’s up you to vet these ideas and make sure everyone is thinking about the user as well. 

Once you’ve defined the content, the next step is to start organizing the pages and establishing the hierarchy. How?

I do this based on the following principles:

• Focus on the user
• Go from broad to focused
• Make it scalable 

Let’s start with Focus on the user.

The way you structure your content should be a direct reflection of the users' goals and the steps they take to achieve their goals. The order of these steps should dictate the order in which content appears in your Sitemap. 

Let’s look at an example from your typical e-commerce website. The user’s goal is to buy a specific product and the steps they take look something like this: 

Step 1: Visit the Home Page
Step 2: Choose a category of products
Step 3: See product details
Step 4: Configure product
Step 5: Add product to cart
Step 6: Checkout
Step 7: Receive confirmation

Now if we were to translate that directly into a Sitemap, it would probably look like this:

When it comes to identifying the content on your product, your business stakeholders can be very helpful as well. A lot of times, your stakeholders will have a clear idea of how they want to structure the content and will be more than happy to share that with you. Then it’s up you to vet these ideas and make sure everyone is thinking about the user as well. 

Once you’ve defined the content, the next step is to start organizing the pages and establishing the hierarchy. How?

I do this based on the following principles:

• Focus on the user
• Go from broad to focused
• Make it scalable 

Let’s start with Focus on the user.

The way you structure your content should be a direct reflection of the user’s goals and the steps they take to achieve their goals. The order of these steps should dictate the order in which content appears in your Sitemap. 

Let’s look at an example from your typical e-commerce website. The user’s goal is to buy a specific product and the steps they take look something like this: 

Step 1: Visit the Home Page
Step 2: Choose a category of products
Step 3: See product details
Step 4: Configure product
Step 5: Add product to cart
Step 6: Checkout
Step 7: Receive confirmation

Now if we were to translate that directly into a Sitemap, it would probably look like this:

Now all I really did here was stack the pages from top to bottom in the order that the user moves through them. And you can use this same principle with your own Sitemaps to start establishing the hierarchy of your content.

The next principle is to go from broad to focused.
And what that means is that the top levels of your sitemap should be broader and then as you move down they become more focused.

The home page is a classic example of this. It’s the entry point for most users, and usually its sole purpose is to showcase a broad range of content with the goal of directing users to what they’re looking for. This makes the home page very broad, which means it should live at the top of the Sitemap. 

Now all I really did here was stack the pages from top to bottom in the order that the user moves through them. You can do this based on your User Flow and it's a great way to establish the hierarchy of you Sitemap. 

The next principle is to go from broad to focused.
And what the means is that the top levels of your sitemap should be broader and then as you move down they become more focused.

The home page is a classic example of this. It’s the entry point for most users, and usually its sole purpose is to showcase a broad range of content with the goal of directing users to what they’re looking for. This makes the home page very broad, which means it should live at the top of the Sitemap. 

The shopping cart is another great example. Shopping carts, baskets or bags allow you to bunch multiple products together so you don’t have to purchase each one separately. Therefore the shopping cart itself is a top-level page, because it can be accessed from any page on the website and it can include multiple products. Then, as you progress into actually buying what’s in your shopping cart, you move into more focused pages like checkout and confirmation. Which is why the Cart page appears at the top of your sitemap and the confirmation page appears at the bottom.

The shopping cart is another great example. Shopping carts, baskets or bags allow you to bunch multiple products together so you don’t have to purchase each one separately. Therefore the shopping cart itself is a top-level page, because it can be accessed from any page on the website and it can include multiple products. Then, as you progress into actually buying what’s in your shopping cart, you move into more focused pages like checkout and confirmation. Which is why the Cart page appears at the top of your sitemap and the confirmation page appears at the bottom.

The last principle is Make it scalable.

One of my favorite design quotes is from a fellow named Massimo Vignelli. He’s the designer responsible for the New York Subway Map, which is an example of information architecture at its finest. Anyway, Massimo is famous for saying: 

“If you do it right, it will last forever.” 

The same principle applies to designing your Sitemap. If you make it scalable, it will last forever. It’s relatively easy to design a Sitemap for a product that has only a hand-full of pages. However, when that product grows from 10, to 100, to 1000 pages it becomes much more complex. That’s why you need to think about scalability when you design your Sitemap. In other words, making sure the design still makes sense when the product goes from having 10 pages to 1000.

And the trick behind scalability is to define really great categories. In the e-commerce example we looked at above, imagine if we were to remove the category pages. That means we would have a home page and then a product detail page. This works just fine when you have one product. It’s probably even okay when you have 10 products. But what happens when you have 100 products? Your Sitemap is no longer useful. 

Instead what you want to do is define categories to help group similar pages. So a good example here is “Women” and “Men” categories on e-commerce website. By introducing these categories, you just divided your entire product inventory in half. Now users only have to look at half of those products.

The last principle is Make it scalable.

One of my favorite design quotes is from a fellow named Massimo Vignelli. He’s the designer responsible for the New York Subway Map, which is an example of information architecture at its finest. Anyway, Massimo is famous for saying: 

“If you do it right, it will last forever.” 

The same principle applies to designing your Sitemap. If you make it scalable, it will last forever. It’s relatively easy to design a Sitemap for a product that has only a hand-full of pages. However, when that product grows from 10, to 100, to 1000 pages it becomes much more complex. That’s why you need to think about scalability when you design your Sitemap. In other words, making sure the design still makes sense when the product goes from having 10 pages to 1000.

And the trick behind scalability is to define really great categories. In the e-commerce example we looked at above, imagine if we were to remove the category pages. That means we would have a home page and then a product detail page. This works just fine when you have one product. It’s probably even okay when you have 10 products. But what happens when you have 100 products? Your Sitemap is no longer useful. 

Instead what you want to do is define categories to help group similar pages. So a good example here is “Women” and “Men” categories on e-commerce website. By introducing these categories, you just divided your entire product inventory in half. Now users only have to look at half of those products.

Now imagine we add subcategories underneath Women and Men. Users can now narrow the products down to Sneakers/Running Shoes for Women or Sneakers/Running Shoes for Men. This reduces the amount of products users see and makes it easier for them to find what they're looking for. 

Now imagine we add subcategories underneath Women and Men. Users can now narrow the products down to Sneakers/Running Shoes for Women or Sneakers/Running Shoes for Men. This reduces the amount of products users see and makes it easier for them to find what they're looking for.

Defining these categories is a real art. I won’t get into the specifics here, but I will share the categorization system used by Saul Wurtman, the founder of Ted Talks. In his book Information Architects he breaks down the LATCH system, which is an acronym for: 

• Location: Categorization by geography (i.e. country, city, etc.)
• Alphabetical: Categorization by letters (i.e. A to Z)
• Time: Linear categorization (i.e. newest to oldest)
• Category: Contextual categories (i.e. sneakers category in a shoe store)
• Hierarchy: Categorization by numbers (i.e. top 100 charts) 

You can use this system as a starting point for categorizing content in your Sitemap. 

Validating your Sitemap

The last tidbit I’ll leave you with here is a technique for validating your categorization, and entire Sitemap for that matter. That technique is called Card Sorting. You can get the full low-down on Card Sorting here, but the gist of it is letting the users to organize the content on your product. The way that it works is you give users cards that represent the pages on your website or app. You then ask users to organize these cards into groups.

This technique is amazing for understanding your users’ expectations and logic. You can then reflect this logic in the way you design your Sitemap, which makes for a great user experience.

P.S. I promise to write an article on Card Sorting soon.

Defining these categories is a real art. I won’t get into the specifics here, but I will share the categorization system used by Saul Wurtman, the founder of Ted Talks. In his book Information Architects he breaks down the LATCH system, which is an acronym for: 

• Location: Categorization by geography (i.e. country, city, etc.)
  
• Alphabetical: Categorization by letters (i.e. A to Z)
  
• Time: Linear categorization (i.e. newest to oldest)
• Category: Contextual categories (i.e. sneakers category)
  
• Hierarchy: Categorization by numbers (i.e. top 100 charts) 

You can use this system as a starting point for categorizing content in your Sitemap. 

Validating your Sitemap

The last tidbit I’ll leave you with here is a technique for validating your categorization, and entire Sitemap for that matter. That technique is called Card Sorting. You can get the full low-down on Card Sorting here, but the gist of it is letting the users to organize the content on your product. The way that it works is you give users cards that represent the pages on your website or app. You then ask users to organize these cards into groups.

This technique is amazing for understanding your users’ expectations and logic. You can then reflect this logic in the way you design your Sitemap, which makes for a great user experience.

P.S. I promise to write an article on Card Sorting soon.

Get started with our online UX course.

Get started with our online UX course.