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

Beyond the Toolkit, Tel Aviv February 2019

Nathan Curtis
February 11, 2019

Beyond the Toolkit, Tel Aviv February 2019

Nathan Curtis

February 11, 2019
Tweet

More Decks by Nathan Curtis

Other Decks in Design

Transcript

  1. 1 Beyond the Toolkit By Nathan Curtis UXI Live, Monday,

    February 11, 2019 Spreading a Design System Across People & Products
  2. Is this cohesive? 2

  3. 3 https://material.io/ Color Cards Lists

  4. 4 2018 2016

  5. Why start a design system? 5 Cohesiveness / Consistency by

    designers, management/leaders Efficiency for engineers
  6. Why start a design system? 6 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 Top 2 Reasons
  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. P P P P P P Product Barlow Visual Style

    UI Components System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Product Product Product Product Product Product 6 Products?
  13. Barlow Visual Style UI Components System Sign In Forgot Password?

    First Name Sign In Elaborating on a header Don't have an account? So Many Products! P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P
  14. 14 1. What is our design system? (the “Parts”) 2.

    How do we make a system? (the “Process”) 2. Who makes the system? (the “People”) 3. Who uses the system? (the “Products”)
  15. 15 What is our design system? QUESTION #1 of 4

  16. Activity: Define Your System 16 Style, Components, UX Patterns, …

    Design Assets, Code, Doc Documentation Site People Teams (as Adopters) Our System is… released as… documented as… made by… to serve…
  17. A Small Startup 17 Our System is… released as… documented

    as… made by… to serve… Visual Style + Components Sketch for Designers, Vue for Developers A Little Bit on Confluence 1 Designers + 2 Developers 2 Other Designers + 7 Other Developers
  18. A Large Enterprise (for just their .com) 18 Visual Style,

    Components, & Accessibility Sketch for Designers, React for Developers apollo.ourcompany.com System Team: 2 Designers & 3 Developers .com Domain: 45 Designers, 80 Developers Our System is… released as… documented as… made by… to serve…
  19. By six months from now, our design system should be...

    ...named ...made by (people names) ...used by (team, group names) ...including ...output as ...documented at ...released Visual Style Sketch Continuously InVision Figma Biweekly/By Sprint Quarterly Semi-/Annually Other: JavaScript framework: HTML/CSS Design tokens UI Components Other: UX Patterns Accessibility Page Templates Editorial Principles Brand http:// Worksheet: Define Your System 19
  20. 20 How do we make a system? QUESTION #2 of

    4
  21. Starting a Design System 21 1 2 3 4 5

    Starting a Design System http://bit.ly/8s-starting-a-system Design/Build/Doc Release Cycle New Design Language S1 S2 S3 S4 S5 S6 S7 MONTH PHASE MILESTONE Strategy Discovery Planning Alignment Start ✍ Commit Launch
  22. Surveying Attitudes on “Cohesiveness…” 22 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
  23. 23 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.
  24. The Inventory 24 http://bradfrost.com/blog/post/interface-inventory/ Button

  25. 25 Button Buttons in Design Systems bit.ly/8s-buttons-in-design-systems

  26. Button 26 Background Color Padding Top & Bottom Margin Bottom

    Border Radius Color Font Size Font Weight Font Family Text Transform Box Shadow?
  27. 27 Button Button Button Button

  28. 28 Button Primary Button Button Button Secondary “Flat” (or “Text”)

    Ghost (or “Window”, “Outline”) Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Default Hover Press Focus Disabled
  29. 29 Button Primary Button Button Button Secondary “Flat” (or “Text”)

    Ghost (or “Window”, “Outline”) Without Button Button Button Button Button Button Button Button Icon on Left Icon on Right Only
  30. 30 Button Primary Button Button Button Secondary “Flat” (or “Text”)

    Ghost (or “Window”, “Outline”) Medium Button Button Button Button Small Button Button Button Button Large
  31. Design, Code, and Document All States & Variations 31 Button

    Button Button Button Type Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button States + Button Button Button Button Button Button Button Button Icons + Button Button Button Button Button Button Button Button Button Button Button Button Size + Button Button Button Button Button Button Button Button Button Button Button Button Theming + + Across Elements (<button>, <input>, <a>) + Fully Accessible + Across Devices & Browsers (Chrome, Firefox, Safari, and – yes – IE11)
  32. 32 Average Resource Code $100/HR Team Hours (Designer + Engineer

    + QA) 200HRS Team Button Cost $20,000 x
  33. 33 Average Resource Code $100/HR Team Hours (Designer + Engineer

    + QA) 200HRS Enterprise Button Cost $1,000,000 x Product Teams 50 x And You Thought Buttons Were Easy bit.ly/8s-buttons-arent-easy
  34. Design Systems Sales Pitch Presentation WHY STORIES 
 INDUSTRY BEST

    PRACTICES APPROACH FEATURES PEOPLE & PROCESSES COMMUNITY OBJECTIVES & KEY RESULTS
  35. Principles of Design Systems bit.ly/8s-principles-systems 35 Include what’s shared. Omit

    what’s not. FEATURES
  36. Picking Parts, Products & People bit.ly/8s-parts-products-people 36

  37. Roadmaps for Design Systems 37 Roadmaps for Design System http://bit.ly/8s-system-roadmap

    VISUAL LANGUAGE Color Palettes, by category Contrast Meaning Swatches UI ELEMENTS Paragraph Lead paragraph Block quote Headers (H1 - H6) Lists Links Code Typography Hierarchy Weights / types Web fonts Baseline grid Buttons Primary Secondary Button groups Menu buttons Split buttons FAB (floating action) Iconography Pictograms Illustration Icon fonts Alignment Form controls Text Variants (email, etc) Text area Radio Checkbox Select Motion Principles Timing Types Transitions Form controls, cont’d File upload Labels Floating labels Microcopy Required Validation Space Units / measurments Metrics and keylines Structure Photography Divider / rule Switch Slider Image Block Full bleed Inline with positions UI COMPONENTS Action bar/sheet Back to top Badges Breadcrumbs Calendar picker Caption Cards Chat (live) Code block Comments Contact us Cookie notification Data tables Dialog Drawer/accordion Filters Footer Footnotes Header Hero billboard Hero carousel Legend Loading / spinner Local navigation Maps Menu Messaging Toast Block Inline error Modal Nav Megamenu Pagination Progress bar Pull quote Ratings Reviews Rich text editor Search Sidebar Site/App navigation Social networking Status (alpha, beta,...) Tabs Tags / chips / pills Thumbnails / #-ups Tips / tutorial Toolbar Tooltips Video & media UI PATTERNS Authentication Create account Database connection Form structure Launch EDITORIAL Voice & tone Writing for the web Word list Capitalization Punctuation DOWNLOADS Templates (PSD,...) Swatch palettes Fonts Icons Code Permissions Purchase/checkout Settings Site / app structure Swipe to refresh BRANDING Identity Logo(s) Tagline(s) Partnerships Themes GETTING INVOLVED Request New Parts Give Feedback Request Audit Present at a Share Contribute PAGE TEMPLATES Home Category Product Dashboard Article RESEARCH & USERS User needs Personas Research techniques Surveys A/B, multivar. testing ABOUT THE PROGRAM Home page Principles / pillars Getting started FAQ Version history Search results Contact us Getting started Discussion Gallery PRACTICES Accessibility Prototyping Performance SEO Design thinking ABOUT THE TEAM Team Recruiting / jobs LAYOUT SYSTEMS Grids for sites Grids for apps Paneling/transitions Responsive/breakpoints Screen sizes CODING STANDARDS Style Browsers & devices Environments Prog. enhancement Version control UTILITIES Variables / tokens Mixins Helpers Customize OTHER? PARTS NAME DATE Next Sooner Later
  38. Component Cut Up bit.ly/8s-component-cut-up Component Cut Up 38

  39. Print All The Legacy and/or Emerging Screens 39

  40. Cut Up & Prepare Your Library 40 1. Cut 2.

    Group 3. Label Groups 4. Tape 5. Prioritize 6. Label Components Low Medium High
  41. Present a Library to Teammates 41

  42. Design System Features, Step-by-Step http://bit.ly/8s-feature-step-by-step System Feature Development, Step-by-Step 42

    1 Discovery 2 Design 3 Code 4 Doc 5 Publish
  43. Visual Style Discover Design Build Doc Publish Color Typography Icons

    Space Borders Layering Component Discover Design Build Doc Publish Buttons Forms Data Table Pill Switch Loading Spinner Component Discover Design Build Doc Publish Alerts Popovers Dialogs Modals Tooltips Links List Groups Pagination Search Fields Top Hats Site Navigation Mastheads Headers Combo Boxes MVP Scope 43 Not Yet Started In Progress ✔ Complete N/A Not Applicable OOS Out of Scope Visual Style Discover Design Build Doc Publish Color ✔ Typography ✔ Icons ✔ Space Borders Layering Component Discover Design Build Doc Publish Buttons ✔ Forms ✔ Data Table ✔ Pill Switch ✔ Loading Spinner Component Discover Design Build Doc Publish Alerts Popovers Dialogs Modals Tooltips Links ✔ List Groups Pagination Search Fields Top Hats Site Navigation Mastheads Headers Combo Boxes Visual Style Discover Design Build Doc Publish Color ✔ ✔ ✔ Typography ✔ ✔ Icons ✔ ✔ ✔ Space Borders Layering Component Discover Design Build Doc Publish Buttons ✔ ✔ ✔ Forms ✔ ✔ ✔ Data Table ✔ ✔ Pill ✔ Switch ✔ ✔ Loading Spinner ✔ Component Discover Design Build Doc Publish Alerts ✔ Popovers ✔ Dialogs Modals Tooltips Links ✔ ✔ List Groups Pagination Search Fields Top Hats Site Navigation Mastheads Headers Combo Boxes Visual Style Discover Design Build Doc Publish Color ✔ ✔ ✔ ✔ ✔ Typography ✔ ✔ ✔ ✔ ✔ Icons ✔ ✔ ✔ ✔ ✔ Space ✔ Borders Layering Component Discover Design Build Doc Publish Buttons ✔ ✔ ✔ ✔ ✔ Forms ✔ ✔ ✔ ✔ ✔ Data Table ✔ ✔ ✔ ✔ ✔ Pill ✔ ✔ ✔ Switch ✔ ✔ Loading Spinner ✔ ✔ ✔ Component Discover Design Build Doc Publish Alerts ✔ ✔ Popovers ✔ ✔ Dialogs ✔ Modals ✔ Tooltips ✔ Links ✔ ✔ List Groups Pagination Search Fields Top Hats Site Navigation Mastheads Headers Combo Boxes
  44. Design System Plan Presentation 44 WHAT WHY STATUS ANALYSIS CONCEPTS

    SCOPE PEOPLE & PROCESS PRODUCT ADOPTION
  45. Starting a Design System 45 1 2 3 4 5

    Starting a Design System http://bit.ly/8s-starting-a-system Design/Build/Doc Release Cycle S1 S2 S3 S4 S5 S6 S7 MONTH PHASE MILESTONE Strategy Discovery Planning Alignment Start ✍ Commit Alpha 0.1.0 Beta 0.3.0 Launch
  46. 46 4 5 ild/Doc Release Cycle S3 S4 S5 S6

    S7 Alpha 0.1.0 Beta 0.3.0 Launch Mission Accomplished!!!!
  47. 47 4 5 6 7 8 9 10 11 ild/Doc

    Release Cycle S3 S4 S5 S6 S7 Foster & support product adoption Extend, optimize, and fix features Cultivate community of contribution
  48. 48 ild/Doc Release Cycle S3 S4 S5 S6 S7 Another

    Cycle S8 S9 S10 S10 S11 S12 S13 S14 S15 S16 S17 S18 S19 Another Cycle
  49. A Design System isn’t a Project. It’s a Product, Serving

    Products. bit.ly/8s-system-is-product 49 A design system is not a project. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.
  50. 50 Who makes the system? QUESTION #3 of 4

  51. 51

  52. Overlords Don’t Scale 52

  53. Models of Who Makes a Design System 53 Solitary Central

    Team Federated Community
  54. 54 1 Enable a core group to stabilize models &

    tools 2 Gradually grow to
 engage the community
  55. 55 Favor community over control. Principles of Design Systems bit.ly/8s-principles-systems

  56. 56 But, can’t I just get a designer to do

    this on Thursday afternoons? Typical manager
  57. Designing a Systems Team / Stage 1: Spare Timers 57

  58. Designing a Systems Team / Stage 2: Allocated Individuals 58

    FED VISUAL FED OR UX OR
  59. Each Organization Supporting “Their” Community 59 Tokens HTML/CSS Design Assets

    Doc Site Design Community Engineering Community Design “Team” Engineering “Team”
  60. 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 60 Tokens HTML/CSS Design Assets Doc Site
  61. Product Squads Developer Community Design Community Design System Network of

    Relationships 61 Steering Committee (Directors/VPs) Executives (CXXs/VPs) System Team
  62. Designing a Systems Team / Stage 3: Multi-Disciplinary Team 62

    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”
  63. Designing a Systems Team / Stage 4: Team of Teams

    63 Leadership UI Design & Engineering Creative Product Design Engineering Other/“Speciality” Prototypers (as Service) Dev Tools/Ops Accessibility
  64. Proposing Your Design System Team 64 LEAD DESIGN FED FED

    FED DESIGN CONTENT FED ACCESS. Must Should Could Capacity 100% 50% Product Design Engineering Other/“Speciality”
  65. 65 100% Your Name 50% 0% Disciplines UX UX/UI Design

    VD Visual Design PgM Program/Product Mgmt PjM Project Manager CS Content Strategist ACC Accessibility Specialist R Researcher DEV Developer Rotating UX Example: UX Designer at 75% Design a Systems Team Systems Team (meeting and releasing regularly) Key Design Community Key Engineering Community Key Steerers & Execs T Testing/QA DR Director EXEC Executive
  66. 66

  67. 67 Who uses the system? QUESTION #4 of 4

  68. 68 Imagine 18 months from now, and the design system

    failed. 
 Describe two (or more) reasons why.
  69. So many reasons for possible failure… 69 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
  70. 70 #2 BIGGEST THREAT
 The system isn’t made for us.

    Since it’s different, we can’t use it.
  71. 71 Button Button That Sells Your system offers a… Our

    product has a proven…
  72. Systems are Extensible 72 Systems offer reusable components made with

    1,000s lines of code. Making a button red requires changing 1 line.
  73. 73 #1 BIGGEST THREAT Teams agree it’s important. Teams say

    they want to adopt. Yet, teams never prioritize it.
  74. 74 Value occurs when products ship features using system parts.

    Principles of Design Systems bit.ly/8s-principles-systems
  75. 75 Pressure from management means we've been on the feature

    treadmill for so long that we can't get off. – Most Product Managers & Engineers
  76. Make Adoption Incremental 76 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?
  77. Adopting Design Systems, Fast or Slow 77 ✅✅◻◻ Big Bang

    in 2 to 3 sprints Incremental over many, many months
  78. Step-by-Step Adoption Model 78 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
  79. Team-by-Team Adoption 79 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
  80. Monitoring Adoption Across 60+ Products 80

  81. New Emerging Established Legacy More Must Must Should N/A Same

    N/A Should Could Unlikely Less N/A Could Unlikely Avoid None N/A N/A Avoid Avoid Should a Product Adopt a System in an Upcoming Period? 81 Stage in Life Cycle Investment Compared to Prior Period
  82. Principles of Design Systems bit.ly/8s-principles-systems 82 Products own their destiny.


    Systems equip products to realize that destiny.
  83. http://design.systems (Design Systems Slack) 83

  84. More On Medium.com… 84 Read more on systems topics including:

    Strategy & Planning Design & Development Adoption Documentation Process Teams & Operations bit.ly/8s-systems-medium
  85. 85 Thanks!