Data-driven Design Part 1 - Best Tools for Analytics, Heatmaps and Recordings to track UX Metrics

Design is often seen as a subjective experience but there are actually many proven design principles that lay the foundation of the design and simply makes it better - no matter who you ask. However, evaluating design quality and defining UX metrics is often more complex than listing bugs in a technical software. How exactly can we reliably measure the quality of design in practice?

What is data-driven design?

Data-driven design is the practice of basing your design decisions on data rather than intuition, assumption, or personal preference. The qualitative data from the user interviews and feedback surveys is essential to understand the context. However, to understand the overview what users struggle with and what they really need, it's important to identify quantitative data that can be measured objectively. How many people entered the page? On which step of the onboarding majority of users drop out? How many users actually clicked the Call-to-Action (CTA) button?

Unlike marketing metrics which often focus on customer acquisition and closing the leads, data-driven design has become a cornerstone of creating exceptional user experiences (UX) during the whole lifecycle of the user journey and product development. Data-driven design is actively used before, during, and after the product launch to continuously gather insights, iterate, and improve the user experience while aligning with the overall business strategy.

What are the benefits of data-driven design?

Successful user experience (UX) requires ongoing commitment and understanding of the value of user data. Without data from real users, user experience design is limited to the design team's perceptions and experiences. By leveraging data insights, designers can make informed decisions that resonate with users, increase conversions, reduce bounce rates and drive business goals. Additionally, understanding user data allows team to tailor experiences based on user demographics, behavior, and preferences to deliver more personalized user experiences.

What are UX metrics?

To follow data-driven design, we need to not only collect the data but also set metrics to gain insights from the data. A user experience (UX) metric lets you measure, compare, and track the user experience of a website or app and implement data-driven design in practice.

However, the fact that we have access to some data, does not mean we should base all our decisions solely on that. UX metrics are always defined together with the business to ensure the goals are aligned with company's objectives and strategy. UX metrics can be used as Key Performance Indicators (KPIs) for product updates and improvements.

There are two main types of UX metrics:

1) Quantitative UX metrics

Descriptive metrics reflecting user actions e.g.

• How many users clicked the CTA button?
• How far users scrolled on the page?
• How fast was the page loaded?
• How many people abandoned the cart?
• How long user stayed on the page?

These questions can be used to calculate for example the following metrics:

Abandonment rate

(Users abandoned multi-step process before completion) / (Users who completed the process)

Churn rate

(Lost Customers ÷ Total Customers at the Start of Time Period) x 100

Customer Retention rate

(Total Customers at the End of Time Period - Acquired customers) ÷ Number of customers at Start x 100

2) Qualitative UX Metrics

Qualitative metrics dive deeper into qualitative data understanding how users feel about your product as a whole. These describe the engagement, loyalty, credibility and satisfaction for example.

Customer satisfaction score (CSAT)

Customer satisfaction score tracks how satisfied customers are with your products and/or services.

Customer effort score (CES)

Customer effort score measures the ease of use of a product or service by surveying customers after they’ve taken an action on your site.

Net Promoter Score (NPS)

Nt promoter score indicates customer satisfaction and loyalty by asking how likely it is that user would recommend the product for others.

All these scores are usually complemented with free-form user feedback to dive deeper into the reasoning whenever needed.

How do you implement data-driven design?

In general, we can identify 3 main methods how to measure the quality of UX practice that we will cover in detail in the next 3 articles:

1. Analytics software: installed directly on the website running 24/7
2. Heuristic Usability Evaluation: conducted by UX expert
3. User testing: website/app tested by actual users

In this article, we will focus on the most cost-effective and low-effort method to make more data-driven decisions - the analytics software. I'll share some of my battle-tested tools and techniques to evaluate the quality of design from an objective perspective using analytics. The best part is that the tools I have used several years by now for this are completely FREE to get started and can be used on autopilot 24/7 while you sleep.

How to add data-driven UX analytics to a website?

Step 1: Connect analytics software to track users

To be able to start collecting anonymous data about your users, you need to set up analytics software on your website. This can be done either by installing a code snippet on your website or if you already have Google Tag Manager installed, you can install the tools also without code using the Tag Manager UI. Installation process varies slightly between websites but if in doubt, you can ask help from a developer.

The common combination I go with on most of the websites I work on includes:

1) Hotjar

Hotjar is a web analytics software trusted by 1M+ websites offering essential tools such as heatmaps, scroll maps and recordings. The tool is completely free to use and I have used this tool actively myself in dozens of projects.

The dashboard shows general metrics like location, devices, browsers, sessions, average time and drop-off rates. You can also add feedback button and surveys directly via Hotjar without coding.

Heatmaps, scrollmaps, and recordings

Heatmap shows "hot" areas that users click on the website. These can help to detect design issues like broken buttons or misleading static designs that look clickable.

Scroll maps show how "far" user scrolls on your page. For example the scroll map above shows that only less than half of the users who entered my website's About page have discovered the little easter egg animation at https://zuzze.tech/about.

Hotjar also records anonymous videos of user movements to gather even more detailed insights that are not provided in any other tools. This includes for example hover effects and complete user flows. I have caught dozens of bugs in the past by watching the Hotjar recordings and Hotjar also provides tools to speed up the recording and informs about rage clicks, U-turns and other indicators that helps to find the problematic sections of the clip. Note that recordings hide some of the information like iframes due to privacy reasons and hence the styling might be sometimes a bit off but this is usually not how it will look like for the end user.

As a certified Hotjar expert & partner, Zuzze is able to share some extra benefits with you for free such as extended free trial and early access to new features via this link. Hotjar also has its own Academy where you can learn how to use the tools but in general Hotjar's user experience is one of the best out there when it comes to analytics software.

2) Google Analytics

While Hotjar has slowly started to replace Google Analytics by offering more general tracking tools, Google analytics still offers complementing data that cannot be found on Hotjar. As it's completely free to use and easy to install, I usually recommend to use it together with Hotjar.

Google analytics offers more accurate real-time tracking and wider details of demographics than Hotjar. You can also track multi-step funnels and add custom campaigns and events, which is not available in Hotjar. There is also no limit how many users can be tracked.

Step 2: Connect SEO software to track general page health

If you don't have an audience ready, Search-engine-optimization (SEO) is crucial to get visibility in search engines like Google. SEO tools inform about general technical limitations that often impact on UX as well. Although SEO software is usually used by techies and marketeers, designers can also gain new valuable user insights from them. Note that you don't need to be an SEO expert to use SEO software. The main value of the software is to inform you when attention is needed and help you fix that in design. Examples of SEO metrics that can help you in UX as well:

• Titles and descriptions: It's useful to know which titles and descriptions comply with SEO best practices and update designs if issues are detected.
• Keywords: Which keyword on the existing website are doing well and which one you should add when working on designs in Figma.
• Backlinks: See what type of websites are linking to your website - this can open a whole new user target group that you were not even thinking about.
• Competitors: You can track competitor websites to gather new insights for your user/market research in early stages of the design process

The best free software for SEO that I have found are:

Diib

Diib is a software with a mixture of general analytics and SEO. It proactively gives you suggestions for keywords, allows you to track competitors and monitor general user metrics like visit duration and number of visitors. It has also built-in Google Analytics integration.

Semrush

Semrush also provides variety of metrics that has an impact on SEO but goes even deeper than Diib. However, Semrush lacks general analytics that Diib has. Diib and Semrush often report different issues so I often have them both installed but even one of them is a lot better than having neither.

Step 3: Ensure Analytics Compliance

Collecting data from users - even anonymous - is regulated differently in different countries. Once you have installed the analytics software on your site, the site will use a technology called cookies. Cookies are small text files that websites store on your computer to remember information about you and your browsing activity. GDPR, CCPA, DMA, LGPD, POPIA and other regulations require that users are informed about the cookie tracking clearly and are allowed to opt out if they wish.

One of the easiest solutions I have found to handle compliance is to use Termly Cookie Consent Generator that generates cookie policy by automatically detecting the cookies used on your website once you enter your URL. You can also generate the cookie banner and other legal templates via Termly as well.

Another proven solution you probably have seen on many sites is CookieBot by Usercentrics, which offers even more customization for no-code integration. If your site is in Wix or Wordpress, Cookiebot has also dedicated plugins for these for easy installation.

Disclaimer: this article is not legal advice as regulations vary based on your location and use case. To ensure your use case is compliant with your use case and local regulations it is recommended to consult a legal expert.

Further resources

This article focused especially on the analytics and metrics of UX on a practical hands-on level. If you'd like to learn data-driven design in-depth check out Measuring the User Experience by Bill Albert & Tom Tullis and subscribe the Explained newsletter below for more articles about data-driven design from the industry.

Did you feel like all this would be nice but not sure where to start? If you'd prefer to have a professional set up the UX Analytics for you, Zuzze has over a decade of experience in developing and designing data-driven software and can help you start collecting data-driven insights, metrics, and KPIs within hours.