1. Paper prototyping
for Agile Development
Agile Eastern Europe 2011

2. Who am I?
Max Gaponov
Certified Scrum Product Owner
Agile coach, CIO at Banki.ru
mgaponov@gmail.com

3. What are we going to talk about?

4. What is a Prototype?
Prototype is a
working model of
future system

5. What fields do use prototyping?
• Architecture
• Engineering
• Automobile industry
• Art
• Software

6. This talk was a prototype first ;)

7. What prototypes are made for?
• Know more about a product
• Get a feedback
• Get information about possible problems during
production
• Get an ability to change something before
production

8. Prototype is documentation
• Far more compact than text
• Does not take much time to understand
• Simplifies development
• Reduces development time

9. Prototype is communication
— So, it’s all clear?
— Sure!!!

10. What do we need for prototyping?
We need to understand process of use of a
product:

11. How product is born?
Surface
Skeleton
Structure
Scope
Strategy

12. Time and place for prototyping
Surface
Prototyping
Skeleton
Structure
Scope
Strategy

13. Prototyping ways are many
• Paper Prototyping
• HTML/CSS/JS
• PowerPoint/Keynote
• Axure RP Pro/iRise
• Excel/Numbers

14. Why paper prototyping?

15. It’s simple!

16. Who can draw?

17. And when you were children? ;)

18. The only important thing is understanding

19. Paper prototypes have right fidelity

20. Paper prototypes can be done together!

21. Some more coins into the pig...
• Paper prototyping is the fastest way
• Help to force decisions
• Irrelevant to technical skills
• There is no court for paper prototypes

22. What tools do we need?
• Paper
• Transparent film
• Post-it notes
• Scissors
• Removable tape
• Pens, pencils, markers

23. Some more tools...

24. I’ve got my own...

25. Simple example: site search
What to do:
As a user I can search a site to find content that
interests me.
How to demo:
User types text into a search form, push a «Search»
button and gets a page with search results.

26. Let’s build a prototype for search

27. Take a look and add some details

28. Little bit harder: photo gallery
What to do:
As a registered user I can create and edit galleries
so I can share my fotos with my friends.
How to demo:
Gallery creation/edit; load a photo; sign a photo;
access setup to gallery; show a gallery.

29. In animation and movies they use storyboards

30. We can use sketchboards

31. Galleries sketchboard

32. Let’s build a gallery edit prototype

33. We can add a photo

34. Photo added...

35. We can setup access to gallery

36. Access granted...

37. They often say paper prototypes lack interactivity

38. Let’s edit personal data

39. Let’s add a child

40. Is that interactive? Absolutely, yep...

41. Paper prototypes testing

42. What do we need for testing?
• Target group
• Testing tasks
• Helpers

43. Our helpers
Faciman Compuman Watchman
Mr. Smith. He Manipulates a Listens and writes
solves problems ;) prototype down everything
according to user
actions

44. What are testing tasks?
• Goal
• Input data
• User steps
• Notes

45. How to analyze test results?
• All tasks completed?
• User remarks?
• Watchman notes?

46. Let’s refinine search prototype a bit

47. Let’s refine galleries

48. Rename a gallery on edit page

49. Turn a photo

50. It’s better now!

51. Then test again... and refine again...
Prototyping is a
process

52. And one more thing
Paper prototyping is a
mindset

53. Home reading
User Experience: Prototyping:
• About Face, Alan • Prototyping: A
Cooper Practitioner’s Guide,
• The Elements of User Todd Zaki Warfel
Experience, Jesse James • Paper Prototyping: The
Garrett Fast and Easy Way to
• Jeff Patton articles and Design and Refine User
talks Interfaces, Carolyn
Snyder

54. Thanks!