IxDworks.com, paper prototyping

1. Paper Prototyping
A cheap and quick lo-fi design approach
IxDworks.com 2014

2. Recap

3. Goals
http://static.ddmcdn.com/gif/relieve-toothache-1.jpg
Experience
goals
e.g. feel better
Activities,
do-goals
e.g. listen to a
music piece
User tasks
e.g. explore
elevating
music tracks
User tasks
e.g. find
a 24/7 dentist
near by

4. Why should we care
about user goals?
http://static.ddmcdn.com/gif/relieve-toothache-1.jpg
• Main source for the IxD
(and hopefully the foundation
for the whole business)
• A ”reality check”
• Ground for making useful
and usable solutions

5. Persona
A design tool, an approach –
Imaginative user archetype, which
represents a group of people with
similar behavior patterns and goals.
Petter, lead gardener

6. Scenario
A design tool, an approach –
A quick way to illustrate user’s goals,
actions, motivations and overall
interaction with the product though
imaginative (research based) stories.
Petter works here.

7. User stories / Use cases
A design tool, an approach –
Detailed descriptions of steps or
actions of a process, which helps the
user to achieve a specific goal.
This is how Petter
orders soil at the moment.

8. Data
Primary
Persona Scenario Use Cases
A-1 A1-a, AI-b
Users
Goals
What will your product do?
Low fidelity prototyping
User Stories /

9. Low-fidelity
prototyping

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

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

12. When to use?e.g.
• During brainstorming and discussion
• To clear out misunderstandings
• State transitions
• Before making significant design efforts
• For rapid prototyping and testing
• Prior making changes based on usability tests

13. Few examples...
Be creative! :)

14. Simple drafts

15. Simple wireframe layout
A “pop-up”

16. Using notebook as
a frame with a grid

17. Use case visualization
“As a first time
user I want to make
a visual note”

18. “Interactive map”
http://buscityroute.wordpress.com/

19. Interaction storyboard as an animation (gif, PDF,
photo gallery, stop-motion movie..)

20. Stencils
Frames
Post-it notes
http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html
http://wireframes.linowski.ca/2009/11/paper-prototype-cutouts/

21. Today’s To Do
Create paper wireframes that
visualize the process of solving
your persona’s main goal(s). Use
scenarios and user stories/use
cases as a base.

22. Reference
• Cooper,A., Reinmann, R., Cronin, D. (2007).
About Face 3:The Essentials of Interaction
Design. England:Wiley
• Goodwin, Kim. 2001.“PerfectingYour
Personas.” Cooper Newsletter, July/August.