How to use data to improve your design

4 min read
Sam Warren
  •  Sep 21, 2016
Link copied to clipboard

Used to going with your gut? What about following your heart? Do you love to flip a coin when you face a tough decision?

All of these methods may occasionally lead you in the right direction, but their effectiveness just can’t compare to the use of real, actual data.

Let’s dig in and take a look at some of the most impactful ways that we, as designers, can use data to improve our designs.

What counts as data?

We need the freedom to be more liberal with what we consider data.Twitter Logo It’s not just the numbers that matter to us—some of the “data” that we look at might make traditional data scientists cringe.

For example, I often like to run surveys asking new customers to list adjectives they’d use to describe their experience during the onboarding process. Traditional analysts hate these kinds of data as they aren’t easy to quantify. But to designers, it can be far from useless.

“Understanding the ‘why’ allows us to create more engaging experiences.”

Twitter Logo

After all, we often face unique challenges and therefore earn the right to put our own spin on the art and science of data analysis.

There are 2 major types of data we’ll consider going forward:

  1. Quantitative data
  2. Qualitative data

Quantitative data

Big data! Numbers! Charts and graphs!

Put simply, quantitative data is the numerical data regarding the “who,” “when,” “what,” and “where.”

Think Google Analytics. Think demographics.

This type of information is highly relevant to designers. After all, knowing your audience is a prerequisite to designing something that will solve at least one of their problems.

Qualitative data

Qualitative data is best defined as non-numerical information regarding the “how” and “why.”

Why did someone choose your product? How do they use it? How is your app perceived by your users?

Qualitative data may be harder to visualize, but it can still play a critical role in your design process. Just look at how Sentiment Viz shows the wide range of emotions expressed by Twitter users regarding any keyword you want to dig into.

Knowing how many people visit your site is great information. But imagine the value of knowing why they visit your site in the first place.

Or even better: how the experience made them feel. 

Understanding the “why” allows us to create more engaging experiences for our users and thus increase the overall value of our product or service.

“Don’t just peruse data—have a specific goal in mind.”

Twitter Logo

How to design with data

Now that we’ve established what data means to designers, let’s talk about how we can actually use data to accomplish goals and delight customers.

Start with a question

Data can seem overwhelming to the uninitiated. Who hasn’t gotten lost or sidetracked in Google Analytics? It can happen easily if you don’t go in there with a specific purpose. There’s just so much fascinating stuff to look at!

To focus your efforts, start your data analysis with a question.Twitter Logo What are you looking to find? Don’t just peruse data looking for any old insight—have a specific goal in mind.

A few questions I find myself frequently asking:

  • What impact has our new landing page had on our bounce rate?
  • How did changing the copy of a CTA affect our conversion rate?
  • What keywords do my users actually type into Google to land on my site?
  • Which of our landing pages converts the most traffic?

What you do with this data will vary depending on a number of factors. But taking the last question as an example, it’s easy to see how we could apply this to our design decisions.

We can better determine what our audience wants to see on our site, what images and messaging truly connect with them, and how we can emphasize our value on other landing pages.

Build mockups with real data

Designers often use “perfect” fake data in their mockups, such as:

  • A line of text that’s just the right length to display the layout the designer has in mind
  • A number that’s nice and rounded, when a live input might include decimals
  • Beautifully edited and Photoshopped images cropped to ideal proportions

The real world is imperfect, so design with real data.

Edge cases happen in the wild—we can’t forget that when we start building mockups.

When designers use real data in mockups, the work is constrained by the same realities that will inform the final design and engineering decisions.

“The real world is imperfect, so design with real data.”

Twitter Logo

For example, if you’re designing a newsfeed application, you might create a mockup with 3 rows of 2 news items above the fold. You want the news items to be complete snippets that don’t require a click-through.

In your mockup, each news item lines up just right and you get those 6 snippets above the fold. Spoiler alert: that only worked because you crafted filler snippets that fit the design layout you wanted. 

When you go to test it in the real world, you’ll find that your layout doesn’t look the same and that some news items will get bumped below the fold due to varying length.

As you can rightly extrapolate, this kind of conflict can arise with all kinds of variable fields in apps. Without using real customer data, you could often encounter some serious formatting errors that hurt the user experience.

This is why it’s so important to consider real data during the design process. Employing this methodology forces designers to empathize with end users in advance of building the actual product.

The last thing you want to do is build an app or a website to near completion without having ensured that when it’s let out into the wild, the design you labored over will actually be functional and in tact.

A/B testing

A/B testing is the most effective way to implement data analysis into your design practices.

Is your CTA converting visitors well? Would it do better if it were green instead of red? How about the layout of your landing page?

A/B testing is the easiest way to do this. It’s a simple process, and one that you should pretty consistently be using to run experiments.

At its most basic level, A/B testing is simply changing one element of a page or app, and leaving the rest the same. Then you split traffic between the 2 experiences, and measure some KPIs.

A/B testing should be an always-on part of your design process.Twitter Logo Finishing the first version of a design isn’t the last step. You should always be looking for ways to experiment with your designs! Remember, we want to let data—not hunches—guide our decisions. 

“A/B testing should be an always-on part of your design process.”

Twitter Logo

Semantic differential surveys

It’s hard to quantify things like “sentiments,” but we need to at least try if we’re going to craft truly memorable user experiences. Getting your users to fill out surveys can be challenging, but it’s worth it for the insights it can provide.

How you get them to fill it out may depend a bit on your specific audience and your relationship with them, but in general I’d recommend email be your main go-to.

Emailing survey asks is the most common method you’ll see used, and for good reason. Email engagement is generally much higher than other channels, and it’s an easy and cheap way to get the recipient’s attention.

If you’re having trouble getting feedback, consider throwing in an incentive if people take the time to fill it out. At the very least, express sincere thanks, and lead into the “ask” by explaining why it’s important for you and your team to hear from them.

Back to the task at hand, the goal of a semantic differential survey is simple: You present multiple options and ask for viewers to rate them on a sliding scale for various descriptive adjectives. These can be highly effective when done right.

If you were to run a standard survey and ask “Do you think your manager is a fair person?”, the participant will be primed to feel a specific way due to the adjective you used in your question.

On the other hand, you could try a more open-ended presentation of the question. Like this:

A great example from SurveyGizmo.

Looking at it this way, there are no implications or assumptions being conveyed. The goal here is to get at a person’s true sentiments about the subject matter.

You can take this a step further and remove the option for a neutral answer. It may frustrate some users, but it’ll force them to pick a side and get you even more in-depth answers.

The applications are nearly endless and you can definitely take this in whatever direction best suits your own situation and needs.

Maybe you want to get visitor’s opinions on the impression they get of your company from the main landing page. Maybe you want to hear how subscribers felt when they first accessed content that was formerly behind a paywall. Or maybe instead you’d like to know if users felt like they were guided through the process after clicking “purchase.” 

Did the design of your company’s sign-up flow keep them involved? Why do people drop out of your sales funnel? What was their sentiment of your company when they did?

These are all questions we can address through semantic differential surveys. Try them out, and you’ll be amazed by the feedback you get—and how much better you understand your users afterwards.

Giving it a go

Mentioned above were only a fraction of the ways we can use data to both improve and drive our design process. 

Take the time to look at the numbers before you start designing. Your users and visitors will thank you.

Collaborate in real time on a digital whiteboard