Suspend your suspension of belief

Why data prototyping matters and how to do it

The problem

When I’m trying to invalidate work getting as close to real feedback can be the lynchpin between succeeding and failing at failing fast.

I often work with data-centric products, in these products the content delivered to the user in the experience defines the experience. Not having relevant data for the user kills the experience and a symptom of a broken experience is bad feedback.

For example

I’m often tasked with creating a simple workflow that lets a user input a keyword, get a set of results, choose one and see the detail behind that result.

Imagine for example I’m returning a list of training courses based on a search and I want the user to select one or more to review, compare and make a final decision on which is best.

Why this doesn’t work

This user is Sarah, she works in construction. She knows about construction, not politics or accounting. Fateh is next up, he’s a Doctor he knows about Healthcare, not accounting or politics. Problem is my prototype returns results for accounting and politics. Sarah and Fateh look at the prototypes puzzled. They begin to assume the role of another user and all of a sudden my user session is basically trash. Sure I can get some usability juice out of it but I can’t test the content and I can’t rely on the usability feedback because the user’s cognitive load is drained by interpreting the content.

Potential solutions

Build and maintain multiple prototypes

Only find personas that match the prototype

Prepare the user for the test beforehand

Build a data prototype

Use real data and you’ll get real feedback. You can trust it more you can get insight into the content and content is king.

How to do it?

Your options

There are a lot of UX/UI tools out there that ‘prototype’. The only one that gets us closer to our goal is Axure, and guess what…

Forget uxPin, InVisionApp, Sketch, Adobe XD, et al. None of them are data prototyping tools. They either stick UIs into a series of screens, design UIs or both. None of them pull in data dynamically.

So how are you to achieve a data prototype? Well, the short answer is to design it in the browser.

Designing in the browser

If you can design in the browser you’re halfway there. Know a bit of javascript and you’re good to roll with the examples.

If you can’t code

If you can’t code as a UX designer it’s not the be all and end all but you’ll need the resource to build a prototype. The kind of time needed for a seasoned front-end developer is minimal. They can whip these things up in their sleep, so if buy-in is a challenge ask for forgiveness after doing it.

What you’ll need

A server

Data prototypes tend to need live environments to work in, so get yourself a node.js environment or lamp stack set up on your machine.


You’ll need the data of course. Populate a spreadsheet with all your data, Microsoft Office, GoogleDocs, OpenOffice anywhere really. You’ll prep your data in here, get it as you want it and then we’ll export it to a format the prototype can render.

Data format tools

You’ll need a way of converting those spreadsheets into usable data for the prototype. Now depending on what code I’ve stolen off the internet different scripts pull in different types of data; XML, JSON, arrays etc.

Some spreadsheet software will get the data into these formats but usually, you’ll find yourself saving it to a CSV file and then using an online tool to convert it to your required format

Libraries and scripts

Now my process involves going through the internet and pillaging any scripts I can find that will do the thing I’m looking to achieve with my data:

  • Search a flat database
  • Render rows of data from a google sheet
  • Save inputs and use them later to change the user journey
  • Return a product page based on an ID

Where to get help

If you can copy and paste the code you’ll be amazed at how much you can achieve. My first stop is usually codepen, lots of sample work that you can see working. Then I’m digging into google for scripts people have published and lastly to the stackexchanges of the world where people are helping to solve each other’s problems.

TYIT Ltd provides a full stack UX consultancy that designs accessible digital services. We've helped complex organisations like BEIS and DfE achieve digital transformation by running Lean and Agile discovery processes.

Companies House Number


13 Bright Rd Dunmow Essex CM6 3GU
© Copyright TYIT LTD 2019