Slide 1

Slide 1 text

1 Beyond the Toolkit Spreading a Design System Across People & Products Les Meetups by Backelite, Thursday August 2, 2018

Slide 2

Slide 2 text

2 Bonjour! @nathanacurtis @nathanacurtis /in/nathancurtis

Slide 3

Slide 3 text

Working Design Systems Since 2006, Including… 3

Slide 4

Slide 4 text

Is this cohesive? 4

Slide 5

Slide 5 text

5 2018 2016

Slide 6

Slide 6 text

6 What is a design system?

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Why start a design system? 12 Top 2 Reasons Cohesiveness / Consistency by designers, management/leaders Efficiency for engineers

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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”)

Slide 15

Slide 15 text

15 What is our design system?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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?

Slide 23

Slide 23 text

23 What is the scope of our design system?

Slide 24

Slide 24 text

Principles of Design Systems bit.ly/8s-principles-systems 24 Include what’s shared. Omit what’s not.

Slide 25

Slide 25 text

Picking Parts, Products & People bit.ly/8s-parts-products-people 25

Slide 26

Slide 26 text

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?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

29 DISCUSSION PROMPTS “We should focus on [???] because…” “We don’t care about [???] because…” “We should exclude [???] because…”

Slide 30

Slide 30 text

Post-Parts Activity Data Collection 30

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

32 Who makes the system?

Slide 33

Slide 33 text

33

Slide 34

Slide 34 text

Overlords Don’t Scale 34

Slide 35

Slide 35 text

Models of Who Makes a Design System 35 Solitary Central Team Federated Community

Slide 36

Slide 36 text

36 1 Enable a core group to stabilize models & tools 2 Gradually grow to
 engage the community

Slide 37

Slide 37 text

The Salesforce Team Model for Scaling a Design System bit.ly/sf-system-team-model At Salesforce, a Blending Both & Pairing “Cyclically” 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Designing a Systems Team / Stage 1: Spare Timers 39

Slide 40

Slide 40 text

Designing a Systems Team / Stage 2: Allocated Individuals 40 FED VISUAL FED OR UX OR

Slide 41

Slide 41 text

Each Organization Supporting “Their” Community 41 Tokens HTML/CSS Design Assets Doc Site Design Community Engineering Community Design “Team” Engineering “Team”

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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”

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Design Systems at GitHub https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542 Scaling the Team, Over Time 45

Slide 46

Slide 46 text

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”

Slide 47

Slide 47 text

Blend Continuity with Rotation 47 LEAD DESIGN FED FED FED DESIGN CONTENT FED ACCESS. Permanent? Rotating? Capacity 100% 50% Product Design Engineering Other/“Speciality”

Slide 48

Slide 48 text

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?

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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”

Slide 52

Slide 52 text

System Team Members are Connectors 52 CONNECTOR DRIVER WATCHER INFLUENCER IGNORER

Slide 53

Slide 53 text

This Project Rocked! That Project Sucked? bit.ly/8s-projects-rocked-sucked 53 Alignment Work Wasn’t Enjoyable

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

56

Slide 57

Slide 57 text

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?

Slide 58

Slide 58 text

58 Who uses the system?

Slide 59

Slide 59 text

25 Leaders of 100+ Designer Org Meet for 2 Days 59

Slide 60

Slide 60 text

Account
 Hub 60

Slide 61

Slide 61 text

“I want a system for all of this” 61 Marketing Site Account
 Setup Account
 Hub

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

64 Imagine 18 months from now, and the design system failed. 
 Describe two (or more) reasons why.

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

66 #2 BIGGEST THREAT
 The system isn’t made for us. Since it’s different, we can’t use it.

Slide 67

Slide 67 text

67 Button Button That Sells Your system offers a… Our product has a proven…

Slide 68

Slide 68 text

Systems are Extensible 68 Systems offer reusable components made with 1,000s lines of code. Making a button red requires changing 1 line.

Slide 69

Slide 69 text

69 DON’T Command that ones size fits all.
 DO Encourage teams to configure, extend and — if needed — override.

Slide 70

Slide 70 text

70 #1 BIGGEST THREAT Teams agree it’s important. Teams say they want to adopt. Yet, teams never prioritize it.

Slide 71

Slide 71 text

71 Value is realized when products ship features that use the system.

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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?

Slide 74

Slide 74 text

Adopting Design Systems, Fast or Slow 74 ✅✅◻◻ Big Bang in 2 to 3 sprints Incremental over many, many months

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Monitoring Adoption Across 60+ Products 78

Slide 79

Slide 79 text

Products, too! 79 1. Freelist products 2. Prioritize, such as Flagship, Secondary, and “The Rest”

Slide 80

Slide 80 text

80 DISCUSSION PROMPTS Who coordinates and monitors adoption? When do you start each? Who supports teams with clarifications, fixes, and requests?

Slide 81

Slide 81 text

Principles of Design Systems bit.ly/8s-principles-systems 81 Products own their destiny.
 System equip products to realize that destiny.

Slide 82

Slide 82 text

http://design.systems (Design Systems Slack) 82

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

84 Merci beaucoup!