Introduction: As a product designer, creating a sitemap is an essential step in the design process of a web or mobile application. A sitemap serves as a visual representation of the web or mobile app's structure and navigation, helping to organise and plan the user experience. 

What is it?

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

What is usually included on a sitemap:

• Homepage – Usually at the top of a sitemap. 
• Primary navigation(or “Parent Pages”) – considered the main navigation of your website; About, Services, Portfolio pages. 
• Secondary navigation – Also referred to as “child pages” or “secondary pages,” most often seen in a dropdown menu; Single Service Page, Single Case Study Page etc. 
• Tertiary pages – Located one level deeper than your secondary navigation pages. Often not visible in the site’s navigation (for example, product pages on ecommerce sites). 
• Special buttons/CTAs (call to action) – Like for example “Contact Us” in the menu. 

Steps on how to create best Sitemap

1. Define the Project Goals: Before diving into creating a sitemap, it's crucial to understand the project's goals and requirements. Talk to stakeholders, clients, or product managers to gather insights about the app's purpose, target audience, and key features. This knowledge will help you create a well-structured and user-friendly sitemap.
2. Identify User Flows: To create an effective sitemap, you need to identify the main user flows within the application. Start by outlining the core functionalities and actions users can take, such as signing up, browsing content, making purchases, or interacting with other users. Understanding these flows will help you create a logical structure for the sitemap.
3. Choose the Right Tools: There are various tools available to create sitemaps, ranging from pen and paper to specialised software. Depending on your preference and project requirements, you can use tools like whiteboards, sticky notes, wireframing software, or dedicated sitemap tools. Select a tool that allows you to easily visualise and iterate on the sitemap.
4. Start with a Hierarchical Structure: Begin by creating a hierarchical structure for the sitemap. Start with the main sections or pages and organise them into primary categories. These primary categories represent the top-level navigation items. Then, identify subcategories or subpages within each primary category, creating a clear hierarchy that reflects the app's content and functionality.
5. Utilise User Flows and Navigation Patterns: Refer back to the user flows identified earlier and incorporate them into the sitemap. Consider how users will navigate through the app and ensure that the sitemap reflects these pathways. Use standard navigation patterns such as tab bars, side menus, or bottom navigation to create familiarity and enhance usability.
6. Include Error States and Edge Cases: A good sitemap accounts for error states and edge cases. Consider scenarios where users encounter errors or exceptional situations, such as password resets, form validations, or error messages. Include these scenarios in the sitemap to ensure that the user experience is seamless, even during unforeseen circumstances.
7. Iterate and Collaborate: Creating a sitemap is an iterative process. Share your initial sitemap with stakeholders, developers, or other team members to gather feedback and insights. Collaborate with them to refine the structure and make necessary adjustments. Involve usability testing if possible to validate the sitemap's effectiveness in meeting user needs.
8. Maintain Consistency: Consistency is key when creating a sitemap. Ensure that the structure, labelling, and terminology used in the sitemap align with the overall design and brand guidelines of the application. Consistent navigation and labelling will help users understand and navigate the app more easily.

Sitemap examples

as Navigation

Amazon.com

The sitemap for Amazon.com is organised logically, starting with the homepage and moving on to the main categories, subcategories, and individual product pages. Each page on the sitemap has a clear title that helps both users and search engines understand what the page is about.

‍

Apple.com

Another excellent example of adhering to a logical hierarchy is the sitemap for Apple.com. The homepage is listed first on the sitemap, then the various product categories, subcategories, then individual product pages. Each page on the sitemap has a concise title that is easy to grasp for both visitors and search engines.

‍

as XML File

Yoast SEO

Sitemap generator(for existing websites and products after implementation):

• https://www.xml-sitemaps.com/ 
• https://www.mysitemapgenerator.com

Conclusion

Creating a sitemap is a crucial step for product designers when designing web or mobile applications. By defining project goals, identifying user flows, choosing the right tools, and collaborating with stakeholders, you can create an effective sitemap that provides a solid foundation for the user experience. Remember to iterate, maintain consistency, and consider error states and edge cases throughout the process. With a well-designed sitemap, you can create intuitive and user-friendly applications that meet the needs of your target audience.

More on the topic:

• Sitemaps & Information Architecture (IA) — Nick Babich, 2019
• How to create a sitemap in 8 steps: Designing a better UX flow — Anna Savina
• How to Create a Sitemap: Your Comprehensive Guide — Liza Mock, 2017