How Design-Tokens Empower Multi-Brand Design Systems

A presentation at Into Design Systems in September 2021 in by Louis Chenais

Slide 1

Slide 1

How design tokens empower multi-brand design systems Louis Chenais Specify Into Design Systems #2 2021 Sept 28th

Slide 2

Slide 2

Bonjour 👋

Slide 3

Slide 3

I’m Louis Chenais Co-founder & Chief Evangelist • W3C Design Tokens Community Group Member • Design System aficionado Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir Find me on • @chuckn0risk • lucho.cool

Slide 4

Slide 4

❓ Why this topic? 4

Slide 5

Slide 5

What’s in store for us

  1. What are multi-brand design systems? 2. How brand models shape design systems? 3. What is a Design API? 4. Demo of a Design API

Slide 6

Slide 6

What are multi-brand design systems?

Slide 7

Slide 7

🤔 What does multi-brand even mean? 7

Slide 8

Slide 8

Many enterprise companies have a big product portfolio:

  1. Google 2. Atlassian 3. Microsoft 4. Amazon 5. Volkswagen 6. General Electric 7. Unilever 8. Procter & Gamble 8

Slide 9

Slide 9

That portfolio can even be:

  1. Multi-product 2. Multi-brand 3. Multi-platform 9

Slide 10

Slide 10

Brand architecture models 10

Slide 11

Slide 11

Branded House The firm is the brand. It’s a collective of complementary brands that cater to unique audiences but benefit from shared equity under the same umbrella.

Slide 12

Slide 12

12

Slide 13

Slide 13

13

Slide 14

Slide 14

14

Slide 15

Slide 15

House of brands The branding is focused on the subset brands. Subset brands benefit from a strategic or operational alliance, but may serve customers in different ways, without an obvious connection for the consumer.

Slide 16

Slide 16

16

Slide 17

Slide 17

17

Slide 18

Slide 18

Hybrid The hybrid model aims to incorporate elements of both the branded house and house of brands models to give each brand maximum advantage. Hybrid brand model is often the result of acquisitions.

Slide 19

Slide 19

19

Slide 20

Slide 20

20

Slide 21

Slide 21

21

Slide 22

Slide 22

Levers you can pull to adapt a multi-brand design system:

  1. Typography 2. Image art direction 3. Tone of voice 4. Animation 5. Audio guidelines 6. Content density 7. Color subsets 8. Colour 9. Iconography 22

Slide 23

Slide 23

Your branding is like water. Let it soak your products. Let it flood your market. Let it bring life to your whole organization. 23

Slide 24

Slide 24

How brand models shape design systems?

Slide 25

Slide 25

Credits: Sergej Spomer 25

Slide 26

Slide 26

26

Slide 27

Slide 27

Credits: Sergej Spomer 27

Slide 28

Slide 28

28

Slide 29

Slide 29

Branded house • One central design system feeding all the sub-brands • Design system is “strict” and changes are controlled • Overriding styles on components is discouraged 29

Slide 30

Slide 30

House of brands • One central design system feeding all the sub-brands with as much elements as possible • Every sub-brand has its own design system 30

Slide 31

Slide 31

Hybrid • Mix of branded house and house of brands • One or several design systems will feed the organization 31

Slide 32

Slide 32

32

Slide 33

Slide 33

33

Slide 34

Slide 34

34

Slide 35

Slide 35

35

Slide 36

Slide 36

Why Stitch was created • 30+ style sheets • Bloated code / Page load • No shared terminology • Updates near impossible • Brand expression hampered 36

Slide 37

Slide 37

37

Slide 38

Slide 38

38

Slide 39

Slide 39

39

Slide 40

Slide 40

Key metrics • 75% design and dev time savings leveraging re-usable code and design, netting $2.5M YOY cost savings • 50-80% time saving • 300% return on investment • 100% on brand 40

Slide 41

Slide 41

“Design systems are not just about style guides, component libraries, UI kits, etc. A good design system empowers change in your company culture.” — Jina Anne | @jina 41

Slide 42

Slide 42

Design tokens: divide and conquer 42

Slide 43

Slide 43

43

Slide 44

Slide 44

“Design tokens are a language for communicating intent between different parts of a system.” — Ethan Marcotte | @beep 44

Slide 45

Slide 45

45

Slide 46

Slide 46

46

Slide 47

Slide 47

47

Slide 48

Slide 48

What is a Design API ?

Slide 49

Slide 49

Current situation 🤕 Crafting cohesive user experiences across several platforms is a real challenge.

Slide 50

Slide 50

Nowadays: Design systems to the rescue

Slide 51

Slide 51

“A design system isn’t a project. It’s a product, serving products.” — Nathan Curtis | @nathancurtis

Slide 52

Slide 52

Design tokens

Slide 53

Slide 53

Design system Design tokens Components libraries Documentation Internal processes And many other things…

Slide 54

Slide 54

Accessibility team 👩 Design team Design System Marketing team Engineering team

Slide 55

Slide 55

Tool #2 Design API Tool #3 Tool #2

Slide 56

Slide 56

Design APIs are the logical evolution of design systems.

Slide 57

Slide 57

“An interoperable, guessable design API is the foundation of a fully networked design system, […]. It’s the next step in the evolution of design systems.” — Matthew Ström | A design API in practice

Slide 58

Slide 58

Demo of a design API

Slide 59

Slide 59

59

Slide 60

Slide 60

Wanna try? specifyapp.com

Slide 61

Slide 61

Shoukran 🙏 @chuckn0risk • lucho.cool