Designing with real data

There's a significant difference between using placeholder content in prototypes vs rendering an interface as a consequence of modelling real data.

At Normally, we try to design and prototype experiences using data as a material. The data and the modelling profoundly impact the experience we're trying to test in our prototypes.

It is critical that we use 'as close to live' data as possible in our process. Generic placeholder content just doesn't cut it.

Exciting things happen when we use live data - new connections reveal themselves, clever ideas form, and better decisions are made.

There are three types of data that we look for:

Category 1 - Real, active data

When a client asks us to design a new experience based on their data, the first thing we ask for is access to their APIs. We always try to use actual, live data throughout our design and development.

Category 2 - Real, inactive data

Sometimes it's difficult for a client to give us access if their security policies forbid external access, e.g. banking or health services.

The next best thing for us is data dumps of real data. These can land as entire database snapshots, a bucket of JSON files or even excel files with millions of rows. It's our job to perform practical ETL (extract, transform, load) to produce an internal API to help our team access the correct data when they need it.

Category 3 - Realistic, inactive data

Lastly, a client might only provide us with a few samples of their internal JSON responses. But there's still hope.

We've built an API called Toaster that helps us mimic realistic responses as close as possible. We send a sample JSON schema of how we'd like the response to look, and Toaster fills in the blanks and returns some realistic-looking data. It can even create lists with pagination.

Using this API in our prototypes means we can swap those endpoints later if our circumstances change, e.g. if the client loves the prototype and is prepared to populate it with live data.

There are many placeholder APIs, but this one is simple, free and requires no signup. It uses Cloudflare workers to be fast, energy-efficient and reliable. You can find the source on GitHub here.

If you use Toaster, please give us a shout on Twitter or Linkedin and feel free to ask questions or raise issues in our source repo.

In conclusion

There’s a significant opportunity in using real data in your prototypes as it reveals new connections and undiscovered edge cases. It also helps us make better decisions. Whether it is active or inactive, it is important to model the real data as close as possible.