Paper prototyping for Agile Development

Agile Eastern Europe 2011

Who am I?

Max GaponovCertified Scrum Product OwnerAgile coach, CIO at Banki.rumgaponov@gmail.com

What are we going to talk about?

What is a Prototype?

Prototype is a working model of future system

What fields do use prototyping?

• Architecture

• Engineering

• Automobile industry

• Art

• Software

This talk was a prototype first ;)

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

Prototype is documentation

• Far more compact than text

• Does not take much time to understand

• Simplifies development

• Reduces development time

Prototype is communication

— So, it’s all clear?

— Sure!!!

What do we need for prototyping?

We need to understand process of use of a product:

How product is born?

Strategy

Scope

Structure

Skeleton

Surface

Time and place for prototyping

Prot

otyp

ing

Strategy

Scope

Structure

Skeleton

Surface

Prototyping ways are many

• Paper Prototyping

• HTML/CSS/JS

• PowerPoint/Keynote

• Axure RP Pro/iRise

• Excel/Numbers

Why paper prototyping?

It’s simple!

Who can draw?

And when you were children? ;)

The only important thing is understanding

Paper prototypes have right fidelity

Paper prototypes can be done together!

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

What tools do we need?

• Paper

• Transparent film

• Post-it notes

• Scissors

• Removable tape

• Pens, pencils, markers

Some more tools...

I’ve got my own...

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.

Let’s build a prototype for search

Take a look and add some details

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.

In animation and movies they use storyboards

We can use sketchboards

Galleries sketchboard

Let’s build a gallery edit prototype

We can add a photo

Photo added...

We can setup access to gallery

Access granted...

They often say paper prototypes lack interactivity

Let’s edit personal data

Let’s add a child

Is that interactive? Absolutely, yep...

Paper prototypes testing

What do we need for testing?

• Target group

• Testing tasks

• Helpers

Our helpers

FacimanMr. Smith. He

solves problems ;)

CompumanManipulates a

prototype according to user

actions

WatchmanListens and writes down everything

What are testing tasks?

• Goal

• Input data

• User steps

• Notes

How to analyze test results?

• All tasks completed?

• User remarks?

• Watchman notes?

Let’s refinine search prototype a bit

Let’s refine galleries

Rename a gallery on edit page

Turn a photo

It’s better now!

Then test again... and refine again...

Prototyping is a process

And one more thing

Paper prototyping is a mindset

Home reading

User Experience:

• About Face, Alan Cooper

• The Elements of User Experience, Jesse James Garrett

• Jeff Patton articles and talks

Prototyping:

• Prototyping: A Practitioner’s Guide, Todd Zaki Warfel

• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, Carolyn Snyder

Thanks!