Design Tip 8 – Iterating designs based on user data and heatmaps

When I first started as a designer, I created designs that gave no consideration for the end user at all. Nor was I familiar with the intended business outcomes. Users? Who’s that? Lets just make this shit as cool as possible. We'll make this 3D cube spin and then explode out. It’ll be great. The companies that were actually thinking about users, were creating horrible looking work and just creating 100 page justification documents. I'm not sure they were really focused on servicing people. There weren't many companies that excelled at thinking holistically at designing for the web. It was an era of marketing sites and doing neat micro sites in flash. How designers and agencies could out do one another by having as much gratuitous animation as possible and try to win awards. Don’t get me wrong, it was a fun time and I learned a ton during this period, but over the years my focus has been less and less about that, and more about creating outcomes with good design.

But what is good design you ask? In my opinion, it is work that meets and exceeds the needs and expectations of the end user, whilst delivering on business objectives and is beautiful and highly considered. There are many moving parts that go into creating these outcomes and to create good work. Unfortunately, there's too much to write about in just one post and it's not what I intend to write about today, but merely a segue to a small tool that we can add to our designers toolkit to help us get there. Something that can gauge the activities of users in a live environment and see how they are interacting with our work. And that is by using heat maps. Heat maps give you a page by page breakdown of where users are clicking and tapping. It provides us with a ton of data that we can extrapolate and make informed decisions about our design. Here are some of the benefits of using heat maps:

  • Heat maps is a great way to get user data and gauge what our users are doing
  • Digital work is never ever truly finished, data gives us insight into how to improve our work
  • Data is good for validation
  • People don’t always do what you expect them to, you can uncover some of these things

Iterations are essential for making a design better. Hopefully, when you look at your old projects, you can see glaring things that are wrong with it and see areas for improvement. It means that you are showing growth based on new experiences and new found knowledge. And in the same token, live websites can be improved upon as well. It can be improve based on the data that we receive from real people using the site, and to see if users are clicking where we expect them to. Based on this data, we can determine if we missed something that we haven’t account for, if there are pain points that users are facing or what we can optimise to reach the business goals we set out to achieve. If you’ve been following this blog since the beginning, there have been incremental changes that I've been making to the site based on data from heat maps. The tool I use is from SumoMe. . Here are some of the things that I’ve uncovered and tested based on data used from heatmaps.

I recently redesigned my homepage for a couple of strategic reasons. I wanted the mailing list call to action to be more prominent, as that was the primary action I wanted for new visitors. Also, doing updates to the previous homepage required some manual work for each new article, so it was a massive drainer. This new design didn’t have that issue. With the revised design, users were still just 1 click away from the articles. However, the hierarchy of information is weighted better now based on the goals of the page.  After implementing this, the statistics backed up my thinking as I received significantly more signups to the newsletter, and my loyal readers can still access the articles weekly via the newsletter. Finally, the hotspots show that all the links are still discovered easily by users, which validated my thinking.


Under each of the articles, there is a symbol under the title which represented the category. D is for design, P is for personal, B is for business and A is for ask me anything. When I designed the site, I intended it to be clickable, but on implementation I totally forget to link it up. When I looked at the hotspots, I noticed that a few users were trying to click that to go to related categories. So I linked that up and have seen it used throughout different article pages, resulting in users reading more content and hopefully finding some useful information :) 


These are some of the changes I made a while back. The link at the bottom used to say 'view journal entries' – that would take you to the same page as the articles. As it turned out, a ton of people clicked this link. In turn, I decided to change the language and setup an archive page where you could see different categories and skim articles a lot easier. I also forgot to link the Verse logo in the footer which I've since fixed. And for some odd reason a number of users were clicking on 'awesome subscribers' which wasn’t actually a link previously. After seeing the hotspots, I decided to turn that into a link. Which surely have attributed to some new subscribers.

You may be thinking that a few of these are front-end changes and are not design related. But design to me is the experience, the processes and how it works. To change an element from non-actionable to actionable is a change in the way users experience the site. Little incremental changes that add up to big things. 

So I hope that you introduce heat maps into your own toolkit and see how you can use this data to validate your designs with clients and for your own projects.