Tweet
Tweet

Slide 1

Slide 1 text

1 Beyond the Toolkit By Nathan Curtis UXI Live, Monday, February 11, 2019 Spreading a Design System Across People & Products

Slide 2

Slide 2 text

Is this cohesive? 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 2018 2016

Slide 5

Slide 5 text

Why start a design system? 5 Cohesiveness / Consistency by designers, management/leaders Efficiency for engineers

Slide 6

Slide 6 text

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

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

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?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 What is our design system? QUESTION #1 of 4

Slide 16

Slide 16 text

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…

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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…

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 How do we make a system? QUESTION #2 of 4

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

The Inventory 24 http://bradfrost.com/blog/post/interface-inventory/ Button

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Button 26 Background Color Padding Top & Bottom Margin Bottom Border Radius Color Font Size Font Weight Font Family Text Transform Box Shadow?

Slide 27

Slide 27 text

27 Button Button Button Button

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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 (, , ) + Fully Accessible + Across Devices & Browsers (Chrome, Firefox, Safari, and – yes – IE11)

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Design Systems Sales Pitch Presentation WHY STORIES 
 INDUSTRY BEST PRACTICES APPROACH FEATURES PEOPLE & PROCESSES COMMUNITY OBJECTIVES & KEY RESULTS

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Component Cut Up bit.ly/8s-component-cut-up Component Cut Up 38

Slide 39

Slide 39 text

Print All The Legacy and/or Emerging Screens 39

Slide 40

Slide 40 text

Cut Up & Prepare Your Library 40 1. Cut 2. Group 3. Label Groups 4. Tape 5. Prioritize 6. Label Components Low Medium High

Slide 41

Slide 41 text

Present a Library to Teammates 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Design System Plan Presentation 44 WHAT WHY STATUS ANALYSIS CONCEPTS SCOPE PEOPLE & PROCESS PRODUCT ADOPTION

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

46 4 5 ild/Doc Release Cycle S3 S4 S5 S6 S7 Alpha 0.1.0 Beta 0.3.0 Launch Mission Accomplished!!!!

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

50 Who makes the system? QUESTION #3 of 4

Slide 51

Slide 51 text

51

Slide 52

Slide 52 text

Overlords Don’t Scale 52

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

55 Favor community over control. Principles of Design Systems bit.ly/8s-principles-systems

Slide 56

Slide 56 text

56 But, can’t I just get a designer to do this on Thursday afternoons? Typical manager

Slide 57

Slide 57 text

Designing a Systems Team / Stage 1: Spare Timers 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 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 60 Tokens HTML/CSS Design Assets Doc Site

Slide 61

Slide 61 text

Product Squads Developer Community Design Community Design System Network of Relationships 61 Steering Committee (Directors/VPs) Executives (CXXs/VPs) System Team

Slide 62

Slide 62 text

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”

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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”

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

66

Slide 67

Slide 67 text

67 Who uses the system? QUESTION #4 of 4

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

74 Value occurs when products ship features using system parts. Principles of Design Systems bit.ly/8s-principles-systems

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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?

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Monitoring Adoption Across 60+ Products 80

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

85 Thanks!