Memi Beltrame

Data Driven Design

UX Camp Zürich May 24. 2014

Memi Beltrame

I make things fun and easy to use.

Users Love their Data.

Add complexity

Hence: Data Driven Design

Focus on Behaviour

Content First will change your workflow.

Asking the users the right questions at an early

stage.

The point of DDD is to simulate everything

users can do with data.

Things users can do with data• Read

• Enter new

• Edit & change existing

• Delete

• Search & Filter

• Combine

The point of DDD is to simulate everything

users can do with data.

Simulation = Testing

Well, do you test?

Testing is the best way to making needs visible.

DDD Scenarios• A lot of different data.

• Similar data with small differences that matter.

• A lot of domain specific data.

A lot of data

Similar Data & Domain specific Data

Prototype Data:!(Fonds in an application !

for bankers)

VF - European Mid and Small Cap Equity B (Lux)!Aberdeen Global - Emerging Markets Equity A Acc!UBS (Lux) Medium Term Bond Fund - CHF P-acc!UBS (Lux) Medium Term Bond Fund - EUR P-acc!UBS (Lux) Medium Term Bond Fund - USD P-acc!

Real Data:

Fake it till you make it.

Things to fake• Realistic data

• Userroles (Authentication)

• State

A Data Layer• Variables

(e.g. to change the language of the prototype)

• SessionMake it possible to have persistent data to test the whole chain of event.

• DatasetsSimulate a lot of data, e.g. 200 news-entries.

Benchmarking

BenchmarkingGanz Grischa!Find Infos to Places in Grischun !Paper Prototype 2 Screens + Lightbox

BenchmarkingPrototype!!- Use different Tools - Stop time - See what works

Tools• Balsamiq

• Prototyper

• Protostrap

Tools

Adobe Edge Reflow Balsamiq Axure Prototyper Protostrap

Templates ✖ ✔ ✔ ✔ ✔

Data ✖ ✖ ✖ ✔ ✔

Variables! ✖ ✖ (✔) ✔ ✔

Session ✖ ✖ ✔ ✔ ✔Testability on

Device ✔ ✖ ✔ ✔ ✔

Responsive ✔ ✖ ✔ ✔ ✔

GUI ✔ ✔ ✔ ✔ ✖

Reuse ✔ ✖ ✖ ✖ ✔

Tool comparison

Prepare your designs for real data, or else…

Thank you!

I’m @bratwurstkomet on Twitter Protostrap: http://protostrap.ch