Steve Berry, Grant Hutchins, and I presented to the NYC UX/Agile MeetUp group on how to leverage a Live Style Guide when designing products in an Agile process.

1. Agile UX Meet-up

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

4. A Live Style Guide is:

5. A Live Style Guide is:
A consolidated vocabulary of the
application’s visual and interactive
language.

9. Case Commons (1 yr ago)

10. Case Commons (1 yr ago)
Dev UX
PM
Pivots

12. History

13. History
• CSS was growing too big

14. History
• CSS was growing too big
• Design team nonexistent / just starting up

15. History
• CSS was growing too big
• Design team nonexistent / just starting up
• Devs had different knowledge / interest in
style

17. Impetus

18. Impetus
• One-off styles for very similar widgets

19. Impetus
• One-off styles for very similar widgets
• Inconsistent form treatments

20. Impetus
• One-off styles for very similar widgets
• Inconsistent form treatments
• Majority of CSS used on one page only

21. Impetus
• One-off styles for very similar widgets
• Inconsistent form treatments
• Majority of CSS used on one page only
• Duplicated code

23. Hard to visualize

24. Hard to visualize

25. Hard to visualize

26. Hard to visualize
• Inconsistencies across multiple pages
• Each page on its own looked fine
• Multiple browser windows to compare pages

28. Hard to communicate

29. Hard to communicate
• Designers would use visual/structural
naming

30. Hard to communicate
• Designers would use visual/structural
naming
• Developers would use functional naming

31. Hard to communicate
• Designers would use visual/structural
naming
• Developers would use functional naming
• No good feedback loop

33. Style guide driven development

34. Style guide driven development
• Specify new widget (visual + behavior +
naming)

35. Style guide driven development
• Specify new widget (visual + behavior +
naming)
• Implement the widget in the style guide

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

38. Retrofitting

39. Retrofitting
• Full site sweep of existing components

40. Retrofitting
• Full site sweep of existing components
• If it shows up 3 or more times, add it

41. Retrofitting
• Full site sweep of existing components
• If it shows up 3 or more times, add it
• Name everything

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

44. Discover repetition
• Putting things next to each other reveals differences

45. Discover repetition
• Putting things next to each other reveals differences
• Don't fix it yet, start a discussion
• Add all conflicting versions of the same
widgets

47. Unifying

49. Unified widget

51. Not just widgets
• Colors
• Lines
• Columns

53. Hand off to Andrew

54. Case Commons

55. Case Commons
Devs UX
PM
Pivots

56. Case Commons (Today)
Dev UX
PM
Pivots

57. Internal Design Team at Case Commons

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.

59. Inheriting the Style Guide
Printed Style Guide Live Style Guide
• Shared reusable patterns at our fingertips • Allowed us to create low-fidelity sketches
via InDesign Library Palette that reference existing patterns in the guide
• Helps to work to scale when laying out • Shared annotation for use and naming
Information Architecture, “see what fits” conventions across Dev/Product team
• Kinetic designs allowed for us to test the
functionality and see how things worked
• Both: Were useful in on-boarding and becoming acquainted
with the existing interactive patterns and styles

60. Naming Conventions in the Live Style Guide

61. Naming Conventions in the Live Style Guide
A shared language to cut down on written
specs and high-fidelity wireframes...

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.”

63. Naming Conventions in the Live Style Guide
The Hammer Metaphor

64. Naming Conventions in the Live Style Guide
The Hammer Metaphor

65. Naming Conventions in the Live Style Guide

66. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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.”
Designer

67. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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
Here you go! 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

68. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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

69. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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
AND I need a curved in length. The steel
exceeding 5 inches
component must have a flat striking
metal end opposite the
surface................................
striking surface which is
split in two on one end,
converging in a wedge
on the other.”
Developer Designer

70. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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
Hmm...this sounds needs to be balanced and not
very familiar... AND I need a curved in length. The steel
exceeding 5 inches
component must have a flat striking
metal end opposite the
surface................................
striking surface which is
split in two on one end,
converging in a wedge
on the other.”
Developer Designer

71. Naming Conventions in the Live Style Guide

72. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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
Here you go! 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

73. Naming Conventions in the Live Style Guide

74. Naming Conventions in the Live Style Guide
The Hammer Metaphor
Hammer
Lets put this in
our live style guide We’ll call it a
for future use! “Hammer”!
Developer Designer

75. Naming Conventions in the Live Style Guide

76. Naming Conventions in the Live Style Guide
The Hammer Metaphor
“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.”
Developer Designer

77. Naming Conventions in the Live Style Guide
The Hammer Metaphor
Great, we already
have a hammer...
“I need a HAMMER...
Hammer
and I need a curved metal end
opposite the striking surface
which is split in two on one
Here you go! end, converging in a wedge on
the other end.”
Developer Designer

78. Naming Conventions in the Live Style Guide

79. Naming Conventions in the Live Style Guide
The Hammer Metaphor
Hammer
Claw
Lets put this new
affordance in
We’ll call it a
our live style guide
“Claw”!
for future use!
Developer Designer

80. Naming Conventions in the Live Style Guide

81. Naming Conventions in the Live Style Guide
Finding a balance when naming...
Seclect relationship
This person may already be on file
RELATIONSHIP PERIOD
Refine your search:
Start date to Age Ongoing
Functionally descriptive. Address (approximate)
Ongoing
Top 6 Results (56 total) Arange By
Visually descriptive.
Mark Abett
DESCRIPTION OF RELATIONSHIP M, 32
We’ll call it the Write about relationship Jersey St., Indianapolis, IN 46204
51 S. New
“Non-modal filterable Mark Brooster M, 20
person auto-completer 51 S. New Jersey St., Indianapolis, IN 46204 We’ll call it the
overlay”! Mark Piper M, 42 “Red drop down”!
Cancel
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
Not listed? Create as a new person
Developer Designer

82. Naming Conventions in the Live Style Guide

83. Naming Conventions in the Live Style Guide
A human-centered approach to naming...
Seclect relationship
This person may already be on file
I use this when I’m searching
RELATIONSHIP PERIOD
Refine your search:
Start date
Address to Age Ongoing
(approximate)
for the names of people I Top 6 Results (56 total)
Ongoing
Arange By
want to collect from our Mark Abett
DESCRIPTION OF RELATIONSHIP M, 32
system to add to a case file. Write about relationship Jersey St., Indianapolis, IN 46204
51 S. New
It automatically completes Mark Brooster M, 20
suggested names as I begin 51 S. New Jersey St., Indianapolis, IN 46204
to type. Mark Piper
Cancel
51 S. New Jersey St., Indianapolis, IN 46204
M, 42
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
person auto-completer
M, 32
51 S. New Jersey St., Indianapolis, IN 46204
Not listed? Create as a new person
End User

84. From sketch to guide, Live Style Guide in the UX Design Process

85. From sketch to guide, Live Style Guide in the UX Design Process
1 Whiteboard + Strategy Session
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 or require further
revisions.
Contextualizing the design challenge...

86. From sketch to guide, Live Style Guide in the UX Design Process
1 Whiteboard + Strategy Session
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 or require further
revisions.
Existing Patterns
Contextualizing the design challenge...

87. From sketch to guide, Live Style Guide in the UX Design Process
1 Whiteboard + Strategy Session
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 or require further
revisions.
New Pattern Existing Patterns
Contextualizing the design challenge...

88. From sketch to guide, Live Style Guide in the UX Design Process

89. From sketch to guide, Live Style Guide in the UX Design Process
2 Design (UX) + User Story (PM)
Naming Syntax:
Function + Visual Descriptor
A Design Vocabulary + Grammar

90. From sketch to guide, Live Style Guide in the UX Design Process
2 Design (UX) + User Story (PM)
A Design Vocabulary + Grammar

91. From sketch to guide, Live Style Guide in the UX Design Process

92. From sketch to guide, Live Style Guide in the UX Design Process
3 Refine Design and Bid with Developers
Collaborating with developers...

93. From sketch to guide, Live Style Guide in the UX Design Process

94. From sketch to guide, Live Style Guide in the UX Design Process
4 Leverage the New Pattern
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.
Now we have a hammer...

95. From sketch to guide, Live Style Guide in the UX Design Process

96. From sketch to guide, Live Style Guide in the UX Design Process
Whiteboard + Strategy Session
1 Product Manager and User Experience Designer translate
high-level policy and business requirements into user flows
Product
Designer
and new affordances.
Manager
Design (UX) + User Story (PM)
2 Product Manager writes user stories and User Experience
Designer creates designs based on whiteboard session.
Product
Designer
Manager
Refine Design and Bid with Developers
3 Product Manager and User Experience Designer present user
stories and designs to developers. Developers collaborate to
Developers + Designer + PM
help refine designs and to bid on user stories.
Leverage the new Pattern
4 Product Manager and User Experience Designer think about
what ways they can strategically leverage new design pattern
Product
Designer
elsewhere in the product.
Manager

97. Hand off to Berry

99. Efficiency 2.0

100. Efficiency 2.0
Devs UX
PM
Pivots

102. A Truly Agile Task...

103. A Truly Agile Task...
Create a content page layout

104. A Truly Agile Task...
Create a content page layout
• Right now

105. A Truly Agile Task...
Create a content page layout
• Right now
• In the application

106. A Truly Agile Task...
Create a content page layout
• Right now
• In the application
• Using production code

108. Whiteboard Time

110. “Normal” Process

111. “Normal” Process
Photoshop Production
Picture Slice & Dice
Mock-ups Code

112. “Normal” Process
Photoshop Production
Picture Slice & Dice
Mock-ups Code

113. Agile With Live Style Guides
Photoshop Production
Picture Slice & Dice
Mock-ups Code
LIVE
STYLE GUIDE

115. Folder
Structure

116. peer
app
controllers
models
views
mockups
temp.haml
Folder
Structure info_layout.haml

117. peer
app
controllers
models
views
mockups
temp.haml
Folder
Structure info_layout.haml

118. Demo Time!

119. Back from Demo

121. A Live Style Guide is:

122. A Live Style Guide is:
A consolidated vocabulary of the
application’s visual and interactive
language.

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