How design tokens
empower multi-brand
design systems
Louis Chenais
Specify
Into Design Systems #2
2021 Sept 28th
Slide 2
Slide 2 text
Bonjour
👋
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Why this topic?
❓
4
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
What are
multi-brand
design systems?
1.
Slide 7
Slide 7 text
What does multi-brand
even mean?
🤔
7
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
That portfolio can even be:
1.
2.
3.
Multi-product
Multi-brand
Multi-platform
9
Slide 10
Slide 10 text
Brand architecture models
10
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
14
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
20
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Your branding is like water. Let it soak
your products. Let it flood your
market. Let it bring life to your whole
organization.
23
Slide 24
Slide 24 text
How brand models
shape design systems?
1.
Slide 25
Slide 25 text
Credits: Sergej Spomer
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
Credits: Sergej Spomer 27
Slide 28
Slide 28 text
28
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Hybrid
•
•
Mix of branded house and house of brands
One or several design systems will feed the organization
31
Slide 32
Slide 32 text
32
Slide 33
Slide 33 text
33
Slide 34
Slide 34 text
34
Slide 35
Slide 35 text
35
Slide 36
Slide 36 text
Why Stitch was created
•
•
•
•
•
30+ style sheets
Bloated code / Page load
No shared terminology
Updates near impossible
Brand expression hampered
36
Slide 37
Slide 37 text
37
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
"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
Slide 42
Slide 42 text
Design tokens:
divide and conquer
42
Slide 43
Slide 43 text
43
Slide 44
Slide 44 text
"Design tokens are a language for
communicating intent between
different parts of a system."
— Ethan Marcotte | @beep
44
Slide 45
Slide 45 text
45
Slide 46
Slide 46 text
46
Slide 47
Slide 47 text
47
Slide 48
Slide 48 text
What is a
Design API ?
2.
Slide 49
Slide 49 text
Crafting cohesive user experiences
across several platforms is a real
challenge.
Current situation
🤕
Slide 50
Slide 50 text
Design systems
to the rescue
Nowadays:
Slide 51
Slide 51 text
"A design system isn’t a project. It’s a
product, serving products."
— Nathan Curtis | @nathancurtis
Slide 52
Slide 52 text
Design tokens
Slide 53
Slide 53 text
Design system
Design tokens
Documentation
Components
libraries
Internal
processes
And many
other things...
Slide 54
Slide 54 text
Design System
Design team
👩
Engineering team
Marketing team
Accessibility team
Slide 55
Slide 55 text
Design API
Tool #2
Tool #2
Tool #3
Slide 56
Slide 56 text
Design APIs are the logical evolution
of design systems.
Slide 57
Slide 57 text
"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