Sitemaps. They’re not as fun as customer journeys and nowhere near as sexy as wireframes (believe me, those babies can be beautiful), but sitemaps are still a critical component of your website’s development. Template sitemaps often stop with a diagram of page titles, links and content, but there is so much more potential in this discovery asset. A sitemap can support user experience, inform build decisions, and serve as the blueprint for your build. It can lead your team from research and discovery all the way to launch.
A Living Document.
You can think of it as an outline, a roadmap, or a blueprint. Whichever analogy you choose, the best sitemaps have one thing in common: shelf life. An effective sitemap starts at the beginning of a project, before wireframes, incorporates input from the entire team, and serves as the developing site’s doctrine.
To make sure our sitemap can be used by the entire team throughout the life of a project, we begin by creating the map in a shared folder. This sitemap isn’t the property of the content architect, or the designer, or the developers. It is written for us all, and all of us will have the power to review it, make notes and add columns as needed.
The Foundation Columns.
The beginning columns of a sitemap are pretty self-explanatory. We list the titles of each page, its primary purpose, the navigational elements featured, and the types of content. What we have with these columns is the foundation of a website. Many sitemap templates stop here, a map of your site. But we want the sitemap to serve as the blueprint for the entire project, which means we’re just getting started.
Next we list what the key performance indicators (KPIs) for each page will be. Seeing these metric points on the sitemap day in and day out keeps them top of mind during discussions of user experience, design and functionality.
It’s time to start building wireframes, (cue the sexy music), which means it’s also time to add a column to our sitemap. We create a column for wireframes, stating which pages will be unique and need to be wireframed, and which will follow a template (such as Employee Profiles or Product Pages). A detailed sitemap informs the conversation between the user experience strategist, the content strategist and the rest of the team about which pages need to be wireframed, and what elements need to be represented in those initial concepts.
A Production Checklist.
Once wireframes are approved, design and copy can dive back into the sitemap. How many section headers do we need to write? How can design make this important piece of content stand out? Looking back at our primary purpose and KPIs for each page of the site helps inform our creative decisions. We can make notes if anything has changed or if we spot any issues, and even add columns to link to copy documents and approved designs.
When the project goes into front- and back-end development, our programmers have a living record of the site’s evolution to work from. They can reference wireframes and designs quickly, determine which pages are unique, which have a coding challenge they’ll need to solve, which pages can be static and which need the freedom of a CMS. It’s all right there, in our sitemap. It has been our guide for, and a record of, the entire project.
Want to know more about architecting a user-inspired site? Let us know your questions or thoughts in the comments!