How to bring data into your design process

Design with data

We all know that it is always better to make our design decisions based on data. It is one of the most important approaches when designing digital products. To learn how the users use the product, what are their pain points, and what are the drop off points, to improve the product and the overall experience.

Why do we collect data?

There are several reasons why to base the design on data, mainly to be able to answer these questions:

1. Understanding usage: Which features are used less and which more? and by whom?
2. Friction points: Where are users getting stuck? Where do we have broken flows? What value is lost? What are the desired flows we want users to do?
3. Centralized feedback: What are end-users asking for? Sometimes it is clear when they ask “we need you to deliver this feature”, if so, what is the reason they are asking this feature and what is the need?
4. Being hypothesis-driven: What is the behavior we want to change?

How do we collect data?

Today we have several ways to collect data and insights about digital products, here are some:

• Usability tests
• Tracking events
• Net Promoter score and textual feedback from users
• Interviews with users or potential users
• Internal feedback from other stakeholders in the company
• Market research or insights from benchmarks of other similar products

There are of course more ways to collect qualitative and quantitative feedback. Imagine you have access to all of these data and insights, all of them lay down on the product designers’ desk, and now it is up to them to improve the design.

So, where to start?

Step 1

Start with segmentation, it could be based on features, problems, or users’ feelings. You may get the same results, so just peak the one you think is more relevant. I tend to start with a template that looks like this below. Per each column, there is a feature (e.g. search, add content, follow other users…). It could be also a pain point you are trying to address with the new design (e.g. absent of value, crowded content, unclear flow).
On the rows, split them by each user input. You could also add next to the “User 1” text an indication wherefrom the info you got, for example, “User 1 usability test”, “User 2 tracking event”.

Excel or any table format to gather data / First step

Step 2

After you have kind of segmentation, start to fill in content from all resources, it means to sum all the inputs to one doc.

Try to have max 3 states:

• Green and checkmark icon: This means the feature understood and it was easy to use
• Orange and checkmark icon: This means that the user could finish the task (e.g. add a new post), but it was not so intuitive in some parts of the flow
• Red and cross icon: It means that the interface was definitely unclear. Meaning the user could not finish the task and hesitated using the feature

This part requires you to be honest, especially if you are the designer who tests your designs. If you have quantitative data, just add it to one of the rows. If you have usability test results, watch the video as much as needed to see where the users hesitated, what they did, or said.
Write down some notes that important for you to remember for later. Here is an example of how it looks when you finish gathering all the data:

This is a real example from research I made (just removed the users’ name and the feature names from privacy reasons)

Step 3

Per each segment write one or two main issues that were repeated. For example in the table above, you could easily say “Feature 1” is clear for all users, and you may need to improve slightly features 2 and 4, and take a look at what was failed with feature 5 for one user.

Step 4

This is the time to back to the design and cross the current solution in the interface with the issue mentioned in the table you filled. Write down some other solutions that could fit each.

Make UI changes that reflect the data

For example, if “Feature 4” is adding a new post (think about FB or Twitter), the solution could be based on the input from the users, if the button was not clear, make the “Post” button pop and have a better button label. If it took a long time until users interacted with it, consider changing the hierarchy of the content on the page, maybe there are too many details and actions at the same level. This is the time to cross the input with the design and find solutions.

Step 5

Design a better version based on the solutions you got. Reiterate the user research. Make sure with a new test: Does the new solution clearer than the one before?

Measure the success: from my experience, 3 iterations increases the usability of new features from 60% to be more than 90%

Why using this method is good for every designer?

Get more value in less time, and understand: do we need to fix something to make it clear? do we need another solution for some parts of the product to make long term impact? What do I get as a user?

This method helps to be user-oriented throughout each stage of product development. Testing the designs before launching them could decrease the numbers of iterations after implementation, which we all know, are much more expensive.

Thank you for reading 🙌