Working smarter means investing time in planning. To improve the results from a website or app*, you need to understand your visitors and their behaviour. To get this understanding, you need to track the visitors and behaviour. For tracking to be useful, you first need to know the website.
* this technique can be used with both websites and app but I will just refer to websites to keep it simple from now on.
The best method I have used over the years to learn a website is to create a visual map of it. It is both simple and incredibly useful. My biggest surprise is that every company doesn’t have these visualisations for their website/s.
The visualisation map consists of boxes representing page groupings (I call them page nodes) and arrows linking boxes to represent expected visitor paths. And that’s it. The visualisation can be expanded to include key actions, links to offsite content or to show which pages are behind a paywall, which contain forms, etc. The core of the visualisation though is just boxes and arrows.
Website visualisations do not list every page on the website individually. They do not include every possible visitor click path. It is a representation of how visitors use the website. As a representation, there is no single right answer (although there are many wrong answers). You know your visual map is fit for purpose when the viewer just gets it, they can quickly grasp how the website is constructed.
Origin of Website Visualisation Maps
I created my first website visualisation with an early L3 Analytics client. I was lost in the weeds of a tagging document and I couldn’t get my logic & naming conventions right. So I tried sketching it out and it worked. Once I had a visual map of how the website was structured, I could complete the tagging doc.
A couple of clients later, I was stuck again so reverted back to this approach. Once again, visualising the structure resolved the issue and I was able to move on. Pretty soon, creating a visualisation map was in the first couple of tasks for each new client.
I consider this important enough that it became the primary task in the first week for new starters. They had to create multiple visualisation maps, starting with a website they knew well and then getting more complicated.
Analytics Use Cases for Website Visualisation Maps
My key purpose for website visualisation maps is to create a page naming convention for Google Analytics (or any other tool). By mapping out all pages, defining hierarchies, ensuring all pages are included, the work to create an intuitive user-friendly hierarchical page naming convention is simplified. It becomes a matter of transposing a visual map to a spreadsheet format.
That is only the beginning of the use cases (and I feel I have only scratched the surface of these myself).
Within any website visualisation, you will likely discover multiple key page nodes and mini funnels. These become very useful in identifying options for analysing website performance. The above visualisation map is an example for a generic ecommerce website. Examples of analysis suggested through this website visualisation are:
- What pages nodes were viewed next from the Homepage
- The ecommerce funnel (look for products, view product, create basket, start checkout, place order) will always exist for any retailer but now the potential leakage points are visible
- Comparing the mini funnels to get to a product page from each method used to look for products
- Break down of methods used to add products to basket e.g. product list (not possible in this visualisation), product details, basket, order history and wishlist pages
- The different paths through the checkout process depending on whether already logged in as an existing customer, not logged in but an existing customer, a new customer who registers and via the guest checkout process
With page nodes comes Page Types. Once you have Page Types, you can stop using landing/exit page reports and instead review entry points and exit points with the individual pages grouped together. The detail is still available to be drilled into but not displayed by default.
In fact, it would be great to display data points using the website visualisation. It could display the data for entrances, exits or the use of paths between page nodes directly on the visualisation. Numbers make more sense when presented visually compared to large data tables (maybe not to analysts but to most people).
Other Use Cases for Website Visualisation Maps
Visualisation maps should prove useful beyond the analytics team. Product Management teams in particular benefit from knowing exactly how the website is put together. I may have been unlucky with the clients I have worked with over the years but no company has had a definite knowledge of their website structure.
One time working on app tracking, I went back & forth with the Product Manager more than a dozen times on one app section to get the mapping correct. I used a lot of “but look, if I click here, that is what I see next” and “well show me how to access that screen from this screen” as we clarified exactly how the app would work.
I included the creation of visualisation maps in many of my training workshops over the years. One time, I had a senior executive from a middle eastern telecommunications company in my session. He had never looked at his website in this detail previously. He mapped out the top few layers of the website and discovered he had mapped out the company organisation structure.
The exec then pulled up the Emirates website on his phone. The current primary options on the homepage can be seen above and it was pretty similar back then (although without the Covid message). These are the five key reasons for accessing the website.
The executive called his dev in the next break. The instruction was to rebuild the wesbite from the visitor point of view instead of the business structure.
Visualisation maps can even lead to websites getting rebuilt.
How to Create a Visualisation Map
To get started, simply look at the website and start mapping it out. Don’t expect to get it right first time (I can never achieve that). Focus on identifying the page nodes first. Leave the visitor paths and even the layout of the visualisation for later.
Pages should be listed individually if they are important within the context of the website. Examples include the homepage and all pages in a checkout process. But article pages, product pages, blog posts, listings pages, etc should be grouped into page nodes.
Every page needs to appear on the visualisation map, either independently or as part of a page node. A simple test for completeness is to have someone else select pages on the website, allowing the visualisation creator to point to where this page appears within the visualisation. If it can’t be found, then the work continues.
When most page nodes are in place, start adding in the visitor paths. Like pages, not every visitor path is included, only common visitor paths. For example, the homepage can typically be accessed from any page by clicking on the logo – don’t show these paths. The same goes for all the links in the top nav and in the footer which can be used on any page. Focus on the paths visitors should take to navigate through the website.
After the initial approach of simply looking at the website, get more methodical. Extract a list of all website pages from your analytics tool to excel (or other spreadsheeting program). Sort this list in alphabetical order. Review the list and ensure all pages appear in the visualisation. Using the page node approach, you should be able to tick off chunks of rows at a time e.g. all article pages.
This is far easier if there is a decent page naming convention implemented already. You may need to make quick adjustments (e.g. remove URL query parameters or rename error pages as “error page”) to simplify the list. If required, take these actions and wait a couple of days to collect fresh data.
Once you have all page nodes and visitor paths, rearrange the visualisation map into a structure that makes sense. The homepage page node may be at the top of the map, to the left or in the middle. There is no one right answer here, the structure and design reflects your understanding of the website and the story you want to tell through this website visualisation.
If it is unclear where a page belongs on the visualisation, there are a few tricks you can use:
- View the page within the website
- Look at the URL and breadcrumb structures for that page
- Use page flow reports to see how the page is accessed
- If needed, log in and even be prepared to make dummy purchases/conversion so you can view every page/path within a checkout process
Tools to Create Visualisation Maps
I haven’t mentioned the tools used to create website visualisations. The starting point, potentially the end point, is paper and pencil. Just getting your thoughts down on paper is the key first step. Easy to adjust with your eraser and if necessary, to tear up and start again… I recommend A3 paper, we used to have a sketch pad in the office just for visualisation maps.
I did some research when I wanted to get more professional versions of the visualisation maps (and had to move beyond MS Word). The tool we settled upon at the time was Gliffy and have used this ever since. It is not ideal but does the job. Any wireframing/drawing tool should work. It helps if lines are snapped to shapes and if it has aligning tools for the page node shapes.
The obvious question is whether these visualisations can be automatically created through website crawling/access to your Digital Analytics data. I don’t believe it is possible as yet (although plenty may be able to prove me wrong). The visualisation is designed to tell a story so knowing which pages to group and which paths to include/exclude depend on your storytelling skills. That is what I don’t believe is possible through ML/AI as yet.
Throwing it out there
Gliffy is a decent tool for creating website visualisation maps but I don’t need most of the features and it is lacking in features I would like. There are alternatives to Gliffy but I would expect similar, using a tool designed for one purpose for my alternative purpose.
A tool designed to build website visualisation maps would be much better. The graphics options would be a standardised set of building blocks which could be customised in standardised ways. You could even upload page lists to check against to ensure all pages are included in the visualisation.
Once you have a website visualisation tool, useful for analytics, product management and other part of all online businesses, I have ideas for how it could be extended. I have ideas for linking it to Web Analytics tracking guides (whichever tool is used). Every company who customises the tracking on their website (or app) would want this tool to help manage the process.
Then there is the option of turning the website visualisation map into a reporting and analysis tool as well. There don’t appear to be any great pathing tools available currently and an integration with a manually defined website visualisation may just be the solution.
With a young son and my liquid assets about to be invested into a home sometime soon (hopefully), I can’t gamble it all on creating a new start-up. But if a tech firm wanted to partner with me (gambling their resources aligned to my vision) and/or investors wanted to cover costs, we could talk. I have the vision for this tool/these tools but need the tech side and financial backing. Please get in touch if interested.
In Conclusion
I can’t recommend creating website (or app) visualisation maps highly enough. They sound simple to create, quickly become difficult, morph into impossible tasks to get right and then, somehow, you have a clean elegant visualisation which makes sense of your website. With some practice, these should take less than a day for most websites (some sprawling messes of websites are exceptions).
I am conscious this blog post covers the concepts of website visualisation maps but it is not a guide you can follow. Blog posts will follow shortly detailing the ZHS Orchards (**edit: now live**) and Ecommerce examples. Unfortunately, I can’t share the many maps I have created previously for examples as they are client information they may not want to share (plus I don’t have access to them anymore).
** edit: offer no longer available, a website visualisation was created for the Volkswagen Belgium website, blog post to follow ***
To make an offer, I will create a free visualisation map for one website as long as the map and the process I followed to create it can be shared publicly afterwards. I will put a limit of one day on the creation of the map (to avoid getting sucked into the details of one of those messy sprawling websites) and it also needs to be a website of not insignificant size.
I will require access to your analytics tool (ideally GA) so I can access a list of pages and to use the navigation flow reports if needed. An NDA will be signed in advance and no confidential data, beyond the structure of your website, will be shared.
Get in touch if interested in this offer. ** edit: offer no longer available **
Of course, my services include the creation of these maps, definition of key paths through a website or app and the analysis of visitors and their behaviour. Please get in touch if you would like to know what this may look like for your business.
