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

Design and UX in an Agile Process

Embed Size (px)

DESCRIPTION

My talk on how to adjust an agile process to accommodate design and UX, as given at the Web 2.0 Expo in New York in September, 2008.

Citation preview

Page 1: Design and UX in an Agile Process

AGILE

Web 2.0 Expo / NYC / 2008

DESIGN & UX IN AN

P R O C E S SM. JACKSON WILKINSON

Page 2: Design and UX in an Agile Process

Who isThis Dude?

First things first...

Page 3: Design and UX in an Agile Process

A Short History of

SOFTWAREDEVELOPMENTPROCESSES

Page 4: Design and UX in an Agile Process

A (REALLY) Short History of (CERTAIN)

SOFTWAREDEVELOPMENTPROCESSES

Page 5: Design and UX in an Agile Process

Source: I wish I knew

Page 6: Design and UX in an Agile Process

CHAOSTHE PRACTICE:

Page 7: Design and UX in an Agile Process

WATERFALLThe Solution?

Page 8: Design and UX in an Agile Process

INCREMENTAL

Page 9: Design and UX in an Agile Process

REQUIREMENTS

DESIGN

DEVELOPMENT

TESTING

MAINTENANCE

Page 10: Design and UX in an Agile Process

DOCUMENTED

Page 12: Design and UX in an Agile Process

TIME

PROBLEM

SOLUTION

GATHER

IDENTIFY

DESIGN

IMPLEMENT

Page 13: Design and UX in an Agile Process

TIME

PROBLEM

SOLUTION

GATHER

IDENTIFY

DESIGN

IMPLEMENT

TIME

PROBLEM

SOLUTION

GATHER

IDENTIFY

DESIGN

IMPLEMENT

Page 14: Design and UX in an Agile Process

TIME

PROBLEM

SOLUTION

GATHER

IDENTIFY

DESIGN

IMPLEMENT

TIME

PROBLEM

SOLUTION

GATHER

IDENTIFY

DESIGN

IMPLEMENT

TIME

PROBLEM

SOLUTION

GATHER

IDENTIFY

DESIGN

IMPLEMENT

Page 15: Design and UX in an Agile Process

WATERFALLThe Solution?

Page 16: Design and UX in an Agile Process

Failure

Page 17: Design and UX in an Agile Process
Page 18: Design and UX in an Agile Process
Page 19: Design and UX in an Agile Process

REQUIREMENTS

DESIGN

DEVELOPMENT

TESTING

MAINTENANCE

Page 20: Design and UX in an Agile Process

REQUIREMENTS

DESIGN

DEVELOPMENT

TESTING

MAINTENANCE

Page 21: Design and UX in an Agile Process

SPECIALIZATION

Page 22: Design and UX in an Agile Process

SPECIALIZATION

Page 23: Design and UX in an Agile Process

AGILEThe Solution?

Page 24: Design and UX in an Agile Process

ITERATIVE

Page 25: Design and UX in an Agile Process

CYCLE

REQUIREMENTS

DESIGN

DEVELOPMENT

TESTING

PREPARATION

RELEASE

Page 26: Design and UX in an Agile Process

PLANNING CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

MAINTENANCE

Page 27: Design and UX in an Agile Process

ADAPTABLE

Page 28: Design and UX in an Agile Process

PLANNING CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

MAINTENANCE

Page 29: Design and UX in an Agile Process

PLANNING CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

MAINTENANCE

Page 30: Design and UX in an Agile Process

RAPID

Page 31: Design and UX in an Agile Process

CYCLE

REQUIREMENTS

DESIGN

DEVELOPMENT

TESTING

PREPARATION

RELEASE

One to Four Weeks

Page 32: Design and UX in an Agile Process

PLANNING CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

MAINTENANCE

Page 33: Design and UX in an Agile Process

COOPERATIVE

Page 34: Design and UX in an Agile Process

REQUIREMENTS

DESIGN

DEVELOPMENT

TESTING

MAINTENANCE

Page 35: Design and UX in an Agile Process
Page 36: Design and UX in an Agile Process

QUALITY-DRIVEN

Page 37: Design and UX in an Agile Process

AGILE IN PRACTICE

The Truth About

Page 38: Design and UX in an Agile Process

DOGMATIC

Page 39: Design and UX in an Agile Process

PLANNING CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

MAINTENANCE

Page 40: Design and UX in an Agile Process

CYCLE

INTERFACE DESIGN

VISUAL DESIGN

DEVELOPMENT

BUILD-OUT

TWO WEEKS

Page 41: Design and UX in an Agile Process

CYCLE

INTERFACE DESIGN

VISUAL DESIGN

DEVELOPMENT

BUILD-OUT

TWO WEEKS

USER RESEARCH?

USER TESTING?

ORIGINAL THOUGHT?

Page 42: Design and UX in an Agile Process

Rounded Corners

Drop Shadows

Reflections

Pastels

Helvetica

Gradients

FTW!

Page 43: Design and UX in an Agile Process

PLANNING CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

MAINTENANCE

Page 44: Design and UX in an Agile Process

REQUIREMENTS

CYCLE

PROTOTYPE

CYCLE CYCLE CYCLE CYCLE CYCLE

BETA LAUNCH

VISUAL DESIGN

UI DESIGN

Page 45: Design and UX in an Agile Process

WATERFALLAGILE TENDS TO YIELD

Page 46: Design and UX in an Agile Process

FIXING ITNOW THAT WE KNOW WHAT

DOESN’t work, it’s time to start

Page 47: Design and UX in an Agile Process

GOALSLet’s Review the

Fixing Agile for Designers

Page 48: Design and UX in an Agile Process

ITERATIVE

Page 49: Design and UX in an Agile Process

ADAPTABLE

Page 50: Design and UX in an Agile Process

RAPID

Page 51: Design and UX in an Agile Process

COOPERATIVE

Page 52: Design and UX in an Agile Process

QUALITY-DRIVEN

Page 53: Design and UX in an Agile Process

CYCLESSKEW PROJECT

Fixing Agile for Designers

Page 54: Design and UX in an Agile Process

CYCLE

INTERFACE DESIGN

VISUAL DESIGN

DEVELOPMENT

BUILD-OUT

TWO WEEKS

Page 55: Design and UX in an Agile Process

CYCLE

INTERFACE DESIGN

VISUAL DESIGN / BUILD-OUT

DEVELOPMENT

TWO WEEKS

Page 56: Design and UX in an Agile Process

INTERFACE DESIGN

VISUAL DESIGN / BUILD-OUT

DEVELOPMENT

CYCLE N+1

CYCLE N+1

CYCLE N+1

CYCLE N-1

CYCLE N-1

CYCLE N-1

Page 57: Design and UX in an Agile Process

INTERFACE DESIGN

VISUAL DESIGN / BUILD-OUT

DEVELOPMENT

CYCLE N+1

CYCLE N+1

CYCLE N+1

CYCLE N-1

CYCLE N-1

CYCLE N-1

Page 58: Design and UX in an Agile Process

CYCLE 0Make Use OF

Fixing Agile for Designers

Page 59: Design and UX in an Agile Process

INTERFACE DESIGN

VISUAL DESIGN / BUILD-OUT

DEVELOPMENT

CYCLE 2

CYCLE 2

CYCLE 2

CYCLE 0

CYCLE 0

CYCLE 0

Page 60: Design and UX in an Agile Process

RESEARCH

Page 61: Design and UX in an Agile Process

RESEARCH

SURVEYSAGGREGATE

INTERVIEWS

TESTING

PERSONAS

COMPETITIVE

ANALYTICS

CARD SORTING

Page 62: Design and UX in an Agile Process

PRODUcT DESIGN

Page 63: Design and UX in an Agile Process

PRODUCT DESIGN

FEATURE QUADRANTSCOMPETITIVE ANALYSIS

BRAINSTORMING

MARKET ANALYSIS

SURVEYS

Page 64: Design and UX in an Agile Process

OVERHEAD

Page 65: Design and UX in an Agile Process

DEVELOPMENT OVERHEAD

SUBVERSIONHOSTING

STAGING

DEVELOPMENT ENVIRONMENTS

CODE INTEGRATION

CERTIFICATES

Page 66: Design and UX in an Agile Process

MOOD BOARDS

Page 67: Design and UX in an Agile Process

MOOD / STYLE BOARDS

TITLESTEXTURE

INSPIRATION

STYLES

LOOK/FEEL

COLOR

Page 68: Design and UX in an Agile Process

DEFINING “DONE”

Page 69: Design and UX in an Agile Process

PLANNINGStart Cycles With

Fixing Agile for Designers

Page 70: Design and UX in an Agile Process

USER STORIES

Page 71: Design and UX in an Agile Process

USERS SHOULD BE ABLE TO UPLOAD MULTIPLE PHOTOS AT ONCE

Page 72: Design and UX in an Agile Process

TEST PLANS

Page 73: Design and UX in an Agile Process

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

Page 74: Design and UX in an Agile Process

CYCLE PLANNING

Page 75: Design and UX in an Agile Process

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

8 624

Page 76: Design and UX in an Agile Process

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

8 824

Page 77: Design and UX in an Agile Process

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

8 824

This Story: 14 hours

Page 78: Design and UX in an Agile Process
Page 79: Design and UX in an Agile Process

COLLABORATIVEUX/UI

Page 80: Design and UX in an Agile Process
Page 81: Design and UX in an Agile Process

USE Documents AsCOMMUNICATION

Page 82: Design and UX in an Agile Process

STAND-UPGET EVERYONE IN

Fixing Agile for Designers

Page 83: Design and UX in an Agile Process
Page 84: Design and UX in an Agile Process
Page 85: Design and UX in an Agile Process

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.

Page 86: Design and UX in an Agile Process

VALIDATIONEmphasizeFixing Agile for Designers

Page 87: Design and UX in an Agile Process

FIT INUSER TESTING

Page 88: Design and UX in an Agile Process

HAVE DEVELOPERS GIVEPUBLIC DEMOS

Page 89: Design and UX in an Agile Process

GET THE TEAM INTOACCEPTANCE

TESTING

Page 90: Design and UX in an Agile Process

NOT FIXEDYET?

WHAT IF YOUR PROCESS IS

Page 91: Design and UX in an Agile Process

AGILEBE

Process still not working?

Page 92: Design and UX in an Agile Process

GOALSFOCUS ON THE

Process still not working?

Page 93: Design and UX in an Agile Process

ITERATIVE

Page 94: Design and UX in an Agile Process

ADAPTABLE

Page 95: Design and UX in an Agile Process

RAPID

Page 96: Design and UX in an Agile Process

COOPERATIVE

Page 97: Design and UX in an Agile Process

QUALITY-DRIVEN