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

Bonjour đź‘‹

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

âť“ Why this topic? 4

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

What are multi-brand design systems?

🤔 What does multi-brand even mean? 7

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

That portfolio can even be:

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

Brand architecture models 10

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.

12

13

14

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.

16

17

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.

19

20

21

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

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

How brand models shape design systems?

Credits: Sergej Spomer 25

26

Credits: Sergej Spomer 27

28

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

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

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

32

33

34

35

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

37

38

39

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

“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

Design tokens: divide and conquer 42

43

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

45

46

47

What is a Design API ?

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

Nowadays: Design systems to the rescue

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

Design tokens

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

Accessibility team đź‘© Design team Design System Marketing team Engineering team

Tool #2 Design API Tool #3 Tool #2

Design APIs are the logical evolution of design systems.

“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

Demo of a design API

59

Wanna try? specifyapp.com

Shoukran 🙏 @chuckn0risk • lucho.cool