Using Rapid Prototyping for Design Iteration es g te at o - Agile … · 2019-12-16 · & Validate...

Using Rapid Prototyping for Design Iteration

Hugh Beyer

es g te at o

Hugh [email protected]

Karen Holtzblatt, CEOHugh Beyer, CTO

[email protected]

www.incontextdesign.comwww.innovationincool.com

UX and Agile: The promiseUX and Agile: The promise

Agile says development in steps – and iterateUX says work with users to create value – and iterate

The “ideal” productPhase 0 The ideal productPhase 0sets direction

(requirements)

User Iteration

What users really need

User Iteration refines the interface

and function

need

Base principle for real user feedbackBase principle for real user feedback

Real user feedback – Doesn’t come from: Product owners

Stakeholders

User surrogates

Purchasers

People who used to be users

DemosDemos

Focus groups

And… You can’t put the user on the team

Users can’t give you a design

U ’t t ll h t th t Users can’t tell you what they want

Contextual DesignContextual Designol

utio

ns

Talk to your customers in the field1 Contextual Inquiry1

men

ts&

So

Interpret the data as a team to capture key issues and activitiesInterpretation Session2

Work Models & 3

Req

uire

m

Consolidate data across customers for a full market viewAffinity Diagramming3

Generate new products & the next product concepts steeped in data Visioning4

Con

cept

s

Interaction Patterns & 6

Work out the details of particular tasks and rolesStoryboards5

e &

Val

idat

e

Define system structure, function, content and user interactionUser Environment Design6

Mock up the interface to validate direction and UI with customersPaper Prototype Interviews7

Def

ine p

Design and test the final look; base stories on validated functionVisual Design & Agile Stories8

Contextual DesignContextual Design

Contextual Inquiry1

Interpretation Session2

Work Models & Affinity 3

Visioning4

Storyboards5

Interaction Patterns & UED6

Validate product concepts, process changes, and user experience while testing user reception

Paper Prototype Interviews7

8

Or bring out concept boards to validate direction before detailed design

Visual Design & Agile Stories 8

Testing a design:Testing a design: Paper prototyping

Using paper prototypesUsing paper prototypes

Test design concepts with users Structure, function, and flow

You are not testing a final, perfect design

Use hand-drawn paper prototypesR h l t t b tt Rough paper reveals structure better

Paper lets the user engage and co-design• Use the language of the user

Pi d t b il bl d h bl• Pieces need to be easily moveable and changeable

Paper allows for real work, not just demo

Find what works for users instead of just validating

Iterative prototyping process A new iteration every 10 days

Move to running prototype as parts stabilize Move to running prototype as parts stabilize

Test low-level UI after the structure is stable

A paper prototypeA paper prototype

Principles for paper prototype interviewingPrinciples for paper prototype interviewing

Context – grounded in real experience Walk through the user’s real work in the paper prototypeg p p p yp

Make sure users interact with it

Partnership – co-design Modify the prototype as you go

Suggest changes based on your knowledge of the whole system

Interpretation – understand the issues Look for underlying issues related to structure and interaction patterns

Watch emotional reaction to the systemWatch emotional reaction to the system

Focus – validate the structure Focus on the work practice the prototype was designed to address

Ignore visual design issues

Structure of a paper prototype interviewStructure of a paper prototype interview

Introduction Introduce prototype and interview situation

Get an overview of their work

Transition Move to prototype after you find a few hooks

Orient user in the prototype

During the Interview Replace sample data with real data

Have the user interact with the prototype to do real work• Do NOT fall into demo mode

Modify prototype with user’s suggestions

Take notes Take notes

Wrap-Up Restate key findings

W lk th h i i t f t Walk through any remaining parts of system

Check sales point

Paper prototype interpretation sessionPaper prototype interpretation session

Record the data Separate the conversationsp

• Work practice• Structural• Function• UI detail• Validation

Interpretation rolesInterpretation roles Interviewer recounts from prototype

Notetaker reads their notes

Participants listen for different types of issues

Recorder captures issues and labels

Resolving issues and iterating the prototypeResolving issues and iterating the prototype

Organize issues according to structure Print issues on Post-its and attach to relevant area on interaction sketches

Resolve large structural issues as a team Complex issues at the level of the overall system or UI components

Record decisions and new issues

Work out details and lower-level issues in sub-teams Address all remaining

Record decisions and new issues

Create new interaction sketchCreate new interaction sketch If changes are minor, modify old sketch

Build new paper prototypeBuild new paper prototype Increase amount of detail after each round

R id It ti ithi S i tRapid Iteration within Sprints

Phase 0 stepsPhase 0 steps

Phase 0Phase 0 Release PlanningRelease Planning DevelopmentDevelopment DeploymentDeploymentgg

Field Research• Contextual Inquiry• Work models

Field Research• Contextual Inquiry• Work models

VisioningVisioning Concept Validation• Low-fidelity prototypingConcept Validation• Low-fidelity prototyping

Determines who the customer is and what to build

Necessary precursor to Agile DevelopmentNecessary precursor to Agile Development

Result: Tested and validated product structure and features

Example schedule of CD Agile Phase 0 Example schedule of CD Agile Phase 0

User-centered Agile Compressed into a short

Week 1 – Gather data from 8-10 usersWeek 1 – Gather data from 8-10 users

prin

tpr

int

Phase 0

For constrained project focus only!

Week 2 – Consolidate dataWeek 2 – Consolidate data

Sp

Sp

Week 3 – Vision and storyboardWeek 3 – Vision and storyboard

Week 4 – UED and UIWeek 4 – UED and UI

Phase 0 sprintsusing Scrum as a process frameworkS

prin

tS

prin

t

Week 5 – Release planning & validation (2-4 users)Week 5 – Release planning & validation (2-4 users)

rint

rint

Week 6 – Validation & redesignWeek 6 – Validation & redesign

Spr

Spr

ntnt

Development Sprint 1

Spr

inS

prin

Example schedule of an Agile SprintExample schedule of an Agile Sprint

M W: Collaborate with developer; WorkM W: Collaborate with developer; Work

User-centered Agile Prototype testing for

d t il d UI

M-W: Collaborate with developer; Work up detailed designsTh: 4 users + interpretationF: Revise detailed design

M-W: Collaborate with developer; Work up detailed designsTh: 4 users + interpretationF: Revise detailed design

Wee

k 1

Wee

k 1

detailed UI

Testing of initial implementations for rapid feedback

F: Revise detailed designF: Revise detailed design

M: Collaborate on new/detailed designM: Collaborate on new/detailed designek 2

ek 2

eedbacgW/Th: Check design implementation

gW/Th: Check design implementation

Wee

Wee

Put the customer at the center of the design

Using Rapid Prototyping for Design Iteration es g te at o - Agile … · 2019-12-16 · & Validate...

Documents

Transcript of Using Rapid Prototyping for Design Iteration es g te at o - Agile … · 2019-12-16 · & Validate...