If you’re a marketer conducting research in advance of an upcoming website build, you may have heard the terms data-driven design, data-informed design, UX design, and user-centered design batted around.
For the uninitiated, this can be a bit confusing.
TABLE OF CONTENTS
In brief:
Where data driven website design focuses on gathering objective data from analytics, testing, and surveys, data-informed design focuses on gathering more subjective feedback on user experience.
Data-aware design maintains that data is one of several sources of useful information.
Its approaches all follow the philosophy of user-centered design.
UX design is a set of strategies that puts the user-centered design philosophy into practice.
Just as inbound marketing strives to be helpful to the customer to earn and maintain their business, all of these terms that end with “design” try to maximize user experience to keep visitors on your site, and encourage them to convert into leads.
As a result, understanding how users interact with your site and tailoring it to meet their needs can have very real effects on lead generation. Research shows that "every $1 invested in UX results in a return of $100 (ROI = 9,900%)" (UXCam)
In this post, we’ll discuss design informed by data to some degree (driven, informed, or aware): how it works, best practices to implement on your website, tools to gather data, and red flags in data that may uncover design issues.
Your website is a tool, and one of its primary uses is to generate leads for you.
Of course, employing data-driven design doesn’t mean that you should ignore your intuition and creativity as a designer.
Instead, it combines your artistic sense with hard data about how your audience thinks and behaves so that you can make more informed decisions that are both beautiful and functional.
Rather than guessing about what your audience wants or likes, your research can provide educated guesses and facts about how your site visitors actually interact with your website.
This can help you identify what you're doing right and help you do more of it. It can also help you discover near misses leaking opportunities and plug the hole.
Since data driven website design focuses on objective data, it requires research. Four common ways to gather data are using 1) analytics platforms, 2) A/B testing, 3) usability testing, and 4) surveys.
Source: Google Analytics
In order to make informed design decisions, you need to understand how to gather and interpret data from analytics platforms, tests, and surveys.
You can go about this a number of ways, such as by working with an analytics expert, reading articles, or taking an online course. Here are some resources you might find useful:
In order to better understand and empathize with potential customers using your site, you’ll want to put together buyer persona(s). This is a fictional representation of your ideal customer.
To create this character, talk to real customers who use your site and/or look at data about site users gathered from surveys, feedback, testing, and analytics.
Another great way to learn about your buyers is to talk to people in your sales or customer service departments who work with customers and prospects directly.
In your persona, include information such as:
HubSpot has a free template that helps you put together a buyer persona quickly.
Coming up with one or more buyer personas will help you select participants for usability studies so that you have a more accurate idea of how your real users will react to your website designs.
Source: Crazy Egg
In their book Designing with Data, King, Churchill and Tan lay out a process for setting up user experience experiments:
Aaron Gitlin sums up what makes a good hypothesis this way:
“A hypothesis should clearly state and include:
The segment of users to be evaluated [user group]
The change we are making [change]
What we believe the result will be [effect]
Why we think that result will take place [rationale]
And finally, the measurable result we expect to observe [measure]”
To come up with a good hypothesis, pull from whatever data you already have about your users and follow King et al’s template:
“For [user group(s)] if [change] then [effect] because [rationale], which will impact [measure].” (King et al)
For example, a hypothesis might be:
“For [our Buyer Bonnie persona], if [we use a single CTA on our landing page rather than three] then [more users will convert] because [it will represent a more clearly defined next step], which will impact [our landing page’s conversion rate].”
Next, run a test that suits your needs, controlling variables just as you would in a true scientific experiment.
For example, Let’s say you perform a split, A/B test that shows half of your users a version of the page with multiple CTAs, and the other half a version of the page with a single CTA.
During this experiment, you wouldn’t want to change anything else on your landing page, such as the color scheme, because you wouldn’t know which changes affected the experiment’s results, or how much.
Finally, analyze the results of the experiment and interpret what changes you need to make to your design.
For example, let’s say that you achieve a higher conversion rate on the landing page with a single CTA.
A logical next step might be to use the single-CTA version of the page on your website. How you use the data you gather will depend on the context and size of your experiment. For more details on running a UX experiment, check out this article.
For tips on collecting data scientifically using a survey, check out this article.
Make testing a habit, and you may be able to nip many UX issues in the bud, saving both time and money: “Fixing a problem in development costs 10 times as much as fixing it in design, and 100 times as much if you’re trying to fix the problem in a product that’s already been released” (UX Planet).
Of course, if you run regular tests, you will probably need to make regular changes to your website.
To make tweaking your website easier, use a flexible content management system (CMS) like HubSpot, Webflow, or WordPress.
Using a content management system on your website means that you can edit your website without getting a developer involved every time.
Say you ran an A/B test on one of your pages and found that the CTA copy “get in touch” got more clicks than the copy “contact us.”
With a flexible CMS, you could edit the copy “get in touch” much like you would a document, and publish your changes immediately with minimal fuss.
When conducting surveys, consider the experience of your participants.
Source: Statista
It has become critical for B2Bs to have mobile websites that are as great as their desktop versions.
In 2020, mobile devices make up a little over half of web traffic in the world, and in 2018, “50% of B2B queries were made on smartphones” (Smart Insights).
Google now analyzes the mobile versions of most websites first, which means that it grades your website (which effects how high you rank in search results) based on how good your mobile site is.
As a result, many businesses employ mobile-first design. This means that you design your site with how it will appear on mobile in mind, and then adapt that design for desktop.
Doing this helps ensure that your mobile site is as user-friendly as possible, and that you’re showing Google the best version of your site.
There are many tools for gathering UX data, including various analytics, A/B split testing, usability testing, and survey tools. So how do you use them to improve your B2B’s website design?
Analytics tools: These tools are great for gathering loads of data in real time as users interact with your site.
Monitoring analytics data for red flags via tools like Google analytics make it easier to spot issues such as slow loading speed, broken calls to action, and 404 errors (unreachable pages) as they crop up, year-round.
A/B split testing tools: These tools are great for running experiments to test the effect of specific design choices on a web page.
For example, to know whether changing the color of the call to action on a landing page from blue to orange has any effect on conversions, you could create a split test with two versions of that web page: one with a blue CTA, and one with an orange CTA.
Next, you could show half your site visitors the blue version, and half the orange version within a set time period.
After concluding the experiment, you could then see if the orange button prompted more, less, or an equal amount of conversions than the blue button, and by how much.
This can be helpful when you’re choosing which version of a design to implement, especially in situations where a poor design choice could cost your company money.
Usability testing tools: Usability testing allows you to test how well users are able to navigate your website and perform tasks (such as searching for information) on a finished website or prototype.
Usability tests can be conducted in person or remotely using third-party software.
You can also set up tasks for users to perform without a moderator (and view a recording of the session later), or you can watch users interact with a site in real time (a moderated test.)
Usability testing is great for identifying weaknesses in an existing design.
Survey tools: Survey tools give you the opportunity to gather UX feedback directly from your site users after they have used your site.
They are excellent for gathering qualitative feedback like preferences (e.g. “do you enjoy our mobile deposit feature on our mobile app?”) and quantitative feedback, like answers to yes/no questions.
Here are some popular analytics, A/B testing, user testing, usability testing, conversion optimization, and survey tools to help you fine tune your site.
Usability tests allow you to learn where and how users struggle in real-time. Surveys give users the opportunity to tell you directly. But analytics data offers an indirect, quantitative window into your user’s struggles.
Certain analytics measures often point to specific UX issues. Here are some common red flags in your analytics and possible culprits.
If you see this issue, ask:
It could also be: making efficient use of caching, lots of HTTP requests, not compressing files, not using CDN, or a poor quality host (for example, your site has to share resources with another site or customer service is bad).
All of these issues require a certain amount of expertise to fix.
To diagnose exact issues, you can run your web pages through Google’s PageSpeed Insights for free.
For more page speed best practices, check out this Moz article.
High bounce rates can be normal depending on their context, but are usually a cause for concern. Bounces occur when a user views only a single page of your website before leaving.
For example, let’s say a user fills out a form on a landing page, but they are not taken to a thank you page after they submit. Visits to this page, even ones that result in conversions, will be recorded as bounces even though nothing is wrong.
However, for most pages on your site, especially those that are designed to lead visitors deeper into your site, like your homepage, a high bounce rate is a red flag.
SEJ defines a higher-than-average bounce rate for an entire website as somewhere between 56–70%. Average bounce rates also vary by industry, and website type.
If you find that you have a high bounce rate on pages that should be leading potential customers deeper into your site, check for these common issues:
Landing pages are designed to make potential customers take a next action (conversion) such as signing up to receive emails, submitting a form, or making a purchase.
This is prompted by a call to action (CTA) like “subscribe to our email list,” “get it touch,” or “start your free trial.”
To ensure your landing pages are doing their job, it’s a good idea to set up “goals” in Google Analytics to measure the conversion rate on your landing pages.
A conversion rate is the percentage of people who land on a given page and take a desired next action, or “convert.”
A desired next action (or "conversion") in this case might be a form submission, resource download, or even a click-through to a lower-funnel page on your website.
Here’s a Google help page that walks you through the conversion tracking process.
Look at the conversion rates for each landing page. Are there any that have a much lower conversion rate than the others?
If your landing pages have an unusually low conversion rate, take a closer look at their calls to action. When looking at your designs, ask:
Design CTA buttons that are large enough to stand out without taking up a large portion of the page:
If you use heat mapping software, you can see where visitors stop reading a page by the abrupt color change. In the screenshot above, the change from the hot color (red) to a cooler color, (yellow) is the drop-off point where many people stopped reading.
While some pages are designed to prompt visitors to convert quickly, others are designed to engage them for as long as possible.
It’s normal for readers on the web to read the top of a web page closely and skim more and more as they scroll toward the bottom, but usually you don’t want visitors to abandon your page near the top unless they’re taking a next action.
So if you see readers jumping ship early, you may want to ask:
If you use heat mapping software like Hotjar or Crazy Egg, you can see the highest concentrations of clicks on a web page.
Source: Crazy Egg
If you see a high concentration of clicks on an element of your webpage that is not clickable, this can indicate that people expect it to be clickable. In this case, you may want to adjust your design to accommodate users’ expectations.
“Rage clicks” or repeated clicks on a webpage that indicate frustration, are helpful in identifying UX issues like broken links, confusing site elements, website bugs, and slow pages.
These can be observed in real time during a usability test or from session recordings. Some platforms, like Hotjar and Fullstory, allow you to filter for “rage click” events and watch only the sessions where users rage clicked.
Watching these sessions can help you figure out what is frustrating users.
For example, if many users rage click on the same site element multiple times, such as a CTA, this might signal a broken link or slow loading speed.
By gathering analytics and user experience data, you’ll be able to complement your design instinct with hard facts about user behavior and preferences. This can result in saved time, a better experience for your users, and more conversions on your website.