Transcript
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


Top Related