Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How design tokens empower multi-brand design systems

88447dbb966c62206c23f5ffd402af3b?s=47 Louis Chenais
October 01, 2021

How design tokens empower multi-brand design systems

Multi-Brand organizations need both flexibility and scalability to handle their branding at scale.

Let's see how different brand architecture models can shape design systems and foster brand consistency.

88447dbb966c62206c23f5ffd402af3b?s=128

Louis Chenais

October 01, 2021
Tweet

Transcript

  1. How design tokens empower multi-brand design systems Louis Chenais Specify

    Into Design Systems #2 2021 Sept 28th
  2. Bonjour 👋

  3. I'm Louis Chenais • • @chuckn0risk lucho.cool Co-founder & Chief

    Evangelist • • W3C Design Tokens Community Group Member Design System aficionado Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir Find me on
  4. Why this topic? ❓ 4

  5. 1. 2. 3. 4. What are multi-brand design systems? How

    brand models shape design systems? What is a Design API? Demo of a Design API What's in store for us
  6. What are multi-brand design systems? 1.

  7. What does multi-brand even mean? 🤔 7

  8. Many enterprise companies have a big product portfolio: 1. 2.

    3. 4. 5. 6. 7. 8. Google Atlassian Microsoft Amazon Volkswagen General Electric Unilever Procter & Gamble 8
  9. That portfolio can even be: 1. 2. 3. Multi-product Multi-brand

    Multi-platform 9
  10. Brand architecture models 10

  11. 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. Branded House
  12. 12

  13. 13

  14. 14

  15. 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. House of brands
  16. 16

  17. 17

  18. 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. Hybrid
  19. 19

  20. 20

  21. 21

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

    1. 2. 3. 4. 5. 6. 7. 8. 9. Typography Image art direction Tone of voice Animation Audio guidelines Content density Color subsets Colour Iconography 22
  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
  24. How brand models shape design systems? 1.

  25. Credits: Sergej Spomer 25

  26. 26

  27. Credits: Sergej Spomer 27

  28. 28

  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
  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
  31. Hybrid • • Mix of branded house and house of

    brands One or several design systems will feed the organization 31
  32. 32

  33. 33

  34. 34

  35. 35

  36. Why Stitch was created • • • • • 30+

    style sheets Bloated code / Page load No shared terminology Updates near impossible Brand expression hampered 36
  37. 37

  38. 38

  39. 39

  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
  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
  42. Design tokens: divide and conquer 42

  43. 43

  44. "Design tokens are a language for communicating intent between different

    parts of a system." — Ethan Marcotte | @beep 44
  45. 45

  46. 46

  47. 47

  48. What is a Design API ? 2.

  49. Crafting cohesive user experiences across several platforms is a real

    challenge. Current situation 🤕
  50. Design systems to the rescue Nowadays:

  51. "A design system isn’t a project. It’s a product, serving

    products." — Nathan Curtis | @nathancurtis
  52. Design tokens

  53. Design system Design tokens Documentation Components libraries Internal processes And

    many other things...
  54. Design System Design team 👩 Engineering team Marketing team Accessibility

    team
  55. Design API Tool #2 Tool #2 Tool #3

  56. Design APIs are the logical evolution of design systems.

  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
  58. Demo of a design API 4.

  59. 59

  60. specifyapp.com Wanna try?

  61. Shoukran 🙏 @chuckn0risk • lucho.cool