Beyond the Toolkit, Tel Aviv February 2019

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
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
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!