Integrating Agile UX into your projectRachel Kammerer

@rafaelpetry@rlkammererRafael Petry

Understanding and Selling UX

UX

UXUI

UXUIXD

UXUIXD

graphic designer

graphic designerinformation architect

graphic designerinformation architect

user researcher

graphic designerinformation architect

user researcherinteraction designer

graphic designerinformation architect

user researcherinteraction designer

UI developer

graphic designerinformation architect

user researcherinteraction designer

UI developerusability engineer

psychology

psychology

branding

psychology

branding

aesthetics

psychology

branding

aestheticsemotion

psychology

branding

aestheticsemotion

perception

psychology

branding

aestheticsemotion

perception

experience

graphic design

information architecture

user research

interaction design

UI development

usability engineering

graphic design

information architecture

user research

interaction design

UI development

usability engineering

psychology

branding

aesthetics

emotion

perception

experience

UX

UX/UI

UX/UI/XD

UX/UI/XD

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

UX/UI/XD

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

UX/UI/XD

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

“We need a UX”

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

UX/UI/XD

graphic designinformation architectureuser researchinteraction designUI developmentusability engineering

CHECK DESIRED SKILLS

graphic designinformation architecture

user researchinteraction designUI development

usability engineering

psychology

branding

aestheticsemotion

perception

experience

experience

outcome

?

pretty

intuitive

efficient

rewarding

enjoyable

memorable

prettyintuitiveefficientrewardingenjoyablememorable

prettyintuitiveefficientrewardingenjoyablememorable

Avoid rework.

Avoid rework.

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

Better prioritization of features.

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

Save development time.

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

Increase loyalty, increase revenue

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

Math

JEDI CLOAK

1 cloak

15 minutes

4 cloaks per hour

100 people

400 cloaks per hour

x 400

=

S/. 40,000

15 minutes

15 minutes

5 minutes

5 developers

1 week (40 hours)

S/. 200 per hour

5 x 40 x 200developers hours soles/hour

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

15 minutes

5 minutes

12 cloaks per hour

100 people

S/. 120,000

S/. 40,000per hour

S/. 120,000per hour

+ S/. 40,000

30 minutes

A/B Testing

60% 40%

50%

VictoryKit

Whiplash

1

1

1

60% 40%

1

50%

1

2

1

2

1

2

67% 50%

1

2

34%

case studies

7%

15%

27%

30%

http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page

5%http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/

19%http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/

http://www.slideshare.net/Upworthy/how-to-make-that-one-thing-go-viral-just-kidding

tools

https://github.com/victorykit/whiplash

Conveying Ideas

DISCUSSION

DISCUSSIONtwo or more people communicating

DISCUSSION: share ideas

DISCUSSION: big picture

SKETCH

SKETCHquick drawing

SKETCH: define elements

SKETCH: space

WIREFRAME

WIREFRAMEdigital representation of ideas

LogoLinkLinkLink

Image Image Image Image

Image

WIREFRAME: architecture

WIREFRAME: refine space

WIREFRAME: sharable

MOCK-UP

MOCK-UPhigh-fidelity graphic

MOCK-UP: design

MOCK-UP: branding

MOCK-UP: feel

PROTOTYPE

PROTOTYPEworking code with graphics

PROTOTYPE: interaction

prove ideas are possible

create reusable code

expedite development

discussions become more focused

disc

ussi

on

disc

ussi

on

sket

ch

disc

ussi

on

sket

ch

wire

fram

e

disc

ussi

on

sket

ch

wire

fram

e

moc

k-up

disc

ussi

on

sket

ch

wire

fram

e

moc

k-up

prot

otyp

e

disc

ussi

on

sket

ch

wire

fram

e

moc

k-up

prot

otyp

e

wor

king

cod

e

UX in Agile Teams

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

http://agilemanifesto.org/principles.html

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

http://agilemanifesto.org/principles.html

sharing insights

pairing

prototyping

A/B testing

Integrating Agile UX into your projectRachel Kammerer

@rafaelpetry@rlkammererRafael Petry