How to Use Google Analytics to Improve Your Web Design Projects

How to Use Google Analytics to Improve Your Web Design Projects
Google Analytics to improve web design projects

Want to stand out in the dog-eat-dog design and development world?

You’re aware there’s competition out there. And you know the key to success is differentiating yourself from your peers in order to stand out and win your clients’ confidence.

What if I told you there’s a way to design and build better-performing websites for your clients, and as a consequence, you can charge more?

If your task is to redesign an existing website, there’s usually a treasure trove of analytics data that can easily and quickly be used to inform your redesign efforts.

You see, web analytics serve many useful purposes in creating, maintaining, and improving websites. This data is most often used to analyze who your client’s visitors are and what they do on a website.

But the far less common use of analytics lies in its power to reveal design flaws. Useful information uncovered this way can directly or indirectly improve a website’s ability to attract and convert visitors. The great thing is that almost everyone uses Google Analytics, so the data is all there.

When you add this skill to your services, you’ll also be doing one thing that 99 percent of your competitors aren’t: using solid data to inform your website design and build.

Since you’ll want to bookmark this:

Who can benefit from this article?

If you’re a web designer with a client who’s asking you to redesign their ecommerce website, this article is right for you.

If you’re a web designer with a client who’s asking you to redesign their ecommerce website, this article is right for you.

Below, you’ll learn how to use analytics to uncover what works and what doesn’t on your client’s website, so you can use this data to inform your new design. That way, you can go straight to designing a website that is the right for your client.

The additional benefit for your client is that setting up analytics correctly in this phase saves a lot of effort later on. From a true growth-driven design perspective, analytics are a vital tool to continue monitoring the performance of the site once it’s deployed. You can continue improving it by adding additional features or fixing issues after the initial redesign. 

You can do all this without using any tool other than basic analytics. Just open Google Analytics (or a similar tool). For the purposes of this post, I’ve focused on Google Analytics, but other analytics tools like Adobe Marketing Cloud and KISSmetrics contain the same data.

Becoming a Full-Stack Web Design Freelancer

From web optimization to content marketing, this comprehensive guide will walk you through additional services that you can use to retain existing web design or development clients.

Download Grow Volume 2

Useful metrics to consider

The Audience and Behavior reports are the best places to start looking for clues on whether a website’s performance is significantly lower than average.

Critical indicators of poor performance include bounce rate, conversion rate, exit rate, lower engagement, and other metrics that signify visitors have problems interacting with the content of the website.

So what are the metrics we should evaluate in order to understand what’s working/not working with the current design? Let’s get familiar with individual metrics before we delve deeper into how to use them to enhance your client work.

Bounce rate

Bounce rate is the metric that signifies the proportion of visitors that did not interact with the web page in any way after they opened it.

It could mean that a visitor closed the browser, or clicked on an outbound link, or stopped navigating the website in any other way, allowing the session timer to expire.

High bounce rate on a web page that is supposed to provoke action from visitors is often an indicator that there is something wrong with the page.

Google Analytics to improve web design projects: Bounce rate reports
Bounce rate reports can most easily be accessed by opening Behavior → Landing Pages.

Exit rate

A page’s exit rate shows the number and percentage of visitors who leave the website after reaching that particular page.

This can be expected behavior. For example, a page that leads to an affiliate site may have a high exit rate and no on-page problems.

But high exit rate can also be unintended, indicating that people are leaving the page because of issues. This usually merits a deeper investigation.

Google Analytics to improve web design projects: Exit rate
Exit rate can be found by opening Behavior → Landing Pages.

Conversion rate

Conversion rate is the indicator of the proportion of visitors who end up making a purchase or completing another action that is beneficial to the owner of the website.

Conversion usually fulfills the website’s purpose, and (in the case of ecommerce sites) brings in revenue. It’s often a website’s primary indicator of success.

Google Analytics to improve web design projects: Conversion rate
The most relevant display of conversion rate can be found in Technology Reports. Any conversion rate lower than average may signify some issues. Navigate from Audience → Technology → Browser & OS to find conversion rates.

Engagement

Engagement indicators show how much visitors interact with the website. These include the duration of time they spend and the number of actions they complete (downloading files, watching videos, filling out forms, etc).

High engagement means visitors are attracted by the website and its content. The average session duration indicator is available on most of the reports we have examined so far. While there is no universal benchmark for a “good” session duration, a useful benchmarking method is to use your best-performing pages as an ideal.

Google Analytics to improve web design projects: Engagement
Session duration highlighted on Pageview report.

Site speed 

How fast a website loads is critical for most visitors. If load speeds are too slow, visitors may quit waiting and leave. Improving load speed is one of the best ways to improve engagement.

Google Analytics to improve web design projects: Page speed
Page speed report on top pages. Site speed indicators can easily be accessed by going to Behavior → Site Speed.

Now that we know what metrics to look for, let’s see what insights we can uncover from them, and how to use this data to improve your future website designs.

You might also like: 8 Usability Metrics Tech Teams Can Use To Analyze User Behaviour.

Analyzing and interpreting the data

Knowing what the data shows is just the first step in uncovering issues. Let’s dig deeper into the data, interpret it, and use it to improve the design of the website.

1. Uncover problems with browser or device compatibility

If all visitors used only one browser and device to access every website, we wouldn’t need to talk about this.

If all visitors used only one browser and device to access every website, we wouldn’t need to talk about this.

But since there are a huge number of different web browsers (even the same browser has different versions), operating systems (Windows, MacOS, Chrome OS), and devices (desktop, tablet, mobile), cross-device and cross-browser compatibility are major considerations.

Let’s say you design a website, deploy it, and decide to check it out on your own computer to see if it’s good enough.

You click around, open images and different pages, and you’re very happy with how the design turned out. Your colleagues look at it on your computer, and they’re thrilled.

But then disaster strikes. Someone opens the website on their MacBook using the Safari browser. No element is rendered in its proper place. The website is a mess. What happened?

You’ve been just hit with the cross-browser compatibility problem. Despite HTML and CSS being standardized “languages,” small differences in how each browser interprets and renders elements can result in significantly different displays of content.

Problems often arise from using specific code, features recognized by one browser but not others, or with older versions of browsers that don’t recognize new features added later.

Solving this problem is usually simple and quick, but how can you be sure that these issues are the only ones? You can’t — unless you check the site in other browsers. Or, you can speed things up and use Google Analytics.

How to use Google Analytics to check for browser issues

To check for potential browser issues, open the Audience tab in Google Analytics. Audience reports contain everything about visitors to a website, such as whether they’re new or returning users, their interests, demographic info, and location.

The most useful reports for the purpose of improving your web design are the Technology and Mobile reports.

You can find these in Audience → Technology and Audience → Mobile.

Google Analytics to improve web design projects: Types of browsers
The report showing the types of browsers site visitors use.

Opening the report shows us the proportion of visitors that reach the website using various browsers.

Google Analytics to improve web design projects: Individual browser version report
Individual browser version report.

When you click the name of each browser, you will be able to see how many visitors used different versions of the same browser. In the above example, we’re looking at different versions of Chrome.

You can analyze these reports to uncover which (if any) browser has issues that prevent visitors from viewing the website correctly.

The below table contains all the metrics we talked about above. By comparing them, you can quickly see any problematic browsers.

Google Analytics to improve web design projects: Potential browser issue
The potential browser issue is highlighted in red.

In this example, we discovered that Chrome 49.0.2623.112 had a significantly higher bounce rate. Visitors using this version of Chrome bounced 68 percent of the time without interacting with the site.

If this were your client’s website, and a large enough proportion of their visitors used this browser, then this issue might be worth looking into.

This particular example may not merit a thorough investigation, as it concerns a small proportion of users, and will most likely solve itself in due time as more and more users upgrade their browsers to the latest version.

This report is even more useful if you use the comparison feature in Google Analytics.By clicking on it, you can see a difference in bounce rate between the different browsers at a glance.

Google Analytics to improve web design projects: Comparison feature
Browser report showing the comparison feature.

Using other technology reports

Of course, this is not the only way you can use analytics to check for website design issues. Google Analytics has a few other tricks up its sleeve.

Using the same reports on Browsers and OS, you can check how visitors using different screen resolutions behave.If it appears that visitors using a particular resolution behave any differently than the average visitor, then there might be a problem with displaying site content at that screen resolution.

 Checking the whole website for areas where screen resolution may make a difference is easy to do using Google Analytics’ secondary dimension feature.

 By selecting Screen Resolution as the primary dimension and Landing Page as the secondary dimension, you can create a report that shows how individual visitors behaved on each of the site’s landing pages at a given screen resolution, or by any other of the available primary dimensions — browsers, OS, etc.

Google Analytics to improve web design projects: Secondary dimensions
Secondary dimensions help reveal more insights.

You might also like: The Ultimate Secret to Increasing Your Online Conversion Rate.

2. Site speed reports

Site speed is considered one of the greatest impediments to smooth user experience. Studies have shown that slow load speeds affect conversions and engagement on the site. Therefore it’s in the best interest of your client to reduce page load time to a minimum. 

Site speed especially affects mobile users, as they’re usually navigating the site on the move and want to see the information they seek immediately. And mobile users are representing an increasing demographic on e-commerce websites.

While there are dedicated tools that can analyze site speed and give recommendations to improve it, Google Analytics is able to quickly give insight into how fast an individual page is loading, and compare it to other pages on the site.

How to use Google Analytics to spot speed issues

By using a Page Timings report, you can see which browsers have the slowest average load times.

Google Analytics to improve web design projects: Page timings
The Page Timings report shows how fast individual web pages load (on average).

With this information, you can find out which pages need design optimization to improve load speeds.

Some design improvements that can help increase page load speed include:

  • Using a smaller number of images
  • Lowering image quality
  • Using less Flash or other similar code-heavy additions

The most important advantage of Google Analytics over other tools is that it can give you immediate clues about how much these issues affect a site’s users, and what increases in performance you might expect by solving them.

This enables you to make an informed judgment about which issues merit fixing. If you detect an issue with a browser or load speed, but it affects only a couple of people, then any attempts to fix it may be too much effort in exchange for a negligible impact on performance improvement or revenue.

This enables you to make an informed judgment about which issues merit fixing. If you detect an issue with a browser or load speed, but it affects only a couple of people, then any attempts to fix it may be too much effort in exchange for a negligible impact on performance improvement or revenue.

One of the most helpful features of Google Analytics is the ability to directly open a given web page from the report, by clicking the Open in Browser button at the top right corner of the report box containing the abbreviated URL. This way, you can immediately navigate directly to the page and check it for visible issues.

Google Analytics to improve web design projects: Open in browser
Clicking the highlighted element will open the page in your browser.

3. Session duration reports

While bounce rate and conversion rate offer direct indicators of performance, session duration is an indirect indicator of visitor engagement. Google Analytics shows how much time visitors spend on the site and its individual pages.

Although this metric is imperfect (it can easily be fooled by a visitor who opens a few tabs, for example), it can still be used as a very real indicator of a visitor’s interest in a page.

Of course, it’s possible to create custom indicators using the Tag Manager that measure only the “active time” a user spends on the site. Furthermore, you can measure scroll depth to gauge visitor engagement. All those proxy indicators may be used to uncover possible issues on the website.

How to spot issues

When you open Duration reports, you will notice the time spent on page reported as average session duration. If you notice that visitors spend little time on the pages that are supposed to engage them meaningfully, then there may be a problem.

You can check if the problem is related to design by using secondary dimensions exhaustively. Be sure to check different browsers, devices, and other technical data about your visitors.

Note that what is reported here is average session duration, so you may notice that some groups of users have longer and some have shorter session duration. If you’re measuring engagement, you’d likely want longer session duration.

If, on the other hand, the page is supposed to make visitors click some call to action, longer session duration may indicate that visitors are confused and cannot find the call to action. This is another potential design issue you may want to check for. 

Here’s an example:

Google Analytics to improve web design projects: Session duration
You can use session duration in combination with secondary dimension settings to uncover less-engaged visitor groups.

As you can see, in this example, I took the landing page report and drilled down to one individual page report. By selecting a secondary dimension to show me which browsers my visitors used, I saw how this page performed by browser. 

You can use different secondary dimensions, such as devices (mobile, desktop or tablet), operating systems, or screen resolutions. If you notice that any of these have lower visitor engagement, you can easily check if this is a consequence of some design element or an unrelated issue.

Bonus: Two tips to help designers go above and beyond analytics

These tips aren’t strictly related to analytics and tracking, but they’re good strategies to keep in mind when working with Google Analytics on client builds.

TIP #1: Talk to your customer about setting up surveys and polls to find out what doesn’t work on the existing website, and what needs to be improved.

Even though you can find ways to improve nearly every website just by looking at the raw analytics data, sometimes you’ll find out that you need to know more.

If this is the case, you can always do one thing: ask the visitors themselves. By creating a survey and asking them a series of questions, you can get a clear idea of what poses the greatest problems to the people who matter most: the website’s visitors. 

If you conduct a proper survey and ask the right questions, your work will be that much easier.

TIP #2: A/B test your designs so you don’t make horrendous mistakes that can result in loss of revenue.

Invariably, you will encounter a situation where there is no single potential solution for a problem you’ve uncovered. If you can’t decide between two solutions, why not split-test them?

Split-testing (also known as A/B testing) tools like Optimizely, Visual Web Optimizer, and Google Optimize help you test the efficacy of design, development, and copy changes. (Google Optimize is free of charge, easy to set up, and works great with Google Analytics.)

The idea behind conducting an A/B test is to compare different versions of the same design, and, using exact measurements, determine which of these performs better. When you set up an A/B test, you will split traffic equally between the two design solutions. Ideally, it will become clear which version website visitors prefer. Once the visitors have their say, implement the better-performing variation permanently.

While the mechanics of A/B testing are beyond the scope of this article, I wanted to give you a heads-up about potential tools that can protect you from making costly design errors from the start.

A/B testing usually requires a lot of research to conduct properly, but testing offers an ideal opportunity to validate the basic ideas behind a redesign.

You might also like: How to Conduct Research That Drives A/B Testing.

The quick-fire summary

Let’s recap:

  • Google Analytics and other similar tools (like Adobe or KISSmetrics) are often perceived as purely quantitative sources of information.
  • However, you can use analytics data to get some sense of where the website has design issues and what could be improved, design-wise.
  • From this angle, metrics like bounce rate, session duration, and conversion rate are crucial indicators of existing design issues.
  • By using Audience and Behavior reports in Google Analytics and secondary dimensions, as well as the comparison feature, we can find out if a website is severely underperforming — then single out the devices, web browsers, or operating systems affected by that underperformance. 
  • Armed with this information, we can redesign or change a site’s pages or structure to offer the most engaging experience to each visitor.
  • The most important areas of an ecommerce website, which must function properly, are those directly connected to the conversion and purchase process.

Here’s how to prioritize the issues your analytics might reveal, in order of highest priority to lowest:

  1. Serious design issues preventing visitors from viewing the page or site in the way you anticipated.

  2. Issues adversely affecting a relatively large proportion of the audience.

  3. Issues on product pages: these must be designed clearly to enable visitors to complete the conversion quickly and efficiently. Common issues range from technical (like coding errors that prevent visitors from clicking the call-to-action button) to design issues (such as a hard-to-notice call-to-action buttons).

  4. Issues that prevent visitors from filling out forms or completing other conversions on the path to becoming customers.

  5. Issues that bear relatively minor influence on the experience and session duration.

While technical errors or malfunctions are serious, you can usually catch these by using dedicated tools like Screaming Frog.

Often, you may only be able to detect a design issue by using your eyes, or conducting user testing and surveys. But by using analytics, you can inform this process by rough estimates of where the issue may be, and sometimes you can fix it right there.

What to do next

If you’re interested in learning more about Google Analytics, here are some additional resources to help round out your analytics education:

How do you use analytics to improve website design? Tell us in the comments section below.

About the Author

Edin Sabanovic is a senior CRO consultant working for Objeqt. At Objeqt, we help grow ecommerce stores by improving conversion rates using analytics, customer research, and A/B testing. If you like this article, you should subscribe to our How to Conduct A/B Tests for E-Commerce Growth email course.

Grow your business with the Shopify Partner Program

Learn more