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.

Transcript

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

   View Slide

2. Bonjour
   👋
   

   View Slide

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
   

   View Slide

4. Why this topic?
   ❓
   4
   

   View Slide

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
   

   View Slide

6. What are
   multi-brand
   design systems?
   1.
   

   View Slide

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

   View Slide

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
   

   View Slide

9. That portfolio can even be:
   1.
   2.
   3.
   Multi-product
   Multi-brand
   Multi-platform
   9
   

   View Slide

10. Brand architecture models
    10
    

    View Slide

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
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

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
    

    View Slide

16. View Slide

17. View Slide

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
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

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
    

    View 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
    

    View Slide

24. How brand models
    shape design systems?
    1.
    

    View Slide

25. Credits: Sergej Spomer
    25
    

    View Slide

26. View Slide

27. Credits: Sergej Spomer 27
    

    View Slide

28. View 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
    

    View 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
    

    View Slide

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

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

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

    View Slide

37. View Slide

38. View Slide

39. View 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
    

    View 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
    

    View Slide

42. Design tokens:
    divide and conquer
    42
    

    View Slide

43. View Slide

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

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. What is a
    Design API ?
    2.
    

    View Slide

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

    View Slide

50. Design systems
    to the rescue
    Nowadays:
    

    View Slide

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

    View Slide

52. Design tokens
    

    View Slide

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

    View Slide

54. Design System
    Design team
    👩
    Engineering team
    Marketing team
    Accessibility team
    

    View Slide

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

    View Slide

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

    View 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
    

    View Slide

58. Demo of a
    design API
    4.
    

    View Slide

59. View Slide

60. specifyapp.com
    Wanna try?
    

    View Slide

61. Shoukran
    🙏
    @chuckn0risk • lucho.cool
    

    View Slide