This document discusses paper prototyping as a low-fidelity prototyping technique for early stage design projects. Paper prototyping allows designers to quickly communicate and test ideas through disposable prototypes before committing to higher fidelity designs. It should be used during brainstorming, to address misunderstandings, and before usability testing and design decisions. Examples of paper prototyping techniques include wireframes, cutouts, post-its, and hand-drawn visualizations to illustrate user flows and interactions. The goal of paper prototyping is to evaluate assumptions early by testing prototypes directly with users.

1. IxDworks
From Ideas to Paper Prototypes:
Hands-on Approaches for Early Stage Projects
Valeria Gasik, Darja Tokranova

2. Paper Prototypes

3. Quick recap

4. Need?
Goals?
Behavior?

5. Reality
check
Urgent Uncritical
Serious Trivial
Efficient Engaging...

6. To feel better
“Do” -goal
To find a doctor
To avoid a smoke
Too have a laugh
“Be” -goal
User task
Explore
interesting
pictures that
elevate one’s
mood.

7. Persona
A user-centered design approach –
Imaginative user archetype, which
represents a group of people with
similar behavior patterns and goals.

8. Scenario
A user-centered design approach –
A quick way to illustrate user’s goals,
actions, motivations and overall
interaction with the product though
imaginative (research based) stories.

9. What will your
product do?

10. Research
Personas
Scenarios
Use Cases
Requirements
Design
Concept
Rapid prototypes
Wireframes
Interactive demos
Evaluation
Testing
Task analysis
Feedback
Heuristics

11. Low-fidelity
prototyping

12. Throwaway prototypes,
which translate key user
stories and use cases into
visual specifications.

13. Throwaway prototypes
Sketched Styled
Static Interactive
Placeholders Content
Compliment Committing

14. Purpose
• Cheap and quick way to communicate ideas
• Lowers barrier for suggesting and making design
changes
• Disposable
• Can be tested with users

15. When to use?
• During brainstorming and discussion
• To clear out misunderstandings
• As state transitions
• Before making significant design efforts
• Before hi-fi interactive prototyping and testing
• Prior making decisions based on usability tests...

16. What to prototype?
• Key behavior
• Complex interaction
• Basic interactions, if they are intended to be
improved from the current best practices
• Demonstrable system, e.g. connecting wireframes
Obvious

17. Few examples...

18. A draft

19. A wireframe
“a popup”

20. A “touch device”

21. Stencils
Frames
http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html
http://wireframes.linowski.ca/2009/11/paper-prototype-cutouts/
Buttons
Post-its!

22. “As a first time
user I want to make
a visual note”
A use case visualization

23. A use case visualization

24. http://buscityroute.wordpress.com/
An “interactive” map

25. “Augmented reality”

26. Redesign with color
coding

27. Concept visualization

28. Few Nexeaxmt.p..les...

29. How will the new solution operate?
Visualize the process of solving
your persona’s main goal with a
quick paper prototype.

30. Why?
We can evaluate main assumptions by
testing this prototype right away

31. Reference
• Cooper, A., Reinmann, R., Cronin, D. (2007). About Face 3: The Essentials of
Interaction Design. England: Wiley
• Goodwin, Kim. 2001. “Perfecting Your Personas.” Cooper Newsletter, July/
August.
• Snyder, Carolin. 2003. “Paper Prototyping: The Fast and Easy Way to Design
and Refine User Interfaces”
• Robinson, Joe: “Hack design” https://hackdesign.org/lessons/10
• Cerejo, Lyndon: “Designing better, faster” http://
www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
• Photos – IxDworks.com, unless otherwise mentioned