Building interactive prototypes is becoming a standard in today’s UX practice. This allows to simulate and test the complete workflow in apps and applications. The biggest drawback though: most interactive prototypes are confined to being able to link between screens and enter data to test the affordance of forms. This talk is about why it is important to build rich functional prototypes that focus on content and how this can be achieved. It gives an overview of the benefits and obstacles of data driven prototyping.

1. Memi Beltrame
Data Driven Design
UX Camp Zürich
May 24. 2014

2. Memi Beltrame
I make things fun
and easy to use.

3. Users Love their Data.

6. Add complexity

8. Hence:
Data Driven Design

10. Focus on Behaviour

11. Content First will
change your workflow.

12. Asking the users the right
questions at an early
stage.

13. The point of DDD is to
simulate everything
users can do with data.

14. Things users can do
with data
• Read
• Enter new
• Edit & change existing
• Delete
• Search & Filter
• Combine

15. The point of DDD is to
simulate everything
users can do with data.
Simulation = Testing

16. Well, do you test?

18. Testing is the best way to
making needs visible.

19. DDD Scenarios
• A lot of different data.
• Similar data with small differences
that matter.
• A lot of domain specific data.

20. A lot of data

21. Similar Data &
Domain specific Data

23. 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:

24. Fake it till you make it.

25. Things to fake
• Realistic data
• Userroles (Authentication)
• State

26. A Data Layer
• Variables
(e.g. to change the language of the prototype)
• Session
Make it possible to have persistent data to test
the whole chain of event.
• Datasets
Simulate a lot of data, e.g. 200 news-entries.

27. Benchmarking

28. Benchmarking
Ganz Grischa!
Find Infos to Places in Grischun
!
Paper Prototype
2 Screens + Lightbox

29. Benchmarking
Prototype!
!
- Use different Tools
- Stop time
- See what works

30. Tools
• Balsamiq
• Prototyper
• Protostrap

31. Tools

32. Adobe Edge
Reflow
Balsamiq Axure Prototyper Protostrap
Templates ✖ ✔ ✔ ✔ ✔
Data ✖ ✖ ✖ ✔ ✔
Variables! ✖ ✖ (✔) ✔ ✔
Session ✖ ✖ ✔ ✔ ✔
Testability on
Device ✔ ✖ ✔ ✔ ✔
Responsive ✔ ✖ ✔ ✔ ✔
GUI ✔ ✔ ✔ ✔ ✖
Reuse ✔ ✖ ✖ ✖ ✔
Tool comparison

33. Prepare your designs
for real data, or else…

35. Thank you!
I’m @bratwurstkomet on Twitter
Protostrap: http://protostrap.ch