What is data-driven design?

Data-driven design is the process of mindfully making design choices based on factual user data. Designs are not made by what the designer “feels is right”, by their “creative mood”, or chosen by what “looks good”, but rather by data that dictates what the design should look like and function like, respective to actual site users. The data can be obtained in a few ways, such as: user surveys, user testing, A/B testing, consumer research, site analytics. Because site analytics is such a quick and instantaneous way to get data, and a great entry point for designers first starting to use data to influence design choices, this post will primarily focus on using site analytics to obtain data.

Why is data-driven design important?

Bad design choices and bad UX flow and page layouts cause user drop offs, meaning less people get to their lead conversion pages, meaning less conversions on their site, and less monetary gain for their companies. The goal of design is never to design something that only looks good, but something that functions just as well. And by functioning well, I don’t just mean that a development feature works, but that the elements on a web page or ad function as assumed for a user’s need. This means that the design elements you designed allow the user to complete a full user flow, conversion flow, or checkout process as intended without any errors or high bounce rates. 

I’ve also noticed from my years in design that clients absolutely do care about their designs in a data sense, primarily because design choices directly impact the bottom line of their business. Clients question the data that will be produced as a result from my designs frequently. In design reveals I’ve gotten asked questions like:

  • “How many of my users will actually scroll past this banner and get to the next region?”
  • “What call-to-action button color will my users click on more, blue or orange? That’s important, it will impact our sales directly.”
  • “Does a contact page perform better with or without the banner at the top of the page?”
  • “For our portfolio page, do users want to read more about the project and process of building the kitchen and the story of working with the client? Or do they just want to see tons of images? What will perform better for our users and the persona we cater to?”

These are tough questions to answer on the spot. And as the designer who is responsible for producing a high-converting design, you should be ready to answer questions about data in nearly every new client design reveal you give, because let’s face it, they’re bound to happen. The best thing to do as a designer for yourself, and your team, is to do the best you can to prep for those questions by digging into some of the data behind your designs to make better informed choices that result in higher converting designs.

Step 01. Establish what your design team currently knows about their clients’ data

Before you can start teaching your design team about a full list of tips, tools, and analytics sources that help them integrate data into their design workflows, first start with a survey to see where the team’s experience lies. Get the team in a comfortable, open, and honest environment where they can freely talk about their experiences with data-driven design. Set up a team debrief session and ask your team of designers questions like:

  • When you kick off a new homepage design, do you use any data before starting? If so, what data?
    • Tip 01: This question provides you good insight as to which designers are already using data into their daily design flows, and which aren’t.
  • What does the term “data-driven design” mean to you?
    • Tip 02: This question helps establish if your design team members even know what the term is.
  • Why is data-driven design important?
    • Tip 03: This question helps establish if your design team understands the many facets in which data can affect their design: from an internal team views, client views, and from a user’s perspective.
  • Where does the data for our clients currently live?
    • Tip 04: For the designers that say they use data, this helps hunker down to exactly what type of data they’re using, if at all.
  • What tools do we have to look at our clients’ data?
    • Tip 05: Your designers may know of some tools used by your team, but not all. Use this an opportunity to make of list of lesser known resources they have available at-hand that they may not have known about, and teach them how to use them to their advantage.
  • Which tools have you heard of before, but haven’t tried?
    • Tip 06: This is a great moment to use these unused tools as an opportunity to teach the team about new sources of data for their designs.

Step 02. Help Your Design Team Find Where the Data Gold Mine Lives

Whether you’re working on a design for a new client or an existing client, or whether you do or don’t have access to analytics, you always have access to some kind of data before starting a design. Many designers know or have heard of Google Analytics. Google Analytics is a tool that reports top data stats related to a website, such as top page views, user conversion rates, and bounce rates. I love Google Analytics, and use it as one of my top resources to get user data. However, a common misconception I’ve heard discussed by designers is that without access to Google Analytics, you don’t have access to any data for your design, and therefore don’t need to worry about data-driven design. I’m here to tell you that fallacy is simply not true. Once you’ve had a good survey of where your designers are data-wise, it’s time to help your design team find where they can get access to a wide-range of data to influence their design choices. Here are some tools that can help your design team obtain data to influence their design choices for optimal performance:

01. Data-Driven Design Tool: Google Analytics

What is Google Analytics?

Google Analytics is a deep and detailed view of all the data occurring on an existing client’s website, or even for a new client (if access is given early enough).

What data is available to review?

  • Page data (number of page views, pages per session, time on page, bounce rate)
  • User demographics (age, gender, location)
  • Device usages (desktop vs mobile, mac vs pc, etc.)
  • Social platform usages (Facebook vs Instagram vs LinkedIn, and referral percentages)
  • Channel sources for the month (organic, direct, social, etc.)
  • Behavior Flow (which pages users visit in what order, and where users drop off, etc)

How do I access and use the data?

To access the data from Google Analytics, go to analytics.google.com. You’ll have to add a tracking script to your website to allow Google Analytics to start tracking data, but once you do, the data will start flowing in. Use the data to try to increase conversions and make users’ journeys easier and more relatable. If a high percentage of you site user’s demographics comes from a single age group, use more photographic assets that show that age group throughout the site to make them feel like the site was built for them. If a single social platform is one of the biggest channel sources for your site’s visitors, consider focusing on designing ads for that platform more often, or even including on-site social share links for that platform in key areas like blog posts, conversion-specific inline links, and products. There is so much data at your hands, and so much you can do with the data that can be interpreted as data-driven decisions in your designs.

A screenshot example of a view of Google Analytics data

 

02. Data-Driven Design Tool: Google Data Studio

Google Data Studio houses a top-level visual overview of what’s going on with an existing client’s website in what is referred to as a data dashboard. The dashboard data displayed in Google Data Studio gets fed directly from Google Analytics, but in a more visual manner. You can create custom monthly review reports for clients with specific design stats such as bounce rates, page views, and conversions in the form of visual bar graphs, pie charts, and line charts to be able to review a high-level status of how your designs are performing in the wild.

What data is available to review?

There are many different options and data sets that you can pull in to a Data Studio dashboard, and tons of great predefined templates to choose from. These data dashboards can also be customized per client, based on the data designers and clients need to see, so the data visible in the dashboard may vary from client to client, or even based on the template used. But some popular data points are:

  • Most popular pages for the month
  • Average session duration for the month
  • Channel sources for the month (organic, direct, social, etc.)

How do I access and use the data?

You can create your own data dashboard at datastudio.google.com, and get a quick start template going to start viewing dashboards in minutes. I highly suggest creating custom dashboards for your design team based in each client’s special needs for a quick and easy data reference point that’s ready to use every month.

A screenshot example of a view of a Google Data Studio dashboard template

03. Data-Driven Design Tool: Google Optimize

Google Optimize is a tool used to create A/B tests. An A/B test is essentially a single-change variation test to be able to quantitatively measure what design options makes users convert more. The way it works is you set up a hypothesis, such as “I think users will click on the ‘Contact Us’ button more if the background color was blue instead of the default green button style.” Based on this hypothesis, you create a “A-version” of the button. You leave the button as the default green button style, and set 50% of your site users to experience the site with the button looking green. You then create an “B-version” of the button, where you modify the background color to be blue, and let the other 50% of your users experience the website with that blue as the background color for the button. Once there are enough users to prove or disprove your hypothesis, you’ll have an answer as to what color converts more users and rendered more users clicks. Isn’t that awesome?

What data is available to review?

You can create an A/B test for different hypothesis in Google Optimize, such as:

  • What CTA color encourages users to click on the contact button more?
  • Does changing a sections’ layout (4 small blog cards in one row vs 2 large featured blog cards in 2 rows) make a user interact more with the card?
  • Does reordering a page sections make more users click on a particular section when it is higher up on the page?

How do I access and use the data?

You can create your own A/B tests by going to optimize.google.com. Once you get the results from your A/B tests, use that data to influence your design choices to make better converting sites.

04. Data-Driven Design Tool: HotJar

HotJar is a tool used to record heat map data. Using colors as a reference guide, you can see which areas of your designed webpages are clicked on the most by users. Warmer colors like reds and oranges indicate areas with the most user interactions. Neutral colors like yellows and light greens are some-what used by users. Cooler colors like greens, blues, and purples indicate regions that are rarely used by users. The absence of color means there were no interactions in that region or feature on your page. You can also see a scroll map of how far down the page your users actually scroll, and where most of your users drop off and stop consuming your content and switch to another page. Not only can you view data on your existing designs, but you can see a client’s old website data, and see how their site users are currently using the site and their behavior patterns. It’s a great data tool to use for new clients that haven’t given you access to any Google Analytics data.

What data is available to review?

Here are some great design questions that you can answer by looking at the data provided by HotJar:

  • How many users scroll down past the top 50% of the page?
  • What links are the most/least clicked on in the page?
  • What areas are the most/least clicked on in the page?
  • Are there non-interactive items that users are clicking on? Should they be redesigned to better set user expectations?

How do I access and use the data?

You can go to hotjar.com to set up a project that tracks heat map data for your desired webpages. Use that data to decide if a page you designed has too many sections, if important, content-rich regions need to be moved up higher on a page, or if users aren’t interacting with a desired region, if you need to try another design avenue to display that content to solve the user need in a better manner. If you are redesigning a client’s website, set up HotJar to see how the existing site is working to get input on how users are currently using the site, and provide areas of improvement in your design reveal, feedback of how you’re going to improve the user’s journey, and include the data you found in HotJar to back it up.

An example of a view of a HotJar heat map displaying high areas of user interaction

05. Data-Driven Design Tool: SEMRush

SEMRush is a tool used to check the overall site health, keyword ranking and competitor data and analysis. It’s also another great data tool to use for new clients that haven’t given you access to any Google Analytics data just yet.

What data is available to review?

  • Top keyword rankings
  • List of competitors (and their ranking data)
  • Site Health Analysis and Site Errors

How do I access and use the data?

Go to semrush.com and create a project for your client’s site. Use the top keyword rankings tool for new clients during initial home page design to figure out what data users search for the most, and use that data to build regions on the homepage around the top-searched keywords. You can also use the competitor analysis tool to do competitive research on other competitors’ sites, page layouts and possible features / integrations before jumping into a design to understand what type of features that industry’s users are accustomed to seeing on websites. Make note of the errors reported by the site health feature that exist on the current site. Use that to your advantage in design reveals to explain to clients what is not working, and how you’ll fix those issues in your new design.

An example of a view of data from a simple url search of a live website reported by SEMRush.

Step 03. Establish Hypothesis Templates

The key to using data-driven design isn’t just looking at numbers and data and calling it a day. The real key to data-driven design is learning how to those interpret numbers, stats, percentages, and heat maps as actionable design changes or modifications that can better the user experience and increase site conversions. And for designers doing that data analysis for the first time, it may be difficult. It’s going to take some practice. They may not know how to interpret all the numbers and stats they found in the myriad of tools provided to them just yet. And that’s okay. Your job as a design leader and champion for data-driven design is not only to assist your designers in their quest for data, but to also teach them how to use and hone the data to their advantage to build better designs. A great way to teach that is by using a hypothesis template. A hypothesis template can help your design team bridge that gap between being a novice design team simply looking at data, and a more experienced design team actively using the data to make changes in their designs.

Hypothesis Template:

  • From looking at [insert tool name], I can see that [insert data statistic here]. This means that I should [insert analytic suggestion here] by [insert design change or modification here].

Hypothesis Example 1:

  • From looking at Google Analytic’s page views, I can see that only 10 users viewed my website’s shop page. This means that I should increase the number of users getting to the shop page to increase conversions and sales by adding a featured products region on the home page with a button linking to the shop page.

Hypothesis Example 2:

  • From looking at Hot Jar’s heat map tool, I can see that only 10% of users click on my important “Book Now” button in the footer. This means that I should try to increase the number of the “Book Now” button’s clicks by putting it higher up on the page (where more users scroll to and see it), possibly add it to the top primary menu, try a different design style to make it stand out more than the default small footer link style, or by changing the copy to be more descriptive and enticing, like ‘Book a Free Event’.

Step 04. Teach the Tricks of the Trade

While your design team gets used to creating their own hypotheses and learning how to analyze their data, you can start them off by suggesting a few hypotheses to try, that have been proven to show a huge increase in conversions, based on my experience. There’s quite a few tips and tricks I’ve encountered throughout my years designing that your design team can use as starting points for creating hypotheses and for creating data-driven design choices to test, and see how they work for your clientele.

Here’s some data-driven design tips you can start implementing into your team’s design workflows pretty easily, starting today:

  • For new home pages, design the sections based on the top viewed pages or searched keywords by users. It is a quick way to get users to where they want to go and design a well-performing homepage.
  • When creating social or retargeting ad designs for e-commerce websites, check the top-most viewed products in Google Analytics and use those products’ photos as the featured images in your ad designs for better campaign performance and higher conversions.
  • If a website has two branding colors, run an A/B test for both colors as the main primary menu’s call-to-action button color to see which color performs better. Use the winning color as the main button color throughout the site, where applicable and see how much higher your conversion rates are.
  • When checking heat map data for a website, if you see an inlined paragraph link or a footer link being clicked on considerably more than others, consider including that link it higher up on the page, or even in the home page banner call-to-action button. See how many more clicks the button gets.
  • When checking heat map data for a website, if most users don’t scroll past the top 30% of the page you designed, consider making the page shorter by reducing sections that users interact with less, or by reducing vertical padding between sections. See how many more users view the sections that used to be much lower on your page.
  • In Google Analytics, see if there is a low-impact page being viewed more than others, and possibly create a new featured region for it on the home page or include it in top-level primary menu. Check if that increases the page views for the page.
  • Check e-commerce sites post-launch to find the most-viewed product single page. Consider designing a featured region for that product on the product listing or homepage to boost sales and reduce clicks for the user. See if sales for that product dramatically increase.
  • If users are constantly using filters in a post archive or shop page, consider creating urls that allow users to navigate directly to a products page filtered by that category, and add those urls in a submenu under the main menu’s ‘Shop’ page. See if those pages are accessed more, and if more of those product category-types are being purchased.

Final Thoughts

Data-driven design is the key to designing better performing, more user-driven, and higher converting webpages, social graphics, and advertisements. No matter where you are in your design journey, know that you alway have access to data to better influence your design choices. Data-driven design isn’t a one-stop shop. It’s an iterative process filled with hypotheses, trials, and both failures and successes. The main point, however is to try. Try to test what works, what doesn’t, and use that data to inform your design choices. And as you try you start to learn more about your client’s users, their behavior patterns, and their preferences, , you’ll notice yourself to naturally start designing much better performing designs for your users, based on the factual data available at hand. And at the end of the day, that’s the most important lesson we should have learned at the end of this article – we use data-driven design principles because they help guide design decisions that build better experiences for our users.