Tweet
Tweet

Slide 1

Slide 1 text

Agile UX Meet-up Thursday, January 26, 12

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Thursday, January 26, 12

Slide 4

Slide 4 text

A Live Style Guide is: Thursday, January 26, 12

Slide 5

Slide 5 text

A Live Style Guide is: A consolidated vocabulary of the application’s visual and interactive language. Thursday, January 26, 12

Slide 6

Slide 6 text

Thursday, January 26, 12

Slide 7

Slide 7 text

Thursday, January 26, 12

Slide 8

Slide 8 text

Thursday, January 26, 12

Slide 9

Slide 9 text

Case Commons (1 yr ago) Thursday, January 26, 12

Slide 10

Slide 10 text

Case Commons (1 yr ago) Dev UX PM Pivots Thursday, January 26, 12

Slide 11

Slide 11 text

Thursday, January 26, 12

Slide 12

Slide 12 text

History Thursday, January 26, 12

Slide 13

Slide 13 text

History • CSS was growing too big Thursday, January 26, 12

Slide 14

Slide 14 text

History • CSS was growing too big • Design team nonexistent / just starting up Thursday, January 26, 12

Slide 15

Slide 15 text

History • CSS was growing too big • Design team nonexistent / just starting up • Devs had different knowledge / interest in style Thursday, January 26, 12

Slide 16

Slide 16 text

Thursday, January 26, 12

Slide 17

Slide 17 text

Impetus Thursday, January 26, 12

Slide 18

Slide 18 text

Impetus • One-off styles for very similar widgets Thursday, January 26, 12

Slide 19

Slide 19 text

Impetus • One-off styles for very similar widgets • Inconsistent form treatments Thursday, January 26, 12

Slide 20

Slide 20 text

Impetus • One-off styles for very similar widgets • Inconsistent form treatments • Majority of CSS used on one page only Thursday, January 26, 12

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Thursday, January 26, 12

Slide 23

Slide 23 text

Hard to visualize Thursday, January 26, 12

Slide 24

Slide 24 text

Hard to visualize Thursday, January 26, 12

Slide 25

Slide 25 text

Hard to visualize Thursday, January 26, 12

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Thursday, January 26, 12

Slide 28

Slide 28 text

Hard to communicate Thursday, January 26, 12

Slide 29

Slide 29 text

Hard to communicate • Designers would use visual/structural naming Thursday, January 26, 12

Slide 30

Slide 30 text

Hard to communicate • Designers would use visual/structural naming • Developers would use functional naming Thursday, January 26, 12

Slide 31

Slide 31 text

Hard to communicate • Designers would use visual/structural naming • Developers would use functional naming • No good feedback loop Thursday, January 26, 12

Slide 32

Slide 32 text

Thursday, January 26, 12

Slide 33

Slide 33 text

Style guide driven development Thursday, January 26, 12

Slide 34

Slide 34 text

Style guide driven development • Specify new widget (visual + behavior + naming) Thursday, January 26, 12

Slide 35

Slide 35 text

Style guide driven development • Specify new widget (visual + behavior + naming) • Implement the widget in the style guide Thursday, January 26, 12

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Thursday, January 26, 12

Slide 38

Slide 38 text

Retrofitting Thursday, January 26, 12

Slide 39

Slide 39 text

Retrofitting • Full site sweep of existing components Thursday, January 26, 12

Slide 40

Slide 40 text

Retrofitting • Full site sweep of existing components • If it shows up 3 or more times, add it Thursday, January 26, 12

Slide 41

Slide 41 text

Retrofitting • Full site sweep of existing components • If it shows up 3 or more times, add it • Name everything Thursday, January 26, 12

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Thursday, January 26, 12

Slide 44

Slide 44 text

Discover repetition • Putting things next to each other reveals differences Thursday, January 26, 12

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Thursday, January 26, 12

Slide 47

Slide 47 text

Unifying Thursday, January 26, 12

Slide 48

Slide 48 text

Thursday, January 26, 12

Slide 49

Slide 49 text

Unified widget Thursday, January 26, 12

Slide 50

Slide 50 text

Thursday, January 26, 12

Slide 51

Slide 51 text

• Colors • Lines • Columns Not just widgets Thursday, January 26, 12

Slide 52

Slide 52 text

Thursday, January 26, 12

Slide 53

Slide 53 text

Hand off to Andrew Thursday, January 26, 12

Slide 54

Slide 54 text

Case Commons Thursday, January 26, 12

Slide 55

Slide 55 text

Case Commons Devs UX PM Pivots Thursday, January 26, 12

Slide 56

Slide 56 text

Dev UX PM Pivots Case Commons (Today) Thursday, January 26, 12

Slide 57

Slide 57 text

Internal Design Team at Case Commons Thursday, January 26, 12

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

• 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

Slide 60

Slide 60 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 61

Slide 61 text

Naming Conventions in the Live Style Guide A shared language to cut down on written specs and high-fidelity wireframes... Thursday, January 26, 12

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Naming Conventions in the Live Style Guide The Hammer Metaphor Thursday, January 26, 12

Slide 64

Slide 64 text

Naming Conventions in the Live Style Guide The Hammer Metaphor Thursday, January 26, 12

Slide 65

Slide 65 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 66

Slide 66 text

“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

Slide 67

Slide 67 text

“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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Naming Conventions in the Live Style Guide Thursday, January 26, 12

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12

Slide 89

Slide 89 text

From sketch to guide, Live Style Guide in the UX Design Process Naming Syntax: + 2 Design (UX) + User Story (PM) A Design Vocabulary + Grammar Thursday, January 26, 12

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

From sketch to guide, Live Style Guide in the UX Design Process Thursday, January 26, 12

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Hand off to Berry Thursday, January 26, 12

Slide 98

Slide 98 text

Thursday, January 26, 12

Slide 99

Slide 99 text

Efficiency 2.0 Thursday, January 26, 12

Slide 100

Slide 100 text

Efficiency 2.0 Devs UX PM Pivots Thursday, January 26, 12

Slide 101

Slide 101 text

Thursday, January 26, 12

Slide 102

Slide 102 text

A Truly Agile Task... Thursday, January 26, 12

Slide 103

Slide 103 text

A Truly Agile Task... Create a content page layout Thursday, January 26, 12

Slide 104

Slide 104 text

A Truly Agile Task... Create a content page layout • Right now Thursday, January 26, 12

Slide 105

Slide 105 text

A Truly Agile Task... Create a content page layout • Right now • In the application Thursday, January 26, 12

Slide 106

Slide 106 text

A Truly Agile Task... Create a content page layout • Right now • In the application • Using production code Thursday, January 26, 12

Slide 107

Slide 107 text

Thursday, January 26, 12

Slide 108

Slide 108 text

Whiteboard Time Thursday, January 26, 12

Slide 109

Slide 109 text

Thursday, January 26, 12

Slide 110

Slide 110 text

“Normal” Process Thursday, January 26, 12

Slide 111

Slide 111 text

“Normal” Process Picture Photoshop Mock-ups Slice & Dice Production Code Thursday, January 26, 12

Slide 112

Slide 112 text

“Normal” Process Picture Photoshop Mock-ups Slice & Dice Production Code Thursday, January 26, 12

Slide 113

Slide 113 text

Picture Photoshop Mock-ups Slice & Dice Production Code LIVE STYLE GUIDE Agile With Live Style Guides Thursday, January 26, 12

Slide 114

Slide 114 text

Thursday, January 26, 12

Slide 115

Slide 115 text

Folder Structure Thursday, January 26, 12

Slide 116

Slide 116 text

peer app controllers models views mockups temp.haml info_layout.haml Folder Structure Thursday, January 26, 12

Slide 117

Slide 117 text

peer app controllers models views mockups temp.haml info_layout.haml Folder Structure Thursday, January 26, 12

Slide 118

Slide 118 text

Demo Time! Thursday, January 26, 12

Slide 119

Slide 119 text

Back from Demo Thursday, January 26, 12

Slide 120

Slide 120 text

Thursday, January 26, 12

Slide 121

Slide 121 text

A Live Style Guide is: Thursday, January 26, 12

Slide 122

Slide 122 text

A Live Style Guide is: A consolidated vocabulary of the application’s visual and interactive language. Thursday, January 26, 12

Slide 123

Slide 123 text

Thursday, January 26, 12

Slide 124

Slide 124 text

Thursday, January 26, 12

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

Thursday, January 26, 12