Data-driven design


Have you ever wondered how to use data effectively? In this article, we’ll learn about data-driven design best practices and suggest a few tools to help you get started.

What is data-driven design?

Data-driven design is about using information gleaned from both quantitative and qualitative sources to inform how you make decisions for a set of users.

Some common tools used to collect data include user surveys, A/B testing, site usage and analytics, consumer research, support logs, and discovery calls. By crafting your products in a way that cater to your users’ goals, preferences, and behaviors, it makes your products far more engaging—and successful.

Taking an informed, well-rounded approach

In your data toolkit, you have both quantitative and qualitative data. Quantitative data is about facts, measurements, and numbers. Qualitative data is about understanding your users’ behavior from their perspective, and is often reported in their own words.

It’s important to understand that data-driven design is not just about collecting numbers. It’s about understanding the motivations behind the numbers. Let’s say your website conversion rate dips below normal. You might think it’s related to a new design or recent advertising campaign. However, if you dig deeper, you’d find that a smaller subset of users are having an issue because of a recent operating system upgrade. The qualitative data shows that they’re confused and frustrated with the new process; the quantitative data shows they’re getting tripped up on a specific button. Being data-driven enables you to find the why behind your users’ behavior so that you can improve your product accordingly.

Why is data-driven design important?

Even the best designers in the world can’t predict exactly what users want; we are rarely (if ever) the target audience. Learning what makes your users tick and ensuring your product solves their needs is paramount to your product’s success. Gathering and utilizing data allows us to make informed decisions about the design process as whole. When you understand your users’ needs, wants, and desires, you move beyond your assumptions and understand how to create a product that resonates.

Moving beyond design best practices

A good way to put data-driven design into action is through iterative design. Every time you reach a well-designed conclusion, you put it in front of clients, users, or potential users and collect their feedback. You refine the design accordingly, and keep filtering it with additional rounds of feedback until you reach a solid, data-driven solution.

This approach is most helpful when you implement it early. By incorporating what your users want as you move forward with your project, you ensure it’s completely customized. This often helps avoid costly mistakes down the line. The collaborative nature of tools like InVision Freehand empower teams to create low-fidelity prototypes early in the product design process and iterate rapidly as the project evolves.

How to apply data-driven design to your day-to-day

Though the variety and possibility of data are vast, you can always start small. Immerse yourself in your current data or analytics, pore over client feedback, or start iteratively in your design process. If you don’t have any data yet, get some simple metrics in place, such as click events for primary actions, time-on-page numbers, conversion rates, page views, and scroll depths. Then you can create a few hypotheses to understand what they mean. For example:

  • Your conversion flow is revealing that a lot of users leave the page before they fill out the form.

    Is the form too long? Is the page loading too slowly? Does the form even work? Is a specific device rendering incorrectly? Do users understand what to do?

  • It takes just a few clicks to get to the primary action on the page, yet no one’s getting there.

    Are users frustrated? Is the action buried on the page? Is it named incorrectly? Does the button even work?

  • A three-step modal has a high percentage of drop-offs on the second step.

    Is the content too long? Do users know the second and third step exist? Did the second step answer a question that led them down another path?

Now that you have a few areas to refine, you can utilize A/B tests to incrementally improve the functionality. Try designing variants to improve your ideas; cut content that doesn’t need to be there; make sure your copy is clear and concise. Test and learn.

If you’re working with other designers, product managers, or engineers, you might have to sell them on the value of testing. Show them how you can use data to improve your users’ experience (then show them the results to really hit it home). Pitch your ideas as a way to learn through “experiments”; they’re not scary, and they’re certainly not something that should be met with much resistance. After all, you’re trying to improve your product. Everyone can get on board with that.

Tools that help with data-driven design

There is a large variety of tools to choose from in the world of data collection. Below are some of the more commonly-used ones, but it all depends on your circumstances and budget. Some tools are completely customizable, while others are rigid and ready right out of the box. Make sure you start small and don’t make your data too difficult to digest. You can always layer on more data points if you need further information.

User Testing

User testing, screen recording

With User Testing, you can recruit a user base to test your designs and capture critical insights in just two hours. Quickly and easily create and launch studies with your participants on any device and in multiple languages.

Hotjar

User testing, screen recording, heat maps

With heat mapping, scroll depth, conversion funnel-tracking, user-recruiting, and more, Hotjar offers a fast, visual way to learn about your current and potential users.

Crazy Egg

Screen recording, A/B testing, heat maps

Crazy Egg provides a host of interesting information about your users. You can improve what’s working, learn what’s not, and test new ideas. Full recordings and heat maps show exactly which parts of your page are being used.

Google Optimize

User testing, reporting

Optimize is natively integrated with Google Analytics, so you can quickly understand how to improve your website. Identify where to make changes; measure experiments against business goals; and see exactly how your changes influence customer behavior. Easily run tests (A/B, multivariate, redirect) to learn what works best for your visitors.

InVision

User testing and feedback

With InVision, it’s easy to create wireframes and clickable prototypes. Their comprehensive suite of design tools and educational resources encourages teams to collaborate at every stage of the product design process, from ideation to development.

Optimizely

User testing, A/B testing, recommendations, personalization

Empowering teams to test, learn, and deploy successful digital experiences, Optimizely encourages both experimentation and personalization. Ideas, tests, and results are easily prioritized and shared across teams.

Save time and money right from the start

Through testing, iteration, and a consistent feedback loop, you’re constantly uncovering more insights to inform a more valuable product with data-driven design. By putting your product in the hands of users early, you can prevent costly late-in-the game design changes. But what’s the most efficient way to go about this important step?

With InVision, your team can share prototypes with stakeholders in and outside of your organization, and quickly gather meaningful feedback. From early, low-fidelity Freehands to high-fidelity Studio screens, user feedback empowers your team to fine tune, fix, and ship a successful data-driven product.


Join the millions of people using InVision to make the products you love most

Get StartedGet Started—Free Forever