Integrating Agile UX into your project
Rachel Kammerer
@rlkammerer

Rafael Petry
@rafaelpetry
Understanding and Selling UX
UX
UX
UI
UX
UI
XD
UX
UI
XD
graphic designer
graphic designer
information architect
graphic designer
information architect
user researcher
graphic designer
information architect
user researcher
interaction designer
graphic designer
information architect
user researcher
interaction designer
UI developer
graphic designer
information architect
user researcher
interaction designer
UI developer
usability engineer
psychology
psychology
branding
psychology
branding

aesthetics
psychology
branding

aesthetics
emotion
psychology
perception
branding

aesthetics
emotion
psychology
perception
branding
experience
aesthetics
emotion
graphic design
information architecture
user research
interaction design
UI development
usability engineering
graphic design

psychology

information architecture

perception

user research

branding

interaction design

experience
...
UX
UX/UI
UX/UI/XD
graphic design

psychology

information architecture

perception

user research

branding

interaction design

experience
...
graphic design

psychology

information architecture

perception

user research

branding

interaction design

experience
...
graphic design

psychology

information architecture

perception

user research

branding

interaction design

experience
...
“We need a UX”
graphic design
information architecture
user research
interaction design
UI development
usability engineering
CHECK DESIRED SKILLS

graphic design
information architecture
user research
interaction design
UI development
usability en...
graphic design

psychology

information architecture

perception

user research

branding

interaction design

experience
...
experience
outcome
?
pretty
intuitive
efficient
rewarding
enjoyable
memorable
pretty
intuitive
efficient
rewarding
enjoyable
memorable
pretty
intuitive
efficient
rewarding
enjoyable
memorable
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/fi...
Save development time.
Save development time.

early integration of UX eliminates 33-50% of dev time.
http://www.sds-consulting.com/sites/default...
Increase loyalty, increase revenue
Increase loyalty, increase revenue

 a loyal customer is worth 2.4 times more.
http://www.sds-consulting.com/sites/default...
Math
JEDI CLOAK
1 cloak
15 minutes
4 cloaks per hour
100 people
x 400
400 cloaks per hour
=
S/. 40,000
15 minutes
15 minutes
5 minutes
5 developers
1 week (40 hours)
S/. 200 per hour
5 x 40 x 200
developers

hours

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

hours

soles/hour
15 minutes
5 minutes
12 cloaks per hour
100 people
S/. 120,000
S/. 40,000

S/. 120,000

per hour

per 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
DISCUSSION
two or more people communicating
DISCUSSION: share ideas
DISCUSSION: big picture
SKETCH
SKETCH
quick drawing
SKETCH: define elements
SKETCH: space
WIREFRAME
WIREFRAME
digital representation of ideas
Link

Link

Link

Logo

Image

Image

Image

Image

Image
WIREFRAME: architecture
WIREFRAME: refine space
WIREFRAME: sharable
MOCK-UP
MOCK-UP
high-fidelity graphic
MOCK-UP: design
MOCK-UP: branding
MOCK-UP: feel
PROTOTYPE
PROTOTYPE
working code with graphics
PROTOTYPE: interaction
prove ideas are possible
create reusable code
expedite development
discussions become more focused
discussion
sketch

discussion
wireframe

sketch

discussion
mock-up

wireframe

sketch

discussion
prototype

mock-up

wireframe

sketch

discussion
working code

prototype

mock-up

wireframe

sketch

discussion
UX in Agile Teams
"Continuous attention to technical excellence 
and good design enhances agility."

http://agilemanifesto.org/principles.ht...
"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 project
Rachel Kammerer
@rlkammerer

Rafael Petry
@rafaelpetry
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Integrating Agile UX into your project - Ágiles 2013
Upcoming SlideShare
Loading in …5
×

Integrating Agile UX into your project - Ágiles 2013

1,190 views

Published on

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.

Published in: Technology, Design

Integrating Agile UX into your project - Ágiles 2013

  1. 1. Integrating Agile UX into your project Rachel Kammerer @rlkammerer Rafael Petry @rafaelpetry
  2. 2. Understanding and Selling UX
  3. 3. UX
  4. 4. UX UI
  5. 5. UX UI XD
  6. 6. UX UI XD
  7. 7. graphic designer
  8. 8. graphic designer information architect
  9. 9. graphic designer information architect user researcher
  10. 10. graphic designer information architect user researcher interaction designer
  11. 11. graphic designer information architect user researcher interaction designer UI developer
  12. 12. graphic designer information architect user researcher interaction designer UI developer usability engineer
  13. 13. psychology
  14. 14. psychology branding
  15. 15. psychology branding aesthetics
  16. 16. psychology branding aesthetics emotion
  17. 17. psychology perception branding aesthetics emotion
  18. 18. psychology perception branding experience aesthetics emotion
  19. 19. graphic design information architecture user research interaction design UI development usability engineering
  20. 20. graphic design psychology information architecture perception user research branding interaction design experience UI development aesthetics usability engineering emotion
  21. 21. UX
  22. 22. UX/UI
  23. 23. UX/UI/XD
  24. 24. graphic design psychology information architecture perception user research branding interaction design experience UI development aesthetics usability engineering emotion UX/UI/XD
  25. 25. graphic design psychology information architecture perception user research branding interaction design experience UI development aesthetics usability engineering emotion UX/UI/XD
  26. 26. graphic design psychology information architecture perception user research branding interaction design experience UI development aesthetics usability engineering emotion UX/UI/XD
  27. 27. “We need a UX”
  28. 28. graphic design information architecture user research interaction design UI development usability engineering
  29. 29. CHECK DESIRED SKILLS graphic design information architecture user research interaction design UI development usability engineering UX/UI/XD
  30. 30. graphic design psychology information architecture perception user research branding interaction design experience UI development aesthetics usability engineering emotion
  31. 31. experience
  32. 32. outcome
  33. 33. ?
  34. 34. pretty
  35. 35. intuitive
  36. 36. efficient
  37. 37. rewarding
  38. 38. enjoyable
  39. 39. memorable
  40. 40. pretty intuitive efficient rewarding enjoyable memorable
  41. 41. pretty intuitive efficient rewarding enjoyable memorable
  42. 42. Avoid rework.
  43. 43. Avoid rework. 50% of developer time is spent on rework. http://socialmediatoday.com/bitpakkit/267487/roi-ux
  44. 44. Better prioritization of features.
  45. 45. 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
  46. 46. Save development time.
  47. 47. 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
  48. 48. Increase loyalty, increase revenue
  49. 49. 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
  50. 50. Math
  51. 51. JEDI CLOAK
  52. 52. 1 cloak
  53. 53. 15 minutes
  54. 54. 4 cloaks per hour
  55. 55. 100 people
  56. 56. x 400 400 cloaks per hour
  57. 57. =
  58. 58. S/. 40,000
  59. 59. 15 minutes
  60. 60. 15 minutes
  61. 61. 5 minutes
  62. 62. 5 developers
  63. 63. 1 week (40 hours)
  64. 64. S/. 200 per hour
  65. 65. 5 x 40 x 200 developers hours soles/hour
  66. 66. 5 x 40 x 200 = S/. 40,000 developers hours soles/hour
  67. 67. 15 minutes
  68. 68. 5 minutes
  69. 69. 12 cloaks per hour
  70. 70. 100 people
  71. 71. S/. 120,000
  72. 72. S/. 40,000 S/. 120,000 per hour per hour
  73. 73. + S/. 40,000
  74. 74. 30 minutes
  75. 75. A/B Testing
  76. 76. 60% 40%
  77. 77. 50%
  78. 78. VictoryKit
  79. 79. Whiplash
  80. 80. 1
  81. 81. 1
  82. 82. 1 60% 40%
  83. 83. 1 50%
  84. 84. 1 2
  85. 85. 1 2
  86. 86. 1 2 67% 50%
  87. 87. 1 2 34%
  88. 88. case studies
  89. 89. 7% 15% 27% 30% http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
  90. 90. 5% http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/
  91. 91. 19% http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/
  92. 92. http://www.slideshare.net/Upworthy/how-to-make-that-one-thing-go-viral-just-kidding
  93. 93. tools
  94. 94. https://github.com/victorykit/whiplash
  95. 95. Conveying Ideas
  96. 96. DISCUSSION
  97. 97. DISCUSSION two or more people communicating
  98. 98. DISCUSSION: share ideas
  99. 99. DISCUSSION: big picture
  100. 100. SKETCH
  101. 101. SKETCH quick drawing
  102. 102. SKETCH: define elements
  103. 103. SKETCH: space
  104. 104. WIREFRAME
  105. 105. WIREFRAME digital representation of ideas
  106. 106. Link Link Link Logo Image Image Image Image Image
  107. 107. WIREFRAME: architecture
  108. 108. WIREFRAME: refine space
  109. 109. WIREFRAME: sharable
  110. 110. MOCK-UP
  111. 111. MOCK-UP high-fidelity graphic
  112. 112. MOCK-UP: design
  113. 113. MOCK-UP: branding
  114. 114. MOCK-UP: feel
  115. 115. PROTOTYPE
  116. 116. PROTOTYPE working code with graphics
  117. 117. PROTOTYPE: interaction
  118. 118. prove ideas are possible
  119. 119. create reusable code
  120. 120. expedite development
  121. 121. discussions become more focused
  122. 122. discussion
  123. 123. sketch discussion
  124. 124. wireframe sketch discussion
  125. 125. mock-up wireframe sketch discussion
  126. 126. prototype mock-up wireframe sketch discussion
  127. 127. working code prototype mock-up wireframe sketch discussion
  128. 128. UX in Agile Teams
  129. 129. "Continuous attention to technical excellence  and good design enhances agility." http://agilemanifesto.org/principles.html
  130. 130. "Simplicity—the art of maximizing the amount of work not done—is essential." http://agilemanifesto.org/principles.html
  131. 131. sharing insights
  132. 132. pairing
  133. 133. prototyping
  134. 134. A/B testing
  135. 135. Integrating Agile UX into your project Rachel Kammerer @rlkammerer Rafael Petry @rafaelpetry

×