Web 2.0 Expo / NYC / 2008
DESIGN
& UX IN AN
AGILE
PROCESS
M. JACKSON WILKINSON

First things first...
Who is
This Dude?

A Short History of
SOFTWARE
DEVELOPMENT
PROCESSES

A (REALLY) Short History of (CERTAIN)
SOFTWARE
DEVELOPMENT
PROCESSES

Source: I wish I knew

THE PRACTICE:
CHAOS

The Solution?
WATERFALL

INCREMENTAL

REQUIREMENTS
DESIGN
DEVELOPMENT
TESTING
MAINTENANCE

DOCUMENTED

http://www.flickr.com/photos/simona_/2194407083/

GATHER
PROBLEM
IDENTIFY
DESIGN
SOLUTION IMPLEMENT
TIME

GATHER
PROBLEM
IDENTIFY
DESIGN
SOLUTION IMPLEMENT
TIME

GATHER
PROBLEM
IDENTIFY
DESIGN
SOLUTION IMPLEMENT
TIME

The Solution?
WATERFALL

Failure

REQUIREMENTS
DESIGN
DEVELOPMENT
TESTING
MAINTENANCE

REQUIREMENTS
DESIGN
DEVELOPMENT
TESTING
MAINTENANCE

SPECIALIZATION

SPECIALIZATION

The Solution?
AGILE

ITERATIVE

REQUIREMENTS
DESIGN
PREPARATION
CYCLE
RELEASE
DEVELOPMENT
TESTING

PROTOTYPE BETA LAUNCH
PLANNING CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE MAINTENANCE

ADAPTABLE

PROTOTYPE BETA LAUNCH
PLANNING CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE MAINTENANCE

PROTOTYPE BETA LAUNCH
PLANNING CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE MAINTENANCE

RAPID

REQUIREMENTS
DESIGN
PREPARATION
CYCLE
RELEASE
DEVELOPMENT
TESTING
One to Four Weeks

PROTOTYPE BETA LAUNCH
PLANNING CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE MAINTENANCE

COOPERATIVE

REQUIREMENTS
DESIGN
DEVELOPMENT
TESTING
MAINTENANCE

QUALITY-DRIVEN

The Truth About
AGILE
IN PRACTICE

DOGMATIC

PROTOTYPE BETA LAUNCH
PLANNING CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE MAINTENANCE

CYCLE
INTERFACE DESIGN
VISUAL DESIGN
BUILD-OUT
DEVELOPMENT
TWO WEEKS

CYCLE
USER RESEARCH?
INTERFACE DESIGN
ORIGINAL THOUGHT?
VISUAL DESIGN
BUILD-OUT USER TESTING?
DEVELOPMENT
TWO WEEKS

Rounded Corners
Drop Shadows
Reflections
Pastels
Helvetica
Gradients
FTW!

PROTOTYPE BETA LAUNCH
PLANNING CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE MAINTENANCE

REQUIREMENTS
UI DESIGN
PROTOTYPE BETA LAUNCH
VISUAL DESIGN
CYCLE CYCLE CYCLE CYCLE CYCLE CYCLE

AGILE TENDS TO YIELD
WATERFALL

NOW THAT WE KNOW WHAT
DOESN’t work, it’s time to start
FIXING IT

Fixing Agile for Designers
Let’s Review the
GOALS

ITERATIVE

ADAPTABLE

RAPID

COOPERATIVE

QUALITY-DRIVEN

Fixing Agile for Designers
SKEW PROJECT
CYCLES

CYCLE
INTERFACE DESIGN
VISUAL DESIGN
BUILD-OUT
DEVELOPMENT
TWO WEEKS

CYCLE
INTERFACE DESIGN
VISUAL DESIGN / BUILD-OUT
DEVELOPMENT
TWO WEEKS

CYCLE N-1 INTERFACE DESIGN CYCLE N+1
CYCLE N-1 VISUAL DESIGN / BUILD-OUT CYCLE N+1
CYCLE N-1 DEVELOPMENT CYCLE N+1

CYCLE N-1 INTERFACE DESIGN CYCLE N+1
CYCLE N-1 VISUAL DESIGN / BUILD-OUT CYCLE N+1
CYCLE N-1 DEVELOPMENT CYCLE N+1

Fixing Agile for Designers
Make Use OF
CYCLE 0

CYCLE 0 INTERFACE DESIGN CYCLE 2
CYCLE 0 VISUAL DESIGN / BUILD-OUT CYCLE 2
CYCLE 0 DEVELOPMENT CYCLE 2

RESEARCH

AGGREGATE
SURVEYS
INTERVIEWS
ANALYTICS
RESEARCH PERSONAS
TESTING
CARD SORTING COMPETITIVE

PRODUcT DESIGN

COMPETITIVE ANALYSIS
FEATURE QUADRANTS
PRODUCT DESIGN
SURVEYS BRAINSTORMING
MARKET ANALYSIS

OVERHEAD

CERTIFICATES
SUBVERSION
HOSTING
DEVELOPMENT OVERHEAD
CODE INTEGRATION STAGING
DEVELOPMENT ENVIRONMENTS

MOOD BOARDS

COLOR
TITLES
TEXTURE
MOOD / STYLE BOARDS
LOOK/FEEL INSPIRATION
STYLES

DEFINING “DONE”

Fixing Agile for Designers
Start Cycles With
PLANNING

USER STORIES

USERS SHOULD BE ABLE TO UPLOAD
MULTIPLE PHOTOS AT ONCE

TEST PLANS

USERS SHOULD BE ABLE TO UPLOAD
MULTIPLE PHOTOS AT ONCE
- Test with JPEG, PNG, GIF (supported)
- Test with an unsupported image format
- Test with Flash not present
- Test with more than 20 MB of total POST data

CYCLE PLANNING

8 USERS SHOULD BE ABLE TO UPLOAD 6
MULTIPLE PHOTOS AT ONCE
- Test with JPEG, PNG, GIF (supported)
2
4
- Test with an unsupported image format
- Test with Flash not present
- Test with more than 20 MB of total POST data

8 USERS SHOULD BE ABLE TO UPLOAD 8
MULTIPLE PHOTOS AT ONCE
- Test with JPEG, PNG, GIF (supported)
2
4
- Test with an unsupported image format
- Test with Flash not present
- Test with more than 20 MB of total POST data

8 USERS SHOULD BE ABLE TO UPLOAD 8
MULTIPLE PHOTOS AT ONCE
- Test with JPEG, PNG, GIF (supported)
2
4
- Test with an unsupported image format
- Test with Flash not present
- Test with more than 20 MB of total POST data
This Story: 14 hours

COLLABORATIVE
UX/UI

USE Documents As
COMMUNICATION

Fixing Agile for Designers
GET EVERYONE IN
STAND-UP

Virtual STand-UP
Jackson Yesterday: Finished wireframing the rating features, all
updated wireframes are in SVN. Today: Testing image
upload interface from C3; diving into some user flows for
C4. Blockers: None for now.

Fixing Agile for Designers
Emphasize
VALIDATION

FIT IN
USER TESTING

HAVE DEVELOPERS GIVE
PUBLIC DEMOS

GET THE TEAM INTO
ACCEPTANCE
TESTING

WHAT IF YOUR PROCESS IS
NOT FIXED
YET?

Process still not working?
BE
AGILE

Process still not working?
FOCUS ON THE
GOALS

ITERATIVE

ADAPTABLE

RAPID

COOPERATIVE

QUALITY-DRIVEN

THANKS!
jackson@viget.com
http://viget.com
http://jounce.net