Beyond the Toolkit

Spreading a Design System Across People & Products, presented at Les Meetups in Paris, France

Transcript

1. 1 Beyond the Toolkit Spreading a Design System Across People & Products Les Meetups by Backelite, Thursday August 2, 2018
2. 2 Bonjour! @nathanacurtis @nathanacurtis /in/nathancurtis
3. Working Design Systems Since 2006, Including… 3
4. Is this cohesive? 4
5. 5 2018 2016
6. 6 What is a design system?
7. 7 Color Typography Iconography Space Borders Shape Barlow Visual Style UI Components Heading L1 Body-Large Textbox Form Label Select Button Body-Medium Link System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account?
8. Product 8 Color Typography Iconography Space Borders Shape Barlow Visual Style UI Components Heading L1 Body-Large Textbox Form Label Select Button Body-Medium Link System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Sign In with your EightShapes account Email Address Sign In Password Forgot password? Don’t have an account? Sign up now. Create an account
9. 9 Barlow Visual Style UI Components System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Pag
10. 10 Barlow Visual Style UI Components System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Page Designer
11. 11 Barlow Visual Style UI Components System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Page Designer Engineer Sign In Page Create Account Page Forgot Password Engineer 2
12. Why start a design system? 12 Top 2 Reasons Cohesiveness / Consistency by designers, management/leaders Efficiency for engineers
13. Why start a design system? 13 Top 2 Reasons Cohesiveness / Consistency by designers, management/leaders Efficiency for engineers Additional Reasons Quality of the digital experience, practice, and outputs Scale/Reuse as the enterprise expands Vocabulary/Language particularly across design & engineering Portability organizationally of staff across product teams Accessibility because it’s the law
14. Simple Questions 14 What is our design system? What is the scope of our design system? (the “Parts”) Who makes the system? (the “People”) Who uses the system? (the “Products”)
15. 15 What is our design system?
16. 16 ALWAYS A Design System is… Visual Style UI Components released as… HTML/CSS Code
 Tokens documented as… Web-Based “Living Doc” Live Code Samples made by… Core Team to serve… Teams/Squads Making Digital Experiences
17. 17 MORE OFTEN Editorial Accessibility JavaScript Code (React, Vue, CustomElement) Design Assets Process Doc Presentation Decks Key Contributors ALWAYS A Design System is… Visual Style UI Components released as… HTML/CSS Code
 Tokens documented as… Web-Based “Living Doc” Live Code Samples made by… Core Team to serve… Teams/Squads Making Digital Experiences
18. Defining Design Systems bit.ly/8s-define-design-systems 18 MORE OFTEN Editorial Accessibility JavaScript Code (React, Vue, CustomElement) Design Assets Process Doc Presentation Decks Key Contributors ALWAYS A Design System is… Visual Style UI Components released as… HTML/CSS Code
 Tokens documented as… Web-Based “Living Doc” Live Code Samples made by… Core Team to serve… Teams/Squads Making Digital Experiences LESS OFTEN UX Patterns Data Viz/Charts Brand Page Types/Templates Cross-Platform Code (+iOS,Android,WMP,…) Video Training
 Animated Prototypes Wide Community * Updated in 2018
19. Activity: Define Your System 19 A Design System is… released as… documented as… made by… to serve… Scope Outputs Easy-to-remember URL People Adopting products
20. Activity: Define Your System Worksheet 20 Our Design System is… documented at released as made by to serve FEATURES OUTPUTS URL NAMES OF PEOPLE TEAM(S) / LINES OF BUSINESS
21. One Company’s Definition 21 A Design System is… released as… documented as… made by… to serve… Visual Style, Components, & Accessibility Sketch for Designers, React for Engineers apollo.ourcompany.com DS Team + Key Contributors All of .com
22. 22 DISCUSSION PROMPTS How clear are boundaries of what is in and out? How similar are the terms? How specific are outputs? How specific is the team? 
 Did they use real names?
23. 23 What is the scope of our design system?
24. Principles of Design Systems bit.ly/8s-principles-systems 24 Include what’s shared. Omit what’s not.
25. Picking Parts, Products & People bit.ly/8s-parts-products-people 25
26. 26 VISUAL LANGUAGE Color Palettes, by category Contrast Meaning Swatches COMPONENTS Action bar/sheet Badges Breadcrumb Button Button Group Calendar picker Caption Card Chart Chat Checkbox Code sample Combo-box Comments Contact us Data tables Typography Hierarchy Weights / types Web fonts Baseline grid Dialog Drawer/accordion Dropdown Filter Toolbar Flags Footer Footnotes Header navigation Hero billboard Hero carousel Legend Link List Loader Local navigation Maps Iconography Pictograms Illustration Icon fonts Alignment Menu Messaging (“Top Hat”) Messaging (Block) Messaging (Inline Error) Messaging (Toast) Modal Navigation Megamenu Notification Pagination Panel Pills Popovers Progress bar Prompts Pull quote Radio Button Motion Principles Timing Types Transitions Range Slider Ratings Reviews Rich text editor Search Sidebar Site/App navigation Slider Social networking Status (alpha, beta,...) Switch Tables Tabs Tags / chips / pills Text Input Thumbnails / #-ups Space Units / measurments Metrics and keylines Structure Photography Tips / tutorial Toolbar Tooltips Video & media Widgets Add other... UI PATTERNS Authentication Create Account Form Structure Settings Site / app structure DESIGN ASSETS AI, Sketch templates Swatch palettes Fonts Icons Prototyping Snippets RESEARCH & USERS User needs Personas Research techniques Surveys A/B, multivar. testing Data presentation Onboarding / First Time User Experience Search Header / Footer EDITORIAL Voice & tone Writing for the web Word list Capitalization Punctuation PRACTICES Accessibility Prototyping Performance SEO Design shares Navigation Add to List Compare Items Triggers / Cues BRANDING Identity Logo(s) Tagline(s) Partnerships Themes GETTING INVOLVED Request New Parts Give Feedback Request Audit Present at a Share Contribute PAGE TYPES & LAYOUTS Marketing Home Category Dashboard Research Search results UTILITIES Constants / tokens Mixins Helpers Customize ABOUT THE PROGRAM Home page Principles / pillars Getting started FAQ Version history Article Discussion Grids/Panels for apps Paneling/transitions Responsive/breakpoints Screen sizes CODING STANDARDS Predefined Markup Browsers & Devices CSS Namepaces Javascript APIs Extensibility ABOUT THE TEAM Team Recruiting / jobs OTHER? PARTS NAME DATE Identify features for… Only your product? Your product suite? All company products?
27. 27 1 Draw a thick line through irrelevant categories 2 Circle up to 5 of the most important categories 3 Check up to 25 of the most important features
28. On the Second Page… 28 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ Color Icons Tabs Button Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 4 Write the 10 most important parts from page 1 in the Part column. 5 Weight relative value of those top 10 parts using up to 25 tally marks.
29. 29 DISCUSSION PROMPTS “We should focus on [???] because…” “We don’t care about [???] because…” “We should exclude [???] because…”
30. Post-Parts Activity Data Collection 30
31. A Design System isn’t a Project. It’s a Product, Serving Products. bit.ly/8s-system-is-product 31 A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.
32. 32 Who makes the system?
34. Overlords Don’t Scale 34
35. Models of Who Makes a Design System 35 Solitary Central Team Federated Community
36. 36 1 Enable a core group to stabilize models & tools 2 Gradually grow to
 engage the community
37. The Salesforce Team Model for Scaling a Design System bit.ly/sf-system-team-model At Salesforce, a Blending Both & Pairing “Cyclically” 37
38. 38 But, can’t I just get one of my staff designers or developers to do this on Friday afternoons? Typical design or engineering manager, reluctant to relinquish capacity
39. Designing a Systems Team / Stage 1: Spare Timers 39
40. Designing a Systems Team / Stage 2: Allocated Individuals 40 FED VISUAL FED OR UX OR
41. Each Organization Supporting “Their” Community 41 Tokens HTML/CSS Design Assets Doc Site Design Community Engineering Community Design “Team” Engineering “Team”
42. System Team as a Product Team Product Team Product Team Product Team Product Team Product Team Product Team Product Team Product Team Product Team Product Team System Team Supporting a Product Community 42 Tokens HTML/CSS Design Assets Doc Site
43. Designing a Systems Team / Stage 3: Multi-Disciplinary Team 43 VISUAL Small FED LEAD VISUAL Medium FED LEAD UX Large LEAD FED FED FED FED FED FED VISUAL VISUAL LEAD CONTENT Product Design Engineering Other/“Speciality”
44. Designing a Systems Team / Stage 4: Team of Teams 44 Leadership UI Design & Engineering Creative Product Design Engineering Other/“Speciality” Prototypers (as Service) Dev Tools/Ops Accessibility
45. Design Systems at GitHub https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542 Scaling the Team, Over Time 45
46. Proposing to Scale a Team 46 LEAD DESIGN FED FED FED DESIGN CONTENT FED ACCESS. Must Should Could Capacity 100% 50% Product Design Engineering Other/“Speciality”
47. Blend Continuity with Rotation 47 LEAD DESIGN FED FED FED DESIGN CONTENT FED ACCESS. Permanent? Rotating? Capacity 100% 50% Product Design Engineering Other/“Speciality”
48. Half Timers: Is It Worth the Risk? 48 LEAD DESIGN FED FED FED DESIGN CONTENT FED ACCESS. Capacity 100% 50% Product Design Engineering Other/“Speciality” Commitments to the “Other Team” Doesn’t relinquish? Unpredictably take it back? Tribal guilt?
49. Design System Leader(s) & Manager(s) bit.ly/8s-system-leaders-managers Who’s Leading and Managing? 49 Find a full job description at… System Leader Visual and/or tech direction Direct scope Form the mission Quarterly one-on-ones Team growth and culture Product Owner Clarify scope & customer needs Resolve priorities Monitor use and success Coordinate w/ Product Align research activity Scrum Master Deliver value predictably Manage backlog & sprints Facilitate standup & planning Schedule activities Negotiate staff capacity
50. 50 First things first: You must have total support from the top. [A Google-wide design initiative] required the vision of a CEO who could rally the entire company to make it happen. Jon Wiley @jonwiley, Original Member of Google Material team
51. Aligning Across Organizational Units 51 VP, Design CTO VP, Product VP, Ops Managers Directors Leadership Contributors System Core Team with members originating from across teams Steering Committee that attend sprint reviews and planning sessions Sponsors to whom the system team reports quarterly Product Design Engineering Other/“Speciality”
52. System Team Members are Connectors 52 CONNECTOR DRIVER WATCHER INFLUENCER IGNORER
53. This Project Rocked! That Project Sucked? bit.ly/8s-projects-rocked-sucked 53 Alignment Work Wasn’t Enjoyable
54. Designer & Engineer Available Skills 54 Design Front End Dev Research Writing Product management Testing meticulousness System thinking Writing well Community connecting Pitching and aligning organizational change Easy to find Harder to find
55. Activity: Design Your System Team 55 Capacity 100% 50% [ROLE] [ROLE] [ROLE] [ROLE] [ROLE] [ROLE] 1 Identify team members by role or discipline 2 Draw capacity bar per person 3 Identify rotating members 4 Include real names
57. 57 DISCUSSION PROMPTS What roles do we need? What quantity and capacity of each? Will it have permanent and rotating members? Do we blend in-house and vendor staff?
58. 58 Who uses the system?
59. 25 Leaders of 100+ Designer Org Meet for 2 Days 59
60. Account
 Hub 60
61. “I want a system for all of this” 61 Marketing Site Account
 Setup Account
 Hub
62. Surveying Attitudes in Digital Orgs: “Cohesiveness…” 62 0 10 20 30 40 …is essential to a customer journey 0 10 20 30 40 Strongly Disagree Disagree Neutral Agree Strongly Agree …differentiates us from competitors 0 10 20 30 40 …adds value for existing customers 0 10 20 30 40 …improves how we attract customers
63. 63 0 10 20 30 40 Strongly Disagree Disagree Neutral Agree Strongly Agree 0 10 20 30 40 Is cohesiveness essential?
 Yes! Are we doing well?
 No, Not Yet.
64. 64 Imagine 18 months from now, and the design system failed. 
 Describe two (or more) reasons why.
65. So many reasons for possible failure… 65 Lack of “buy in” Poor quality Poor communication Teams ignore / override system Team productivity goes down Insufficient staff capacity Too big / Too small Difficult to integrate Lack of support Lacks needed features Threatens autonomy Poor / no documentation Inaccessible tools or doc Ineffective contribution process Didn’t involve IT or design Lack of design agreement
66. 66 #2 BIGGEST THREAT
 The system isn’t made for us. Since it’s different, we can’t use it.
67. 67 Button Button That Sells Your system offers a… Our product has a proven…
68. Systems are Extensible 68 Systems offer reusable components made with 1,000s lines of code. Making a button red requires changing 1 line.
69. 69 DON’T Command that ones size fits all.
 DO Encourage teams to configure, extend and — if needed — override.
70. 70 #1 BIGGEST THREAT Teams agree it’s important. Teams say they want to adopt. Yet, teams never prioritize it.
71. 71 Value is realized when products ship features that use the system.
72. 72 Pressure from management means we've been on the feature treadmill for so long that we can't get off. – Most Product Managers & Engineers
73. Make Adoption Incremental 73 Help me understand how to order changes over time as a roadmap. I want to be able to integrate the system one step at a time. Ideally, I’d use small parts at a time, integrating as I work on features. Is it ok to update little-by-little? Won’t our product become internally inconsistent?
74. Adopting Design Systems, Fast or Slow 74 ✅✅◻◻ Big Bang in 2 to 3 sprints Incremental over many, many months
75. Step-by-Step Adoption Model 75 0
 Non-
 Adopter Branding is out of date Product doesn’t comply Interface is inconsistent with latest conventions 1
 Dependency 
 & Plan Package.json links system Used ≥1 token variable(s) Groomed backlog with tasks for system adoption Roadmap includes months when steps will be done 2
 Visual
 Style Color Typography Icons Space Replaced variables and rules via tokens 3
 Core
 Components Buttons Forms Controls: Radios, Checkboxes, Text, Select Headings & Long Form Typography List Groups 4
 All
 Components Data Tables Modals Dialogs Pills Tabs… No more than 9 months behind latest minor release AND No more than 6 months behind latest minor release AND No more than 3 months behind latest minor release AND Adopting Design Systems http://bit.ly/8s-adopting-systems
76. Discussing Adoption with a Product Team 76 Will you adopt? When will you adopt? When will your roadmap and backlog reflect it?
 When will you integrate the npm package? When will you have a font or color in production? 1 Dependency & Plan 2 Visual Style
77. Team-by-Team Adoption 77 August September October November December Homepage
 & Category Search Page Product Page Cart & Checkout TEAMS Account Management 2 Visual Style 2 Visual Style 2 Visual Style 4 All Components 2 Visual Style 0 Non Adopter 1 Depend & Plan 0 Non Adopter 0 Non Adopter 0 Non Adopter 1 Depend & Plan 0 Non Adopter 1 Depend & Plan 4 All Components 4 All Components 4 All Components 2 Visual Style 0 Non Adopter 1 Depend & Plan 1 Depend & Plan 4 All Components 4 All Components 3 Core Components 3 Core Components 4 All Components
78. Monitoring Adoption Across 60+ Products 78
79. Products, too! 79 1. Freelist products 2. Prioritize, such as Flagship, Secondary, and “The Rest”
80. 80 DISCUSSION PROMPTS Who coordinates and monitors adoption? When do you start each? Who supports teams with clarifications, fixes, and requests?
81. Principles of Design Systems bit.ly/8s-principles-systems 81 Products own their destiny.
 System equip products to realize that destiny.
82. http://design.systems (Design Systems Slack) 82
83. More On Medium.com… 83 Read more on systems topics including: Strategy & Planning Design & Development Adoption Documentation Process Teams & Operations bit.ly/8s-systems-medium
84. 84 Merci beaucoup!