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

How design tokens empower multi-brand design systems

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.

Louis Chenais

October 01, 2021
Tweet

More Decks by Louis Chenais

Other Decks in Design

Transcript

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

    View full-size slide

  2. 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 full-size slide

  3. Why this topic?

    4

    View full-size slide

  4. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 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 full-size slide

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

    View full-size slide

  9. Brand architecture models
    10

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. How brand models
    shape design systems?
    1.

    View full-size slide

  16. Credits: Sergej Spomer
    25

    View full-size slide

  17. Credits: Sergej Spomer 27

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. Hybrid


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

    View full-size slide

  21. Why Stitch was created





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

    View full-size slide

  22. 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 full-size slide

  23. "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 full-size slide

  24. Design tokens:
    divide and conquer
    42

    View full-size slide

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

    View full-size slide

  26. What is a
    Design API ?
    2.

    View full-size slide

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

    View full-size slide

  28. Design systems
    to the rescue
    Nowadays:

    View full-size slide

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

    View full-size slide

  30. Design tokens

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Design API
    Tool #2
    Tool #2
    Tool #3

    View full-size slide

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

    View full-size slide

  35. "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 full-size slide

  36. Demo of a
    design API
    4.

    View full-size slide

  37. specifyapp.com
    Wanna try?

    View full-size slide

  38. Shoukran
    🙏
    @chuckn0risk • lucho.cool

    View full-size slide