Photo by Jess Bailey on Unsplash (edited)

How to design for data

Designs that generate user insights.

As a designer, you are a pro at what you do so I’m sure your designs are on-par with the main UX principles: Useful, Usable, Findable, Credible, Desirable, Accessible and Valuable (source). Are you ready to add one more layer to that stack?

Designing for Data

Design is all about meeting user needs and certain design patterns can actually help us understand new things about the user— I call this designing for data.

Data is generated every time a user interacts with the UI, may it be through clicking, typing, scrolling, gestures or voice command. Whenever you want to learn something about your users just ask yourself: How can I make them tell me what they want using interactions?

Let's see some examples:

FAQ Page | Nintendo

What did they do?

Changed the layout of their FAQ page to use expandable sections.

How is this designed for data?

Nintendo can now track the number of times each section was expanded to learn which questions the users are interested in.

Example (fake data)

By designing for data, Nintendo can now generate a report like the one bellow and learn that:

1. Users are very interested in free trials.
2. Many questions are actually not “frequently asked” and should be removed from the FAQ page.
3. The questions are not ordered effectively (they should be ordered by importance to the user, i.e from most clicks to least clicks)

Average daily clicks per question (mock data)

Pricing Page | monday.com

What did they do?

Added a “Get Started” button to each pricing column (although they all lead to the exact same place as the main button at the top of the screen)

How is this designed for data?

Monday.com can now see which plan users are most interested in and whether this affects their conversion rate after the free trial.

Example (fake data)

By designing for data, Monday.com can now generate a report like the one bellow and learn that:

1. Almost nobody is interested in the Pro and Enterprise plans, perhaps the price is too expensive or the included features are not perceived as valuable by the users.
2. The conversion rate (percentage of people who start paying after the free trial ends) is much lower for users who were initially interested in the Standard and Pro plans, maybe they were not satisfied with the unique features available in those plans.

Conversion rate per plan (mock data)

Course Catalog | Codecademy

What did they do?

Added search functionality to their courses catalog.

How is this designed for data?

Codecademy can see which courses the users are most interested in learning, even if they are not included in the catalog.

Example (fake data)

By designing for data, Codecademy can now generate a report like the one bellow and learn that:

1. 28% of the users are requesting content that is not currently available and Codecademy can see exactly which missing content is most requested by their users.
2. Codecademy only teaches programming languages but users are also searching for other content, such as software tutorials and explanations about specific techniques, something Codecademy can consider adding.

Summing up

Certain design patters are better at generating user insights than others, it all comes down to making users interact with your UI in a way that reveals what they really want. Sometimes designing for data might not look as good or even contradict design best practices — in that case, it’s up to you to decide if the payoff is worth the cost.

Do you have any more examples? Let me know in the comments and I’ll credit you in the article!