A presentation at Into Design Systems by Louis Chenais
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
What are multi-brand design systems?
🤔 What does multi-brand even mean? 7
Many enterprise companies have a big product portfolio:
That portfolio can even be:
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:
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
for free. You
can too.