Commented Sitemap

One of the first things that frustrated me when I started working as a UX designer was sitemaps. Sitemaps used to be done in Microsoft Word with bullet points. I wondered how clients will understand sitemaps that were merely a list of pages in a hierarchical order. I would have thought there has to be a better way.

Concerns

My concerns with these sitemaps were:

• What if the client will visualise a page differently than it was meant to be?
• How can a UX designer/IA finalise the sitemap without doing wireframes/prototypes and sketching?
• How will pages that were realised or removed later effect the client?
• How will clients connect the concept of the sitemap and the wireframe/prototype?
• Is creating a sitemap helpful at all if it’s hard to imagine what each page will look like?

Search for a better solution

I started searching for different sitemap visualisation ideas, however, without success. I knew I will have to find my own way of doing this. What I came up with is not final or perfect but it proved to be really helpful to me and to my clients.

In an ideal world I would create a draft sitemap just for the record but would finalise it only after the prototype is ready and I would see the pros and contras of each page, their features and modules. When I’m ready I would show the client both the sitemap and the prototype. However, when scheduling has to be taken into consideration you may need to approach these phases separately.

Talking to myself – the idea

When creating these sitemaps I was routinely talking to myself. Talking about what each page will do, how will they look like, pros and contras of a page and so on. It was helpful for me to visualise the sitemap in a way of talking to myself about it. And then the bulb sparkled and I thought to myself why not comment the sitemap and let the clients know what I was thinking when I created the sitemap. Add my ideas, describe features on the page, speak about dilemmas so that everyone can see it. Exactly this is what I did. I added speech bubbles to the sitemap which I created in axure and made my clients happy.

The idea

Live demo

Step by step process

First, I created the page structure in the axure sitemap window. I simply used empty pages as I will create the prototype later. Then I created a page called “Sitemap” outside of my sitemap structure. While on the Sitemap page I right clicked on the Home page and selected the option “Generate Flow Diagram”. This created a simple sitemap of all the pages under Home. I used the “Right hanging” diagram style as it gives the best overview for even larger websites. But you can use Standard if you like. Then I added my speech bubbles and explained what each page is supposed to do. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

This sitemap not only shows the pages of a website in a hierarchical order but it also gives an insight into what each page is meant to do. Since it was created in axure as a sitemap diagram, each sitemap item will link to the page it’s associated to thus bridging the gap between the sitemap and prototype.