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.

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.

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.

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.

Data

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.