Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
IxDworks 
From Ideas to Paper Prototypes: 
Hands-on Approaches for Early Stage Projects 
Valeria Gasik, Darja Tokranova
Paper Prototypes
Quick recap
Need? 
Goals? 
Behavior?
Reality 
check 
Urgent Uncritical 
Serious Trivial 
Efficient Engaging...
To feel better 
“Do” -goal 
To find a doctor 
To avoid a smoke 
Too have a laugh 
“Be” -goal 
User task 
Explore 
interest...
Persona 
A user-centered design approach – 
Imaginative user archetype, which 
represents a group of people with 
similar ...
Scenario 
A user-centered design approach – 
A quick way to illustrate user’s goals, 
actions, motivations and overall 
in...
What will your 
product do?
Research 
Personas 
Scenarios 
Use Cases 
Requirements 
Design 
Concept 
Rapid prototypes 
Wireframes 
Interactive demos 
...
Low-fidelity 
prototyping
Throwaway prototypes, 
which translate key user 
stories and use cases into 
visual specifications.
Throwaway prototypes 
Sketched Styled 
Static Interactive 
Placeholders Content 
Compliment Committing
Purpose 
• Cheap and quick way to communicate ideas 
• Lowers barrier for suggesting and making design 
changes 
• Disposa...
When to use? 
• During brainstorming and discussion 
• To clear out misunderstandings 
• As state transitions 
• Before ma...
What to prototype? 
• Key behavior 
• Complex interaction 
• Basic interactions, if they are intended to be 
improved from...
Few examples...
A draft
A wireframe 
“a popup”
A “touch device”
Stencils 
Frames 
http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html 
http://wire...
“As a first time 
user I want to make 
a visual note” 
A use case visualization
A use case visualization
http://buscityroute.wordpress.com/ 
An “interactive” map
“Augmented reality”
Redesign with color 
coding
Concept visualization
Few Nexeaxmt.p..les...
How will the new solution operate? 
Visualize the process of solving 
your persona’s main goal with a 
quick paper prototy...
Why? 
We can evaluate main assumptions by 
testing this prototype right away
Reference 
• Cooper, A., Reinmann, R., Cronin, D. (2007). About Face 3: The Essentials of 
Interaction Design. England: Wi...
Upcoming SlideShare
Loading in …5
×

IxDworks mini-workshop: Paper Prototyping

  • Be the first to comment

  • Be the first to like this

IxDworks mini-workshop: Paper Prototyping

  1. 1. IxDworks From Ideas to Paper Prototypes: Hands-on Approaches for Early Stage Projects Valeria Gasik, Darja Tokranova
  2. 2. Paper Prototypes
  3. 3. Quick recap
  4. 4. Need? Goals? Behavior?
  5. 5. Reality check Urgent Uncritical Serious Trivial Efficient Engaging...
  6. 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. 7. Persona A user-centered design approach – Imaginative user archetype, which represents a group of people with similar behavior patterns and goals.
  8. 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. 9. What will your product do?
  10. 10. Research Personas Scenarios Use Cases Requirements Design Concept Rapid prototypes Wireframes Interactive demos Evaluation Testing Task analysis Feedback Heuristics
  11. 11. Low-fidelity prototyping
  12. 12. Throwaway prototypes, which translate key user stories and use cases into visual specifications.
  13. 13. Throwaway prototypes Sketched Styled Static Interactive Placeholders Content Compliment Committing
  14. 14. Purpose • Cheap and quick way to communicate ideas • Lowers barrier for suggesting and making design changes • Disposable • Can be tested with users
  15. 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. 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. 17. Few examples...
  18. 18. A draft
  19. 19. A wireframe “a popup”
  20. 20. A “touch device”
  21. 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. 22. “As a first time user I want to make a visual note” A use case visualization
  23. 23. A use case visualization
  24. 24. http://buscityroute.wordpress.com/ An “interactive” map
  25. 25. “Augmented reality”
  26. 26. Redesign with color coding
  27. 27. Concept visualization
  28. 28. Few Nexeaxmt.p..les...
  29. 29. How will the new solution operate? Visualize the process of solving your persona’s main goal with a quick paper prototype.
  30. 30. Why? We can evaluate main assumptions by testing this prototype right away
  31. 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

×