Integrating Agile UX into your project - Ágiles 2013

194
Integrating Agile UX into your project Rachel Kammerer @rafaelpetry @rlkammerer Rafael Petry
  • date post

    18-Oct-2014
  • Category

    Technology

  • view

    734
  • download

    0

description

Slides from my talk with Rachel Kammerer about Agile UX, explaining how software developers and user experience designers can better collaborate on agile teams. We presented it at Ágiles 2013 in Lima, Peru on October 11, 2013.

Transcript of Integrating Agile UX into your project - Ágiles 2013

Page 1: Integrating Agile UX into your project - Ágiles 2013

Integrating Agile UX into your projectRachel Kammerer

@rafaelpetry@rlkammererRafael Petry

Page 2: Integrating Agile UX into your project - Ágiles 2013
Page 3: Integrating Agile UX into your project - Ágiles 2013

Understanding and Selling UX

Page 4: Integrating Agile UX into your project - Ágiles 2013

UX

Page 5: Integrating Agile UX into your project - Ágiles 2013

UXUI

Page 6: Integrating Agile UX into your project - Ágiles 2013

UXUIXD

Page 7: Integrating Agile UX into your project - Ágiles 2013

UXUIXD

Page 8: Integrating Agile UX into your project - Ágiles 2013

graphic designer

Page 9: Integrating Agile UX into your project - Ágiles 2013

graphic designerinformation architect

Page 10: Integrating Agile UX into your project - Ágiles 2013

graphic designerinformation architect

user researcher

Page 11: Integrating Agile UX into your project - Ágiles 2013

graphic designerinformation architect

user researcherinteraction designer

Page 12: Integrating Agile UX into your project - Ágiles 2013

graphic designerinformation architect

user researcherinteraction designer

UI developer

Page 13: Integrating Agile UX into your project - Ágiles 2013

graphic designerinformation architect

user researcherinteraction designer

UI developerusability engineer

Page 14: Integrating Agile UX into your project - Ágiles 2013

psychology

Page 15: Integrating Agile UX into your project - Ágiles 2013

psychology

branding

Page 16: Integrating Agile UX into your project - Ágiles 2013

psychology

branding

aesthetics

Page 17: Integrating Agile UX into your project - Ágiles 2013

psychology

branding

aestheticsemotion

Page 18: Integrating Agile UX into your project - Ágiles 2013

psychology

branding

aestheticsemotion

perception

Page 19: Integrating Agile UX into your project - Ágiles 2013

psychology

branding

aestheticsemotion

perception

experience

Page 20: Integrating Agile UX into your project - Ágiles 2013

graphic design

information architecture

user research

interaction design

UI development

usability engineering

Page 21: Integrating Agile UX into your project - Ágiles 2013

graphic design

information architecture

user research

interaction design

UI development

usability engineering

psychology

branding

aesthetics

emotion

perception

experience

Page 22: Integrating Agile UX into your project - Ágiles 2013

UX

Page 23: Integrating Agile UX into your project - Ágiles 2013

UX/UI

Page 24: Integrating Agile UX into your project - Ágiles 2013

UX/UI/XD

Page 25: Integrating Agile UX into your project - Ágiles 2013

UX/UI/XD

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

Page 26: Integrating Agile UX into your project - Ágiles 2013

UX/UI/XD

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

Page 27: Integrating Agile UX into your project - Ágiles 2013

UX/UI/XD

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

Page 28: Integrating Agile UX into your project - Ágiles 2013
Page 29: Integrating Agile UX into your project - Ágiles 2013
Page 30: Integrating Agile UX into your project - Ágiles 2013
Page 31: Integrating Agile UX into your project - Ágiles 2013
Page 32: Integrating Agile UX into your project - Ágiles 2013
Page 33: Integrating Agile UX into your project - Ágiles 2013

“We need a UX”

Page 34: Integrating Agile UX into your project - Ágiles 2013

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

Page 35: Integrating Agile UX into your project - Ágiles 2013

UX/UI/XD

graphic designinformation architectureuser researchinteraction designUI developmentusability engineering

CHECK DESIRED SKILLS

Page 36: Integrating Agile UX into your project - Ágiles 2013

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

Page 37: Integrating Agile UX into your project - Ágiles 2013
Page 38: Integrating Agile UX into your project - Ágiles 2013
Page 39: Integrating Agile UX into your project - Ágiles 2013
Page 40: Integrating Agile UX into your project - Ágiles 2013

experience

Page 41: Integrating Agile UX into your project - Ágiles 2013

outcome

Page 42: Integrating Agile UX into your project - Ágiles 2013
Page 43: Integrating Agile UX into your project - Ágiles 2013
Page 44: Integrating Agile UX into your project - Ágiles 2013

?

Page 45: Integrating Agile UX into your project - Ágiles 2013

pretty

Page 46: Integrating Agile UX into your project - Ágiles 2013

intuitive

Page 47: Integrating Agile UX into your project - Ágiles 2013

efficient

Page 48: Integrating Agile UX into your project - Ágiles 2013

rewarding

Page 49: Integrating Agile UX into your project - Ágiles 2013

enjoyable

Page 50: Integrating Agile UX into your project - Ágiles 2013

memorable

Page 51: Integrating Agile UX into your project - Ágiles 2013

prettyintuitiveefficientrewardingenjoyablememorable

Page 52: Integrating Agile UX into your project - Ágiles 2013
Page 53: Integrating Agile UX into your project - Ágiles 2013

prettyintuitiveefficientrewardingenjoyablememorable

Page 54: Integrating Agile UX into your project - Ágiles 2013
Page 55: Integrating Agile UX into your project - Ágiles 2013

Avoid rework.

Page 56: Integrating Agile UX into your project - Ágiles 2013

Avoid rework.

50% of developer time is spent on rework.http://socialmediatoday.com/bitpakkit/267487/roi-ux

Page 57: Integrating Agile UX into your project - Ágiles 2013

Better prioritization of features.

Page 58: Integrating Agile UX into your project - Ágiles 2013

Better prioritization of features.

5% of features are used 95% of the time.http://www.sds-consulting.com/sites/default/files/SDS_UX%20Report%202009.pdf

Page 59: Integrating Agile UX into your project - Ágiles 2013

Save development time.

Page 60: Integrating Agile UX into your project - Ágiles 2013

Save development time.

early integration of UX eliminates 33-50% of dev time.http://www.sds-consulting.com/sites/default/files/SDS_UX%20Report%202009.pdf

Page 61: Integrating Agile UX into your project - Ágiles 2013

Increase loyalty, increase revenue

Page 62: Integrating Agile UX into your project - Ágiles 2013

Increase loyalty, increase revenue

 a loyal customer is worth 2.4 times more.http://www.sds-consulting.com/sites/default/files/SDS_UX%20Report%202009.pdf

Page 63: Integrating Agile UX into your project - Ágiles 2013
Page 64: Integrating Agile UX into your project - Ágiles 2013

Math

Page 65: Integrating Agile UX into your project - Ágiles 2013
Page 66: Integrating Agile UX into your project - Ágiles 2013

JEDI CLOAK

Page 67: Integrating Agile UX into your project - Ágiles 2013

1 cloak

Page 68: Integrating Agile UX into your project - Ágiles 2013

15 minutes

Page 69: Integrating Agile UX into your project - Ágiles 2013

4 cloaks per hour

Page 70: Integrating Agile UX into your project - Ágiles 2013

100 people

Page 71: Integrating Agile UX into your project - Ágiles 2013

400 cloaks per hour

x 400

Page 72: Integrating Agile UX into your project - Ágiles 2013

=

Page 73: Integrating Agile UX into your project - Ágiles 2013

S/. 40,000

Page 74: Integrating Agile UX into your project - Ágiles 2013
Page 75: Integrating Agile UX into your project - Ágiles 2013

15 minutes

Page 76: Integrating Agile UX into your project - Ágiles 2013

15 minutes

Page 77: Integrating Agile UX into your project - Ágiles 2013

5 minutes

Page 78: Integrating Agile UX into your project - Ágiles 2013

5 developers

Page 79: Integrating Agile UX into your project - Ágiles 2013

1 week (40 hours)

Page 80: Integrating Agile UX into your project - Ágiles 2013

S/. 200 per hour

Page 81: Integrating Agile UX into your project - Ágiles 2013

5 x 40 x 200developers hours soles/hour

Page 82: Integrating Agile UX into your project - Ágiles 2013

5 x 40 x 200 = S/. 40,000developers hours soles/hour

Page 83: Integrating Agile UX into your project - Ágiles 2013

15 minutes

Page 84: Integrating Agile UX into your project - Ágiles 2013

5 minutes

Page 85: Integrating Agile UX into your project - Ágiles 2013

12 cloaks per hour

Page 86: Integrating Agile UX into your project - Ágiles 2013

100 people

Page 87: Integrating Agile UX into your project - Ágiles 2013

S/. 120,000

Page 88: Integrating Agile UX into your project - Ágiles 2013

S/. 40,000per hour

S/. 120,000per hour

Page 89: Integrating Agile UX into your project - Ágiles 2013
Page 90: Integrating Agile UX into your project - Ágiles 2013

+ S/. 40,000

Page 91: Integrating Agile UX into your project - Ágiles 2013
Page 92: Integrating Agile UX into your project - Ágiles 2013

30 minutes

Page 93: Integrating Agile UX into your project - Ágiles 2013
Page 94: Integrating Agile UX into your project - Ágiles 2013
Page 95: Integrating Agile UX into your project - Ágiles 2013

A/B Testing

Page 96: Integrating Agile UX into your project - Ágiles 2013
Page 97: Integrating Agile UX into your project - Ágiles 2013
Page 98: Integrating Agile UX into your project - Ágiles 2013
Page 99: Integrating Agile UX into your project - Ágiles 2013
Page 100: Integrating Agile UX into your project - Ágiles 2013
Page 101: Integrating Agile UX into your project - Ágiles 2013

60% 40%

Page 102: Integrating Agile UX into your project - Ágiles 2013

50%

Page 103: Integrating Agile UX into your project - Ágiles 2013
Page 104: Integrating Agile UX into your project - Ágiles 2013
Page 105: Integrating Agile UX into your project - Ágiles 2013

VictoryKit

Page 106: Integrating Agile UX into your project - Ágiles 2013
Page 107: Integrating Agile UX into your project - Ágiles 2013

Whiplash

Page 108: Integrating Agile UX into your project - Ágiles 2013
Page 109: Integrating Agile UX into your project - Ágiles 2013
Page 110: Integrating Agile UX into your project - Ágiles 2013

1

Page 111: Integrating Agile UX into your project - Ágiles 2013

1

Page 112: Integrating Agile UX into your project - Ágiles 2013

1

60% 40%

Page 113: Integrating Agile UX into your project - Ágiles 2013

1

50%

Page 114: Integrating Agile UX into your project - Ágiles 2013

1

2

Page 115: Integrating Agile UX into your project - Ágiles 2013

1

2

Page 116: Integrating Agile UX into your project - Ágiles 2013

1

2

67% 50%

Page 117: Integrating Agile UX into your project - Ágiles 2013

1

2

34%

Page 118: Integrating Agile UX into your project - Ágiles 2013
Page 119: Integrating Agile UX into your project - Ágiles 2013
Page 120: Integrating Agile UX into your project - Ágiles 2013
Page 121: Integrating Agile UX into your project - Ágiles 2013
Page 122: Integrating Agile UX into your project - Ágiles 2013
Page 123: Integrating Agile UX into your project - Ágiles 2013
Page 124: Integrating Agile UX into your project - Ágiles 2013

case studies

Page 126: Integrating Agile UX into your project - Ágiles 2013
Page 128: Integrating Agile UX into your project - Ágiles 2013
Page 130: Integrating Agile UX into your project - Ágiles 2013
Page 132: Integrating Agile UX into your project - Ágiles 2013

tools

Page 133: Integrating Agile UX into your project - Ágiles 2013
Page 134: Integrating Agile UX into your project - Ágiles 2013
Page 135: Integrating Agile UX into your project - Ágiles 2013
Page 136: Integrating Agile UX into your project - Ágiles 2013
Page 138: Integrating Agile UX into your project - Ágiles 2013
Page 139: Integrating Agile UX into your project - Ágiles 2013

Conveying Ideas

Page 140: Integrating Agile UX into your project - Ágiles 2013
Page 141: Integrating Agile UX into your project - Ágiles 2013

DISCUSSION

Page 142: Integrating Agile UX into your project - Ágiles 2013

DISCUSSIONtwo or more people communicating

Page 143: Integrating Agile UX into your project - Ágiles 2013
Page 144: Integrating Agile UX into your project - Ágiles 2013

DISCUSSION: share ideas

Page 145: Integrating Agile UX into your project - Ágiles 2013

DISCUSSION: big picture

Page 146: Integrating Agile UX into your project - Ágiles 2013
Page 147: Integrating Agile UX into your project - Ágiles 2013

SKETCH

Page 148: Integrating Agile UX into your project - Ágiles 2013

SKETCHquick drawing

Page 149: Integrating Agile UX into your project - Ágiles 2013
Page 150: Integrating Agile UX into your project - Ágiles 2013

SKETCH: define elements

Page 151: Integrating Agile UX into your project - Ágiles 2013

SKETCH: space

Page 152: Integrating Agile UX into your project - Ágiles 2013
Page 153: Integrating Agile UX into your project - Ágiles 2013

WIREFRAME

Page 154: Integrating Agile UX into your project - Ágiles 2013

WIREFRAMEdigital representation of ideas

Page 155: Integrating Agile UX into your project - Ágiles 2013

LogoLinkLinkLink

Image Image Image Image

Image

Page 156: Integrating Agile UX into your project - Ágiles 2013

WIREFRAME: architecture

Page 157: Integrating Agile UX into your project - Ágiles 2013

WIREFRAME: refine space

Page 158: Integrating Agile UX into your project - Ágiles 2013

WIREFRAME: sharable

Page 159: Integrating Agile UX into your project - Ágiles 2013
Page 160: Integrating Agile UX into your project - Ágiles 2013

MOCK-UP

Page 161: Integrating Agile UX into your project - Ágiles 2013

MOCK-UPhigh-fidelity graphic

Page 162: Integrating Agile UX into your project - Ágiles 2013
Page 163: Integrating Agile UX into your project - Ágiles 2013

MOCK-UP: design

Page 164: Integrating Agile UX into your project - Ágiles 2013

MOCK-UP: branding

Page 165: Integrating Agile UX into your project - Ágiles 2013

MOCK-UP: feel

Page 166: Integrating Agile UX into your project - Ágiles 2013
Page 167: Integrating Agile UX into your project - Ágiles 2013

PROTOTYPE

Page 168: Integrating Agile UX into your project - Ágiles 2013

PROTOTYPEworking code with graphics

Page 169: Integrating Agile UX into your project - Ágiles 2013
Page 170: Integrating Agile UX into your project - Ágiles 2013

PROTOTYPE: interaction

Page 171: Integrating Agile UX into your project - Ágiles 2013

prove ideas are possible

Page 172: Integrating Agile UX into your project - Ágiles 2013

create reusable code

Page 173: Integrating Agile UX into your project - Ágiles 2013

expedite development

Page 174: Integrating Agile UX into your project - Ágiles 2013

discussions become more focused

Page 175: Integrating Agile UX into your project - Ágiles 2013

disc

ussi

on

Page 176: Integrating Agile UX into your project - Ágiles 2013

disc

ussi

on

sket

ch

Page 177: Integrating Agile UX into your project - Ágiles 2013

disc

ussi

on

sket

ch

wire

fram

e

Page 178: Integrating Agile UX into your project - Ágiles 2013

disc

ussi

on

sket

ch

wire

fram

e

moc

k-up

Page 179: Integrating Agile UX into your project - Ágiles 2013

disc

ussi

on

sket

ch

wire

fram

e

moc

k-up

prot

otyp

e

Page 180: Integrating Agile UX into your project - Ágiles 2013

disc

ussi

on

sket

ch

wire

fram

e

moc

k-up

prot

otyp

e

wor

king

cod

e

Page 181: Integrating Agile UX into your project - Ágiles 2013
Page 182: Integrating Agile UX into your project - Ágiles 2013
Page 183: Integrating Agile UX into your project - Ágiles 2013

UX in Agile Teams

Page 184: Integrating Agile UX into your project - Ágiles 2013
Page 185: Integrating Agile UX into your project - Ágiles 2013

"Continuous attention to technical excellence and good design enhances agility."

http://agilemanifesto.org/principles.html

Page 186: Integrating Agile UX into your project - Ágiles 2013
Page 187: Integrating Agile UX into your project - Ágiles 2013

"Simplicity—the art of maximizing the amount of work not done—is essential."

http://agilemanifesto.org/principles.html

Page 188: Integrating Agile UX into your project - Ágiles 2013
Page 189: Integrating Agile UX into your project - Ágiles 2013

sharing insights

Page 190: Integrating Agile UX into your project - Ágiles 2013

pairing

Page 191: Integrating Agile UX into your project - Ágiles 2013

prototyping

Page 192: Integrating Agile UX into your project - Ágiles 2013

A/B testing

Page 193: Integrating Agile UX into your project - Ágiles 2013
Page 194: Integrating Agile UX into your project - Ágiles 2013

Integrating Agile UX into your projectRachel Kammerer

@rafaelpetry@rlkammererRafael Petry