Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beyond the Toolkit

Nathan Curtis
August 02, 2018

Beyond the Toolkit

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

Nathan Curtis

August 02, 2018
Tweet

More Decks by Nathan Curtis

Other Decks in Design

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?

  33. 33

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

  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!