Unifying Agile and UX with Live Style Guides

One of the many emergent Agile UX tools enabling teams to more effectively design while building is the Live Style Guide.

It's a great example of applying Agile thinking to UX practice. Here, instead of documenting UI patterns in a traditional static document, the style guide is built using the actual production technology, making it a living and continuously evolving bridge between design and development.

During this session, members of Case Commons, Pivotal Labs, and Efficiency 2.0 will demo implementations of this technique, discuss practical considerations, and compare and contrast their various approaches. We'll follow their presentation with a panel-style Q&A.

Presenters:
Grant Hutchins - www.nertzy.com
Andrew Cramer - www.casecommons.org
Steve Berry - www.thoughtmerchants.com

Agile UX Meet-up: www.meetup.com/Agile-Experience-Design/

Transcript

1. Agile UX Meet-up Thursday, January 26, 12
2. Unifying Agile and UX with Live Style Guides Grant Hutchins Pivotal Labs @nertzy Andrew Cramer Case Commons @andy_cramer Steve Berry Efficiency 2.0 @thoughtmerchant Thursday, January 26, 12
3. Thursday, January 26, 12
4. A Live Style Guide is: Thursday, January 26, 12
5. A Live Style Guide is: A consolidated vocabulary of the application’s visual and interactive language. Thursday, January 26, 12
6. Thursday, January 26, 12
7. Thursday, January 26, 12
8. Thursday, January 26, 12
9. Case Commons (1 yr ago) Thursday, January 26, 12
10. Case Commons (1 yr ago) Dev UX PM Pivots Thursday, January 26, 12
11. Thursday, January 26, 12
12. History Thursday, January 26, 12
13. History • CSS was growing too big Thursday, January 26, 12
14. History • CSS was growing too big • Design team nonexistent / just starting up Thursday, January 26, 12
15. History • CSS was growing too big • Design team nonexistent / just starting up • Devs had different knowledge / interest in style Thursday, January 26, 12
16. Thursday, January 26, 12
17. Impetus Thursday, January 26, 12
18. Impetus • One-off styles for very similar widgets Thursday, January 26, 12
19. Impetus • One-off styles for very similar widgets • Inconsistent form treatments Thursday, January 26, 12
20. Impetus • One-off styles for very similar widgets • Inconsistent form treatments • Majority of CSS used on one page only Thursday, January 26, 12
21. Impetus • One-off styles for very similar widgets • Inconsistent form treatments • Majority of CSS used on one page only • Duplicated code Thursday, January 26, 12
22. Thursday, January 26, 12
23. Hard to visualize Thursday, January 26, 12
24. Hard to visualize Thursday, January 26, 12
25. Hard to visualize Thursday, January 26, 12
26. Hard to visualize • Inconsistencies across multiple pages • Each page on its own looked fine • Multiple browser windows to compare pages Thursday, January 26, 12
27. Thursday, January 26, 12
28. Hard to communicate Thursday, January 26, 12
29. Hard to communicate • Designers would use visual/structural naming Thursday, January 26, 12
30. Hard to communicate • Designers would use visual/structural naming • Developers would use functional naming Thursday, January 26, 12
31. Hard to communicate • Designers would use visual/structural naming • Developers would use functional naming • No good feedback loop Thursday, January 26, 12
32. Thursday, January 26, 12
33. Style guide driven development Thursday, January 26, 12
34. Style guide driven development • Specify new widget (visual + behavior + naming) Thursday, January 26, 12
35. Style guide driven development • Specify new widget (visual + behavior + naming) • Implement the widget in the style guide Thursday, January 26, 12
36. Style guide driven development • Specify new widget (visual + behavior + naming) • Implement the widget in the style guide • Re-use the widget throughout the site Thursday, January 26, 12
37. Thursday, January 26, 12
38. Retrofitting Thursday, January 26, 12
39. Retrofitting • Full site sweep of existing components Thursday, January 26, 12
40. Retrofitting • Full site sweep of existing components • If it shows up 3 or more times, add it Thursday, January 26, 12
41. Retrofitting • Full site sweep of existing components • If it shows up 3 or more times, add it • Name everything Thursday, January 26, 12
42. Retrofitting • Full site sweep of existing components • If it shows up 3 or more times, add it • Name everything • Ask design to offer improvements to names Thursday, January 26, 12
43. Thursday, January 26, 12
44. Discover repetition • Putting things next to each other reveals differences Thursday, January 26, 12
45. Discover repetition • Don't fix it yet, start a discussion • Add all conflicting versions of the same widgets • Putting things next to each other reveals differences Thursday, January 26, 12
46. Thursday, January 26, 12
47. Unifying Thursday, January 26, 12
48. Thursday, January 26, 12
49. Unified widget Thursday, January 26, 12
50. Thursday, January 26, 12
51. • Colors • Lines • Columns Not just widgets Thursday, January 26, 12
52. Thursday, January 26, 12
53. Hand off to Andrew Thursday, January 26, 12
54. Case Commons Thursday, January 26, 12
55. Case Commons Devs UX PM Pivots Thursday, January 26, 12
56. Dev UX PM Pivots Case Commons (Today) Thursday, January 26, 12
57. Internal Design Team at Case Commons Thursday, January 26, 12
58. Internal Design Team at Case Commons Design Team Context We make digital products that help Social Workers leverage technology when managing their case files. Team Breakdown There are 3 designers that pair with 3 product managers when researching, defining, and building new product in an agile process. When We Came Aboard The internal design team grew over time since last summer, first collaborating with IDEO designers and then owning the user experience design for Case Commons. Thursday, January 26, 12
59. • Shared reusable patterns at our fingertips via InDesign Library Palette • Helps to work to scale when laying out Information Architecture, “see what fits” Inheriting the Style Guide • Allowed us to create low-fidelity sketches that reference existing patterns in the guide • Shared annotation for use and naming conventions across Dev/Product team • Kinetic designs allowed for us to test the functionality and see how things worked Printed Style Guide Live Style Guide • Both: Were useful in on-boarding and becoming acquainted with the existing interactive patterns and styles Thursday, January 26, 12
60. Naming Conventions in the Live Style Guide Thursday, January 26, 12
61. Naming Conventions in the Live Style Guide A shared language to cut down on written specs and high-fidelity wireframes... Thursday, January 26, 12
62. Naming Conventions in the Live Style Guide A shared language to cut down on written specs and high-fidelity wireframes... “Use the Person Auto-Completer pattern in the Live Style Guide.” Thursday, January 26, 12
63. Naming Conventions in the Live Style Guide The Hammer Metaphor Thursday, January 26, 12
64. Naming Conventions in the Live Style Guide The Hammer Metaphor Thursday, January 26, 12
65. Naming Conventions in the Live Style Guide Thursday, January 26, 12
66. “I need a 10 inch wooden stick that can be griped with a human hand. Attached to the end of this wooden stick there needs to be an 8 ounce block of steel. The block of steel needs to be balanced and not exceeding 5 inches in length. The steel component must have a flat striking surface.” The Hammer Metaphor Designer Naming Conventions in the Live Style Guide Thursday, January 26, 12
67. “I need a 10 inch wooden stick that can be griped with a human hand. Attached to the end of this wooden stick there needs to be an 8 ounce block of steel. The block of steel needs to be balanced and not exceeding 5 inches in length. The steel component must have a flat striking surface.” The Hammer Metaphor Here you go! Developer Designer Naming Conventions in the Live Style Guide Thursday, January 26, 12
68. Naming Conventions in the Live Style Guide “OKAY NOW I need a 10 inch wooden stick that can be griped with a human hand. Attached to the end of this wooden stick there needs to be an 8 ounce block of steel. The block of steel needs to be balanced and not exceeding 5 inches in length. The steel component must have a flat striking surface................................ Developer Designer The Hammer Metaphor Thursday, January 26, 12
69. Naming Conventions in the Live Style Guide “OKAY NOW I need a 10 inch wooden stick that can be griped with a human hand. Attached to the end of this wooden stick there needs to be an 8 ounce block of steel. The block of steel needs to be balanced and not exceeding 5 inches in length. The steel component must have a flat striking surface................................ AND I need a curved metal end opposite the striking surface which is split in two on one end, converging in a wedge on the other.” Developer Designer The Hammer Metaphor Thursday, January 26, 12
70. Naming Conventions in the Live Style Guide “OKAY NOW I need a 10 inch wooden stick that can be griped with a human hand. Attached to the end of this wooden stick there needs to be an 8 ounce block of steel. The block of steel needs to be balanced and not exceeding 5 inches in length. The steel component must have a flat striking surface................................ Hmm...this sounds very familiar... AND I need a curved metal end opposite the striking surface which is split in two on one end, converging in a wedge on the other.” Developer Designer The Hammer Metaphor Thursday, January 26, 12
71. Naming Conventions in the Live Style Guide Thursday, January 26, 12
72. Naming Conventions in the Live Style Guide “I need a 10 inch wooden stick that can be griped with a human hand. Attached to the end of this wooden stick there needs to be an 8 ounce block of steel. The block of steel needs to be balanced and not exceeding 5 inches in length. The steel component must have a flat striking surface.” Here you go! Developer Designer The Hammer Metaphor Thursday, January 26, 12
73. Naming Conventions in the Live Style Guide Thursday, January 26, 12
74. Naming Conventions in the Live Style Guide Lets put this in our live style guide for future use! Developer Designer We’ll call it a “Hammer”! Hammer The Hammer Metaphor Thursday, January 26, 12
75. Naming Conventions in the Live Style Guide Thursday, January 26, 12
76. Naming Conventions in the Live Style Guide “I need a HAMMER... and I need a curved metal end opposite the striking surface which is split in two on one end, converging in a wedge on the other end.” Designer Developer The Hammer Metaphor Thursday, January 26, 12
77. Naming Conventions in the Live Style Guide “I need a HAMMER... and I need a curved metal end opposite the striking surface which is split in two on one end, converging in a wedge on the other end.” Designer Great, we already have a hammer... Hammer Here you go! Developer The Hammer Metaphor Thursday, January 26, 12
78. Naming Conventions in the Live Style Guide Thursday, January 26, 12
79. Naming Conventions in the Live Style Guide Lets put this new affordance in our live style guide for future use! Developer Designer We’ll call it a “Claw”! Hammer Claw The Hammer Metaphor Thursday, January 26, 12
80. Naming Conventions in the Live Style Guide Thursday, January 26, 12
81. Naming Conventions in the Live Style Guide Developer Designer We’ll call it the “Red drop down”! to Ongoing T T DESCRIPTION OF RELATIONSHIP RELATIONSHIP PERIOD Ongoing Start date Write about relationship Seclect relationship Cancel This person may already be on file Refine your search: Top 6 Results (56 total) Address Age (approximate) Mark Abett M, 32 51 S. New Jersey St., Indianapolis, IN 46204 Mark Brooster M, 20 51 S. New Jersey St., Indianapolis, IN 46204 Mark Piper M, 42 51 S. New Jersey St., Indianapolis, IN 46204 Dave Markster M, 12 51 S. New Jersey St., Indianapolis, IN 46204 Patricia Marksman M, 32 51 S. New Jersey St., Indianapolis, IN 46204 Patricia Marksman M, 32 51 S. New Jersey St., Indianapolis, IN 46204 X Arange By Not listed? Create as a new person Functionally descriptive. Visually descriptive. We’ll call it the “Non-modal filterable person auto-completer overlay”! Finding a balance when naming... Thursday, January 26, 12
82. Naming Conventions in the Live Style Guide Thursday, January 26, 12
83. Naming Conventions in the Live Style Guide End User to Ongoing T T DESCRIPTION OF RELATIONSHIP RELATIONSHIP PERIOD Ongoing Start date Write about relationship Seclect relationship Cancel This person may already be on file Refine your search: Top 6 Results (56 total) Address Age (approximate) Mark Abett M, 32 51 S. New Jersey St., Indianapolis, IN 46204 Mark Brooster M, 20 51 S. New Jersey St., Indianapolis, IN 46204 Mark Piper M, 42 51 S. New Jersey St., Indianapolis, IN 46204 Dave Markster M, 12 51 S. New Jersey St., Indianapolis, IN 46204 Patricia Marksman M, 32 51 S. New Jersey St., Indianapolis, IN 46204 Patricia Marksman M, 32 51 S. New Jersey St., Indianapolis, IN 46204 X Arange By Not listed? Create as a new person I use this when I’m searching for the names of people I want to collect from our system to add to a case file. It automatically completes suggested names as I begin to type. person auto-completer A human-centered approach to naming... Thursday, January 26, 12
84. From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12
85. From sketch to guide, Live Style Guide in the UX Design Process Supervisors who oversee Foster Home License revisions need to... • Navigate many data points to discern which changes to a licensed foster care home were made. • Remember what original data points these changes were made from. • Quickly revert changes that they disagree with. Contextualizing the design challenge... Whiteboard + Strategy Session 1 Thursday, January 26, 12
86. From sketch to guide, Live Style Guide in the UX Design Process Supervisors who oversee Foster Home License revisions need to... • Navigate many data points to discern which changes to a licensed foster care home were made. • Remember what original data points these changes were made from. • Quickly revert changes that they disagree with. Contextualizing the design challenge... Whiteboard + Strategy Session 1 Existing Patterns Thursday, January 26, 12
87. From sketch to guide, Live Style Guide in the UX Design Process Supervisors who oversee Foster Home License revisions need to... • Navigate many data points to discern which changes to a licensed foster care home were made. • Remember what original data points these changes were made from. • Quickly revert changes that they disagree with. New Pattern Contextualizing the design challenge... Whiteboard + Strategy Session 1 Existing Patterns Thursday, January 26, 12
88. From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12
89. From sketch to guide, Live Style Guide in the UX Design Process Naming Syntax: <Function> + <Visual Descriptor> 2 Design (UX) + User Story (PM) A Design Vocabulary + Grammar Thursday, January 26, 12
90. 2 Design (UX) + User Story (PM) A Design Vocabulary + Grammar From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12
91. From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12
92. Refine Design and Bid with Developers 3 From sketch to guide, Live Style Guide in the UX Design Process Collaborating with developers... Thursday, January 26, 12
93. From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12
94. Leverage the New Pattern 4 From sketch to guide, Live Style Guide in the UX Design Process Now we have a hammer... Revisions for Assessments and Ongoing Cases Foster Family Licensing is just one piece of the Casebook software, this pattern may be utilized when specific edits are requested to supervisors on Assessment and Ongoing Cases. Versioning Bi-Annual Case Submissions Every six months Ongoing Cases must be resubmitted, the Revision Bar can help call out which data points have changed on the case. Thursday, January 26, 12
95. From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12
96. From sketch to guide, Live Style Guide in the UX Design Process Designer Product Manager Whiteboard + Strategy Session Product Manager and User Experience Designer translate high-level policy and business requirements into user flows and new affordances. 1 Design (UX) + User Story (PM) Product Manager writes user stories and User Experience Designer creates designs based on whiteboard session. Designer Product Manager 2 Refine Design and Bid with Developers Product Manager and User Experience Designer present user stories and designs to developers. Developers collaborate to help refine designs and to bid on user stories. Developers + Designer + PM 3 Leverage the new Pattern Product Manager and User Experience Designer think about what ways they can strategically leverage new design pattern elsewhere in the product. Designer Product Manager 4 Thursday, January 26, 12
97. Hand off to Berry Thursday, January 26, 12
98. Thursday, January 26, 12
99. Efficiency 2.0 Thursday, January 26, 12
100. Efficiency 2.0 Devs UX PM Pivots Thursday, January 26, 12
101. Thursday, January 26, 12
102. A Truly Agile Task... Thursday, January 26, 12
103. A Truly Agile Task... Create a content page layout Thursday, January 26, 12
104. A Truly Agile Task... Create a content page layout • Right now Thursday, January 26, 12
105. A Truly Agile Task... Create a content page layout • Right now • In the application Thursday, January 26, 12
106. A Truly Agile Task... Create a content page layout • Right now • In the application • Using production code Thursday, January 26, 12
107. Thursday, January 26, 12
108. Whiteboard Time Thursday, January 26, 12
109. Thursday, January 26, 12
110. “Normal” Process Thursday, January 26, 12
111. “Normal” Process Picture Photoshop Mock-ups Slice & Dice Production Code Thursday, January 26, 12
112. “Normal” Process Picture Photoshop Mock-ups Slice & Dice Production Code Thursday, January 26, 12
113. Picture Photoshop Mock-ups Slice & Dice Production Code LIVE STYLE GUIDE Agile With Live Style Guides Thursday, January 26, 12
114. Thursday, January 26, 12
115. Folder Structure Thursday, January 26, 12
116. peer app controllers models views mockups temp.haml info_layout.haml Folder Structure Thursday, January 26, 12
117. peer app controllers models views mockups temp.haml info_layout.haml Folder Structure Thursday, January 26, 12
118. Demo Time! Thursday, January 26, 12
119. Back from Demo Thursday, January 26, 12
120. Thursday, January 26, 12
121. A Live Style Guide is: Thursday, January 26, 12
122. A Live Style Guide is: A consolidated vocabulary of the application’s visual and interactive language. Thursday, January 26, 12
123. Thursday, January 26, 12
124. Thursday, January 26, 12
125. Resources Slides • Jim Lindstrom’s UX Mag article http://uxmag.com/articles/anchoring-your-design-language-in-a-live-style-guide • Hammer metaphor by Karl Llewellyn http://www.inrhythm.com/ • CUB Energy Saver Live Style Guide http://www.CUBenergysaver.com/style_guides • Front-End Style Guides http://24ways.org/2011/front-end-style-guides Thursday, January 26, 12
126. Thursday, January 26, 12