Initiating and Building Design Systems — Across Products, People and Process

Slide 1

Slide 1 text

Initiating and Building Design Systems Across Products, People and Process PRESENTED BY Pizza Yap Product Designer @ Grab @pizza0502 May 15, 2019

Slide 2

Slide 2 text

Hello How are you? What’s your role?

Slide 3

Slide 3 text

TWITTER @pizza0502 MEDIUM @pizza0502 WEBSITE kwangyik.com

Slide 4

Slide 4 text

We’ll Cover — The Purpose of Design Systems — The Beneﬁts of Having Design Systems — When to Build Design Systems — People That You Need to Build Design Systems — Tools for Building Design System — Living Design Systems

Slide 5

Slide 5 text

What is a Design System?

Slide 6

Slide 6 text

What is a Design System? The NASA Graphics Standards Manual

Slide 7

Slide 7 text

What is a Design System? The NYCTA Graphics Standards Manual

Slide 8

Slide 8 text

A collection of reusable components, governed by clear standards , that can be assembled together to build any number of applications or products. — Laura Van Doore (Head of Product Design @ Fathom) What is a Design System?

Slide 9

Slide 9 text

A system is an interconnected set of elements coherently organized in a way that achieves something . — Donella Meadows (Thinking in Systems) What is a Design System?

Slide 10

Slide 10 text

An uniﬁed design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with. — Karri Saarinen (Ex Design Systems Lead @ Airbnb) What is a Design System?

Slide 11

Slide 11 text

A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience. — Nathan Curtis (Design Systems Consultant at EightShapes) What is a Design System?

Slide 12

Slide 12 text

1. Reusable Components 2. Standards & Guidelines 3. Common Language 4. Cohesive Experience 5. Scalability What is a Design System?

Slide 13

Slide 13 text

Mailchimp What is a Design System? A HTML/CSS playbook for 1 product team to build a consistent design. http://ux.mailchimp.com

Slide 14

Slide 14 text

Atlassian What is a Design System? Brand guideline, design spec, illustration library and React JS code component for 10+ product teams to build a consistent experience. https://atlassian.design/

Slide 15

Slide 15 text

U.S. Web Design System What is a Design System? A visual language that synthesizes the principles of good design with the accessibility and innovation of technology that used across 100+ products. https://v2.designsystem.digital.gov/

Slide 16

Slide 16 text

GOV.UK Design System What is a Design System? https://design-system.service.gov.uk/

Slide 17

Slide 17 text

Aurora Design System What is a Design System? https://design.gccollab.ca/

Slide 18

Slide 18 text

Australian Government Design System What is a Design System? https://designsystem.gov.au/

Slide 19

Slide 19 text

Singapore Government Design System What is a Design System? https://designsystem.isomer.gov.sg/

Slide 20

Slide 20 text

Open source design systems are not meant be reused and spin up for yourself, but to learn from and apply to your own. — Mike Dick (Design System Lead at SurveyMonkey) What is a Design System?

Slide 21

Slide 21 text

Bootstrap A toolkit that contain HTML, CSS & JS that can customize by any teams for unlimited products to produce design efficiently. What is a Design System? https://getbootstrap.com/

Slide 22

Slide 22 text

https://material.io/design/ A toolkit that contain guidelines, frontend code for web and native that can customize by any teams for unlimited products to produce design efficiently. What is a Design System? Material Design

Slide 23

Slide 23 text

A design system is a single source of truth for consistency and cohesion. What is a Design System?

Slide 24

Slide 24 text

What’s the beneﬁt of Design System?

Slide 25

Slide 25 text

1. For Organization It helps scaling organization across designs and products What’s the beneﬁt of Design System?

Slide 26

Slide 26 text

2. For New Hires It’s a great educational resource to onboard new hires to make them get up to speed on your organization’s design principles, methods, tools, and assets. What’s the beneﬁt of Design System?

Slide 27

Slide 27 text

3. For Designers & Engineers It’s speed up iterations, and focus on the details and solve complex problems What’s the beneﬁt of Design System?

Slide 28

Slide 28 text

4. For Communication Have a common language and vocabulary across different roles and timezone What’s the beneﬁt of Design System?

Slide 29

Slide 29 text

5. For Customers Keep up on our customer demands and put our products in more devices and platforms. What’s the beneﬁt of Design System?

Slide 30

Slide 30 text

What’s deﬁne a good Design System?

Slide 31

Slide 31 text

A good system take care of all the boring stuff so that product teams can invent the new What’s deﬁne a good Design System?

Slide 32

Slide 32 text

A good system allows us to focus on what we are passionate about What’s deﬁne a good Design System?

Slide 33

Slide 33 text

A good system can improve the workﬂow for designers who code and engineers who build UI What’s deﬁne a good Design System?

Slide 34

Slide 34 text

A good system empowers designers to code, and empowers engineers to design — Diana Mounter (Design Systems Lead at GitHub) What’s deﬁne a good Design System?

Slide 35

Slide 35 text

Why we need a Design System?

Slide 36

Slide 36 text

Because it’s a cool thing now! Why we need a Design System?

Slide 37

Slide 37 text

Because it’s a cool thing now! Why we need a Design System?

Slide 38

Slide 38 text

But it’s so trendy and everyone are talking about it! Why we need a Design System?

Slide 39

Slide 39 text

But it’s so trendy and everyone are talking about it! Why we need a Design System?

Slide 40

Slide 40 text

But that X company just publish their cool new Design System publicly, we should do so! Why we need a Design System?

Slide 41

Slide 41 text

Why we need a Design System?

Slide 42

Slide 42 text

5 Five Whys — Sakichi Toyoda Why we need a Design System? https://thedesignteam.io/always-ask-why-ﬁve-times-452345856bde

Slide 43

Slide 43 text

First Why? We keep copy pasting designs and codes Second Why? We don’t have components Third Why? We didn’t deﬁne atomic design Fourth Why? The design handoff process is a mess Fifth Why? Our products are inconsistent from visual to experience Why we need a Design System?

Slide 44

Slide 44 text

Here’s the simple truth: you can’t innovate on products without ﬁrst innovating the way you build them. — Alex Schleifer (VP of Design at Airbnb) Why we need a Design System?

Slide 45

Slide 45 text

One of the most obvious problem to solve is the Handoff process Why we need a Design System?

Slide 46

Slide 46 text

Who is Design System for?

Slide 47

Slide 47 text

It is crucial to clearly identify who this design system is for and what they are able to do with it. — Chris Coyier (Founder of CSS Tricks) Who is Design System for?

Slide 48

Slide 48 text

‍ Designers Who is Design System for? ‍ Engineers Team Leads ‍ Partners

Slide 49

Slide 49 text

When should we start building a Design System?

Slide 50

Slide 50 text

Now! When should we start building a Design System?

Slide 51

Slide 51 text

But you said we shouldn’t follow the trend blindly…‍♂ When should we start building a Design System?

Slide 52

Slide 52 text

DYOR When should we start building a Design System?

Slide 53

Slide 53 text

When should we start building a Design System?

Slide 54

Slide 54 text

When should we start building a Design System?

Slide 55

Slide 55 text

● What challenge do you face? ● How useful is the current documentation? ● Do we need a design system? ● Any suggestions? When should we start building a Design System? https://unsplash.com/photos/npxXWgQ33ZQ Ask questions with surveys

Slide 56

Slide 56 text

Talk 1:1 with people who work on products Look for the pattern of how people working alone and as a team. Seek for advice too. When should we start building a Design System? https://unsplash.com/photos/lp1AKIUV3yo

Slide 57

Slide 57 text

Gain supports ... Don’t go war alone! When should we start building a Design System?

Slide 58

Slide 58 text

How to get buy in Design System?

Slide 59

Slide 59 text

You will gets a lot of questions… How to get buy in Design System?

Slide 60

Slide 60 text

How to get buy in Design System?

Slide 61

Slide 61 text

1. Who needs convinced? 2. Who's doing the convincing? 3. What will happen if this initiative fails? How to get buy in Design System?

Slide 62

Slide 62 text

Be realistic and honest about the potential risks . Outline what’s the worst case scenarios if this initiative failed. How to get buy in Design System?

Slide 63

Slide 63 text

Prepared a pitch deck ● Compile ﬁndings ● Keep it clear and short ● Present How to get buy in Design System? https://unsplash.com/photos/IBUcu_9vXJc

Slide 64

Slide 64 text

Present a solid roadmap ● Show a clear deliverables and scopes. ● Outline what’s your plan for the design system over the time. How to get buy in Design System? https://github.com/uswds/uswds/milestone/52

Slide 65

Slide 65 text

Emphasise business outcomes , over team beneﬁts — Laura Van Doore (Head of Product Design @ Fathom) How to get buy in Design System?

Slide 66

Slide 66 text

Designer spend 1hr on design: ● Design from scratch ● Finding design guidelines ● Searching previous designed screens (which might affect another designer’s time) Developer spend 1hr on development: ● Rebuilding same component ● Check code standard with peers (which might affect another developer’s time) ● Getting reviews from designer Design System ROI: ● Assume each designer and developer cost $100/hr ● 1hr/day * 261 days * $100 * 2 ppl = $52,200/year Calculate metrics on how we save ⏱ & How to get buy in Design System?

Slide 67

Slide 67 text

Other measurements 1. Delivery increase 2. Bugs reduction 3. Usability metrics improvement 4. Team happiness increase How to get buy in Design System?

Slide 68

Slide 68 text

Show examples ● Polaris by Shopify ● Zendesk Garden ● Atlassian ● Lightning Design System by Salesforce ● And more... How to get buy in Design System?

Slide 69

Slide 69 text

Watch videos ● Jina Bolton ● Diana Mounter ● Mina Markham ● Smashing Magazine ● An Event Apart ● InVision ● And more... How to get buy in Design System? https://vimeo.com/144727010

Slide 70

Slide 70 text

● Clarity Conference ● SmashingConf ● An Event Apart Conference ● Meetups Attend conferences or meetups How to get buy in Design System? https://www.clarityconf.com/videos/2018-recap

Slide 71

Slide 71 text

Most importantly, don’t overuse the term “Design System” when you’re selling it and getting buy in. How to get buy in Design System?

Slide 72

Slide 72 text

It takes time to get buy in. Be patient (and don’t give up) How to get buy in Design System?

Slide 73

Slide 73 text

What’s in a Design System?

Slide 74

Slide 74 text

What’s in a Design System? https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d

Slide 75

Slide 75 text

What’s in a Design System?

Slide 76

Slide 76 text

If you don’t document something, it doesn’t exist. — Miriam Suzanne (Creator of Susy) Why we need a Design System?

Slide 77

Slide 77 text

UI Kit What’s in a Design System? https://dribbble.com/shots/6176448-Symbol-D esign-System-2

Slide 78

Slide 78 text

Style Guide What’s in a Design System? https://www.yelp.com/styleguide

Slide 79

Slide 79 text

Brand Guidelines What’s in a Design System? https://brandland.zendesk.com/

Slide 80

Slide 80 text

Voice & Tones (Content Guidelines) What’s in a Design System? https://styleguide.mailchimp.com/

Slide 81

Slide 81 text

Motion Guidelines What’s in a Design System? https://material.io/design/motion/understanding -motion.html

Slide 82

Slide 82 text

Prototyping Tools What’s in a Design System? https://www.framer.com/

Slide 83

Slide 83 text

CSS Components What’s in a Design System? https://garden.zendesk.com/css-components/

Slide 84

Slide 84 text

JS Components What’s in a Design System? https://design-system.pluralsight.com/

Slide 85

Slide 85 text

Break time

Slide 86

Slide 86 text

How to build a Design System?

Slide 87

Slide 87 text

Drive decision with design principles Take a step back and have a look at look at all the assets as a whole How to build a Design System? Lightning Design System

Slide 88

Slide 88 text

Start by gathering data of visual design foundations How to build a Design System?

Slide 89

Slide 89 text

Conduct a design audit Running an interface audit can determine inconsistencies in your products How to build a Design System?

Slide 90

Slide 90 text

Gather everything single thing that you have created for your products How to build a Design System?

Slide 91

Slide 91 text

Tools you can use to gathering data How to build a Design System? CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template https://cssstats.com/

Slide 92

Slide 92 text

Slide 93

Slide 93 text

Tools you can use to gathering data How to build a Design System? https://fastlane.tools/ CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template

Slide 94

Slide 94 text

Tools you can use to gathering data How to build a Design System? CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template

Slide 95

Slide 95 text

Tools you can use to gathering data How to build a Design System? https://bit.ly/2v9yUdZ CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template

Slide 96

Slide 96 text

Design Audit Reports Showing what is being done right, and what is being messed up and how to make adjustments. How to build a Design System? https://unsplash.com/photos/PaiFrBUJEWQ

Slide 97

Slide 97 text

Analyzing and prioritizing components Take a step back and have a look at look at all the assets as a whole How to build a Design System? https://unsplash.com/photos/qWwpHwip31M

Slide 98

Slide 98 text

Visual Foundation Elements How to build a Design System?

Slide 99

Slide 99 text

Team activity for prioritization How to build a Design System? https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742 1. Pick the Parts 2. Prioritize the System 3. Aggregate

Slide 100

Slide 100 text

Team activity for prioritization How to build a Design System? 1. Pick the Parts 2. Prioritize the System 3. Aggregate https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742

Slide 101

Slide 101 text

Team activity for prioritization How to build a Design System? 1. Pick the Parts 2. Prioritize the System 3. Aggregate

Slide 102

Slide 102 text

Now, start small… How to build a Design System?

Slide 103

Slide 103 text

Share a design library Start small and start with having a design library that contains all the design foundations and components How to build a Design System? https://dribbble.com/shots/5779721-Eggplore-UI-Styleguide-Freebie/attachments

Slide 104

Slide 104 text

1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://www.sketch.com/docs/sketch-cloud/

Slide 105

Slide 105 text

1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://www.abstract.com/

Slide 106

Slide 106 text

1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://www.ﬁgma.com/

Slide 107

Slide 107 text

1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://designcode.io/design-system/

Slide 108

Slide 108 text

How to build a Design System?

Slide 109

Slide 109 text

1. Colors 2. Typography Naming Convention How to build a Design System? https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all-d0114ed1f659

Slide 110

Slide 110 text

1. Colors 2. Typography Naming Convention How to build a Design System? https://danmall.me/articles/typography-in-design-systems/

Slide 111

Slide 111 text

1. Colors 2. Typography Naming Convention How to build a Design System? https://danmall.me/articles/typography-in-design-systems/

Slide 112

Slide 112 text

Keeping your design system agnostic with design tokens Leverage your design system to more platforms How to build a Design System? https://shopify.github.io/polaris-tokens/

Slide 113

Slide 113 text

How to build a Design System?

Slide 114

Slide 114 text

1. Theo 2. Style Dictionary 3. Figma API Tools to generate design tokens How to build a Design System? https://github.com/salesforce-ux/theo

Slide 115

Slide 115 text

1. Theo 2. Style Dictionary 3. Figma API Tools to generate design tokens How to build a Design System? https://amzn.github.io/style-dictionary/#/

Slide 116

Slide 116 text

1. Theo 2. Style Dictionary 3. Figma API Tools to generate design tokens How to build a Design System? https://blog.prototypr.io/design-tokens-with-ﬁgma-aef25c42430f

Slide 117

Slide 117 text

How to build a Design System?

Slide 118

Slide 118 text

Documentation is a critical step during the development process. All about documentation How to build a Design System? https://unsplash.com/photos/vpR0oc4X8Mk

Slide 119

Slide 119 text

1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System? https://www.invisionapp.com/design-system-manager

Slide 120

Slide 120 text

Slide 121

Slide 121 text

Slide 122

Slide 122 text

Slide 123

Slide 123 text

1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System?

Slide 124

Slide 124 text

Slide 125

Slide 125 text

It’s important to note that documentation shouldn’t just be written once and then left alone forever. Design System documentation should be a living and breathing document that evolves over time. How to build a Design System?

Slide 126

Slide 126 text

Create use cases or pilot projects Create test websites, widgets, tutorial video and any idea you can think of to show people how to put those design system in use How to build a Design System? https://dribbble.com/shots/6160500-Card-Paginator-Component

Slide 127

Slide 127 text

How to scale/maintain a Design System?

Slide 128

Slide 128 text

Scale with teams... How to scale/maintain a Design System?

Slide 129

Slide 129 text

3 How to scale/maintain a Design System? 3 team models for scaling a design system

Slide 130

Slide 130 text

How to scale/maintain a Design System? Solitary Centralised Federated https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

Slide 131

Slide 131 text

A solitary model sees a one team make a system available, but with efforts focused primarily on that team’s needs. Team Model №1 Solitary How to scale/maintain a Design System?

Slide 132

Slide 132 text

A single, central design team produces and supports a system used by others as a part of their job. Team Model №2 Centralised How to scale/maintain a Design System?

Slide 133

Slide 133 text

Designers from multiple product teams decide on the system together. Team Model №3 Federated How to scale/maintain a Design System?

Slide 134

Slide 134 text

The Design System informs our Product Design. Our Product Design informs the Design System. Team Model Hybrid Cyclical How to scale/maintain a Design System? https://articles.uie.com/the-salesforce-team-model-for-scaling-a-design-system/

Slide 135

Slide 135 text

Setting up Design System team as a product team How to scale/maintain a Design System?

Slide 136

Slide 136 text

A Design System isn’t a project. It’s a product, serving products . — Nathan Curtis (Design Systems Consultant at EightShapes) How to scale/maintain a Design System?

Slide 137

Slide 137 text

Setting up a formal system team, strive for a mix with recognized authority from both design and engineering disciplines. System team How to scale/maintain a Design System? https://medium.com/eightshapes-llc/designing-a-systems-team-d22f27a2d81d

Slide 138

Slide 138 text

Scale with processes... How to scale/maintain a Design System?

Slide 139

Slide 139 text

Code of Conduct: ● Be humble ● Ask questions, and seek to understand each other’s context ● Research before asking questions ● Be open and honest ● And more... Chat room for design system How to scale/maintain a Design System? https://unsplash.com/photos/OXkUz1Dp-4g

Slide 140

Slide 140 text

Publish the roadmap Shows what the Design System team at currently planning to work on over the coming year How to scale/maintain a Design System? https://design-system.service.gov.uk/roadmap/

Slide 141

Slide 141 text

Have a Changelog or Release Note The latest updates, and changes to the design system How to scale/maintain a Design System? https://v2.designsystem.digital.gov/about/releases/

Slide 142

Slide 142 text

2 . 1 . 7 How to scale/maintain a Design System? Major Minor Patch https://medium.com/eightshapes-llc/versioning-design-systems-48cceb5ace4d

Slide 143

Slide 143 text

Process & workﬂow for contribution A process and workﬂow to allow people across your organization contribute to the design system How to scale/maintain a Design System? https://medium.com/s/story/the-design-system-decision-tree-edba9abdb83b

Slide 144

Slide 144 text

Contribution Templates - Detailed descriptions - Questions - Does your design pass color contrast ratio? - Is your design consistent with the core library? - Does your design follow basic UX best practices? - Source ﬁles and screenshots How to scale/maintain a Design System?

Slide 145

Slide 145 text

Write articles about major product updates, guidance, and interviews etc from time to time Inspire with stories How to scale/maintain a Design System? https://medium.com/segment-design

Slide 146

Slide 146 text

Measuring the impact of a Design System generally falls into two categories: subjective and objective. Measuring the impact How to scale/maintain a Design System? https://unsplash.com/photos/iftBhUFfecE

Slide 147

Slide 147 text

Subjective Measurement - How often do you ﬁnd yourself using the Design System? - What is one thing you would improve about the Design System? - On a scale of 1 (strongly disagree) to 5 (strongly agree), does the Design System improve your workﬂow? How to scale/maintain a Design System?

Slide 148

Slide 148 text

Objective Measurement - Does the Design System have a component library? - Does it have robust documentation? - Does it have a process? How to scale/maintain a Design System?

Slide 149

Slide 149 text

How to scale/maintain a Design System? https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f

Slide 150

Slide 150 text

How to scale/maintain a Design System? https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7

Slide 151

Slide 151 text

Takeaways

Slide 152

Slide 152 text

https://thedesignteam.io/designer-ﬁrst-world-problems-861e53c8ecf7

Slide 153

Slide 153 text

Be gardeners not gatekeepers, not police Takeaways

Slide 154

Slide 154 text

Be non-constraining Design a system that strikes a balance between general and speciﬁc so it’s neither too abstract nor too restrictive in application. Takeaways

Slide 155

Slide 155 text

Be regularly ﬁne-tuned while presenting and supporting your company’s core values in a visually cohesive way. Takeaways

Slide 156

Slide 156 text

Don’t forget about tooling Takeaways

Slide 157

Slide 157 text

Learn from others. Then make your choices. Takeaways

Slide 158

Slide 158 text

https://xkcd.com/927/

Slide 159

Slide 159 text

Nothing is particularly hard if you divide it in small jobs. — Henry Ford Takeaways

Slide 160

Slide 160 text

Design System Resources ● InVision Design System Series ○ https://www.invisionapp.com/design-system-manager/expert-advice/heartache-design-scale/ ● Adele ○ https://adele.uxpin.com/ ● Design Systems by Figma ○ https://www.designsystems.com/ ● Nathan Curtis ○ https://twitter.com/nathanacurtis ● Jina Bolton ○ https://twitter.com/jina ● Diana Mounter ○ https://twitter.com/broccolini ● ClarityConf ○ https://www.clarityconf.com/2019 ● Design System Slack Channel ○ http://design.systems/slack/

Slide 161

Slide 161 text

Thanks! TWITTER @pizza0502 MEDIUM @pizza0502 WEBSITE kwangyik.com