Design Systems Are For People

A presentation at Artifact in October 2019 in Austin, TX, USA by Brad Frost

Slide 1

DESIGN SYSTEMS ARE FOR PEOPLE

Slide 2

Slide 3

THE YEAR IS 2013…

Slide 4

Slide 5

B-SIDE THIS IS NOT THE WEB.

Slide 6

Slide 7

WEB WEB

Slide 8

Slide 9

Slide 10

D http://alistapart.com/article/responsive-web-design

Slide 11

http://www.abookapart.com/products/responsive-web-design

Slide 12

RESPONSIVE WEB DESIGN: THE MOVIE SUMMER 2016

Slide 13

FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES

Slide 14

FLEXIBLE GRID .thingamajig { width: 38.38472682975934797%; }

Slide 15

FLUID MEDIA img { max-width: 100%; }

Slide 16

MEDIA QUERIES @media all and (min-width: 45rem) { .thingamajig { display: flex; } }

Slide 17

THE CODE IS THE EASY PART.

Slide 18

HOW DO I CONVINCE MY BOSS/CLIENTS/COLLEAGUES? WHAT TOOLS DO WE USE? WHAT DELIVERABLES DO WE CREATE? HOW DO I WORK WITH MY COLLEAGUES? HOW DO WE MANAGE CHANGE?

Slide 19

Slide 20

PRODUCTS SERVICES FUNCTIONALITY FEATURES CONTENTMEDIUMSFORMA COUNTRIES CUSTOMERS LANGUAGES PEOPLE USER BROWSERS DEVICESENVIRONMENTS SCREENSIZESFORMFACTORSCONTEXT MORE

Slide 21

“The haystack just got bigger.” –Chris Coyier

Slide 22

Slide 23

Slide 24

Slide 25

DESIGN SYSTEMS!

Slide 26

“JUST MAKE COMPONENTS”

Slide 27

“We don’t want to hyper-focus on the components part of design systems.” –Mina Markham

Slide 28

COMPONENTS ARE THE EASY PART.

Slide 29

HOW DO I CONVINCE MY BOSS/CLIENTS/COLLEAGUES? WHAT TOOLS DO WE USE? WHAT DELIVERABLES DO WE CREATE? HOW DO I WORK WITH MY COLLEAGUES? HOW DO WE MANAGE CHANGE? HOW DO I GET PEOPLE TO ADOPT THE SYSTEM?

Slide 30

“Design systems are complicated because they involve people” –Dave Rupert

Slide 31

Design Systems 10% 90% People Design/Dev/Tools

Slide 32

PRINCIPLES AND GUIDELINES

Slide 33

discipline team teams department company

Slide 34

discipline team teams department company

Slide 35

customer support engineering marketing management accounting sales hr r&d digital administration

Slide 36

customer support engineering marketing management accounting sales hr r&d digital administration

Slide 37

Slide 38

customer support engineering marketing management accounting sales hr r&d digital administration

Slide 39

customer support engineering marketing management accounting sales hr r&d digital administration principles & guidelines

Slide 40

https://www.charitywater.org/about/mission.php

Slide 41

ZAPPOS 10 CORE VALUES ๏ Deliver WOW Through Service ๏ Embrace and Drive Change ๏ Create Fun and A Little Weirdness ๏ Be Adventurous, Creative, and Open-Minded ๏ Pursue Growth and Learning ๏ Build Open and Honest Relationships With Communication ๏ Build a Positive Team and Family Spirit ๏ Do More With Less ๏ Be Passionate and Determined ๏ Be Humble https://www.zapposinsights.com/about/core-values

Slide 42

An organizational constitution specifies your team’s purpose, values and behaviors, strategies, and goals. It creates “liberating rules” that help leaders and team members understand exactly how they are expected to treat each other and their customers. –Chris Edmonds http://thecultureengine.com/

Slide 43

discipline team teams department company

Slide 44

creative services research management vp cmo public relations social analysis digital assistants

Slide 45

creative services research management vp cmo public relations social analysis digital assistants

Slide 46

creative services research management vp cmo public relations social analysis digital assistants

Slide 47

creative services research management vp cmo public relations social analysis digital assistants principles & guidelines

Slide 48

BRAND GUIDELINES

Slide 49

https://design.ubuntu.com/brand/

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

VOICE AND TONE GUIDELINES

Slide 60

voiceandtone.com

Slide 61

Slide 62

Slide 63

discipline team teams department company

Slide 64

team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8

Slide 65

team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8

Slide 66

SPECIAL SNOWFLAKE SYNDROME

Slide 67

team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8

Slide 68

team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8 principles & guidelines

Slide 69

discipline team teams department company

Slide 70

frontend backend manager ux backend content visual frontend ux qa

Slide 71

frontend backend manager ux backend content visual frontend ux qa

Slide 72

frontend backend manager ux backend content visual frontend ux qa

Slide 73

frontend backend manager ux backend content visual frontend ux qa principles & guidelines

Slide 74

discipline team teams department company

Slide 75

frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend

Slide 76

frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend

Slide 77

frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend

Slide 78

frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend principles & guidelines

Slide 79

CSS SYNTAX GUIDELINES code block .thisishowwedoit { }

Slide 80

CSS SYNTAX GUIDELINES code block .this-is-how-we-do-it { }

Slide 81

CSS SYNTAX GUIDELINES code block .thisIsHowWeDoIt { }

Slide 82

CSS SYNTAX GUIDELINES code block .this__is__how__we__do—-it { }

Slide 83

CSS SYNTAX GUIDELINES code block .- -…- - ..- - —— .….—— — { }

Slide 84

discipline team teams department company design systems

Slide 85

USER RESEARCH AND INTERVIEWS

Slide 86

“You can probably carbon date our UIs based on the design.”

Slide 87

“The main challenges are the existing thousands of lines of code, acquisitions, and existing suite of technologies that makes up a billion dollars a year. We’d like to not lose that billion dollars.”

Slide 88

“There’s a lot of institutional knowledge here locked up in people’s heads. Slack channels are great, but it becomes a scavenger hunt to find information about how something’s supposed to work.”

Slide 89

“For a basic expand/collapse pattern, the devs spent 2 days going to different teams to find the code, then still had to rebuild it themselves.”

Slide 90

USER INTERVIEWS ๏ Round up a diverse group of stakeholders, colleagues, and users who would impact/be impacted by a design system ๏ Talk about current workflow, pain points, hopes, fears, dreams, frustrations, and other things that can influence the success of the design project ๏ Latch onto poignant quotes and emerging themes ๏ Synthesize key themes in preparation for kickoff

Slide 91

Slide 92

Slide 93

Slide 94

Slide 95

Slide 96

DESIGN SYSTEM PRINCIPLES ๏ Make the best thing the easiest thing ๏ Design for “grab it quick” efficiency ๏ Design for contribution and community ๏ Crowd-proof the markup ๏ Fit the workflow ๏ Just enough documentation ๏ Technology agnostic ๏ Embed the brand in the code ๏ Consistent, not homogenous ๏ Opinionated defaults ๏ Make people smarter just by using it

Slide 97

DEATH TO THE WATERFALL COMPLEX NAVIGATION

Slide 98

Slide 99

comp production

Slide 100

design development

Slide 101

design frontend design development

Slide 102

Slide 103

Slide 104

MINIMUM VIABLE ARTIFACTS

Slide 105

Slide 106

Slide 107

Slide 108

Slide 109

Slide 110

Slide 111

Slide 112

Slide 113

Slide 114

Slide 115

Slide 116

Slide 117

Slide 118

Slide 119

Slide 120

Slide 121

Slide 122

Slide 123

http://trentwalton.com/2011/07/14/content-choreography/

Slide 124

Slide 125

whiteboard sketch that tool you’ve spent 7 years mastering working product

Slide 126

https://airbnb.design/sketching-interfaces/

Slide 127

COLLABORATION AND COMMUNICATION BEAT DELIVERABLES

Slide 128

COLLABORATION AND COMMUNICATION BEAT PROCESS

Slide 129

https://danmall.me/articles/designer-developer-workflow/

Slide 130

DESIGN SYSTEM TEAMS

Slide 131

https://flic.kr/p/cHPcBJ

Slide 132

https://flic.kr/p/KdvF6Z

Slide 133

DESIGN SYSTEM MAKERS ๏Have a birds-eye perspective of entire ecosystem ๏The ones responsible for maintaining the design system ๏Approve changes ๏Work with users and business to make sure it’s addressing product needs ๏Need to establish a pattern-driven, cross-disciplinary workflow https://flic.kr/p/cHPcBJ

Slide 134

DESIGN SYSTEM USERS ๏Provide an on-the-ground perspective focused on specific applications ๏May also be makers, separate development teams, junior-level developers, partner agencies, external development shops, and/or other third-parties ๏Should coordinate with makers to make sure the system is addressing their needs ๏May be widely distributed and process may be extremely waterfall https://flic.kr/p/KdvF6Z

Slide 135

SOLITARY https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

Slide 136

CENTRALIZED https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

Slide 137

FEDERATED https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

Slide 138

CYCLICAL https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b

Slide 139

https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4

Slide 140

“Inclusion at this deepest level is about respect.” –Kim Williams

Slide 141

A DESIGN SYSTEM IS A HUMBLE PRODUCT

Slide 142

Slide 143

https://coggle.it/diagram/V0hkiP976OIbGpy8/t/vanilla-pattern

Slide 144

Slide 145

PRODUCTS SERVICES FUNCTIONALITY FEATURES CONTENTMEDIUMSFORMA COUNTRIES CUSTOMERS LANGUAGES PEOPLE USER BROWSERS DEVICESENVIRONMENTS SCREENSIZESFORMFACTORSCONTEXT MORE

Slide 146

COLLABORATE. COMMUNICATE. BE THOUGHTFUL. BE GOOD TO PEOPLE. BE GOOD FOR PEOPLE.

Slide 147

“Our job isn’t just to build cool stuff; our job is to build stuff ethically.” –David Dylan Thomas

Slide 148

discipline team teams department company

Slide 149

discipline team teams department company humanity

Slide 150

THANKS! brad@bradfrost.com | bradfrost.com