Config 2024: Delivering a multi-sub-brand design system for e-commerce | Figma

Summary

Die Zalando-Design-System-Team präsentiert die Umgestaltung ihres Design-Systems, um eine visuelle Sprache in Einklang mit den unterschiedlichen Stilen ihrer Kategorien zu schaffen. Durch das Einführen von Design-Token und themenbasierter Gestaltung ermöglichen sie eine skalierbare visuelle Variation, die die Markenintegrität beibehält und die Bedürfnisse einer pan-europäischen Mode- und Lifestyle-Plattform erfüllt. Das Ergebnis ist eine gestraffte Benutzererfahrung, die die Aufmerksamkeit verdoppelt und neue Luxusmarken anzieht.

Takeaways

• 🌟 Zalando ist ein führendes Multi-Brand-Fashion- und Lifestyle-Destination in Europa mit über 6.000 Marken, 50 Millionen Kunden, 25 Ländern und 23 Sprachen.
• 🛍️ Das Design-System von Zalando wurde 2019 eingeführt und hat sich von der frühen Akzeptanz bis zur heutigen Cross-Plattform-Akzeptanz entwickelt.
• 🎨 Die Design-System-Team besteht aus 16 Personen, die gleichermäß zwischen Ingenieuren und Designern aufgeteilt sind, unterstützt von einem Projektmanager.
• 🔄 Zalando hat sich bewusst von einer serviceorientierten Mentalität hin zu einer produktzentrierten Mentalität verschoben, um die Design-System-Vision und -Strategie zu stärken.
• 🛠️ Die Design-Tokens wurden eingeführt, um eine skalierbare und konfigurierbare visuelle Sprache zu ermöglichen, die auf verschiedenen Themen basiert.
• 🎭 Das Design-System wurde für die Designer-Erfahrung überarbeitet, um eine geschützte und hochwertige Oberfläche für Luxusmarken zu bieten.
• 📈 Durch die Einführung von Themen und Design-Tokens hat Zalando die Möglichkeit erhalten, die visuelle Sprache auf einer größeren Skala zu variieren, ohne die Erfahrung oder Markenintegrität zu brechen.
• 🔑 Die Design-Tokens wurden semantisch und einfach gehalten, um eine leichte Anwendung und Verständlichkeit für alle zu gewährleisten.
• 📚 Zalando hat eine Reihe von Prinzipien entwickelt, um die Theming-Konzepte zu regeln und zu vereinfachen, einschließlich der Ein-Seite-Ein-Thema-Regel und der Kohärenz-Priorisierung.
• 👥 Es gab eine enge Zusammenarbeit mit dem Brand-Team, um sicherzustellen, dass die Markenidentität in allen Themen aufrechterhalten wird.
• 📈 Die Einführung von Themen hat zu einer positiven Kunden- und Markenpartner-Rückmeldung geführt, mit einer Verdopplung der Gesamtengagement-Rate und der Aufnahme von mehr als 40 neuen Luxusmarken.

Q & A

Was ist das Hauptthema des Vortrags von Cheryl und ihren Kollegen?

Das Hauptthema des Vortrags ist die Überarbeitung des Designsystems von Zalando, um eine visuelle Sprache in großem Maßstab zu ermöglichen und dabei die Variation zu steuern.

Welche Rolle spielt die Tokenisierung im Zalando-Designsystem?

Die Tokenisierung ermöglicht es, das Design in einer skalierbaren Art zu gestalten und zu variieren, indem sie Designentscheidungen repräsentiert, die je nach Thema unterschiedliche Werte annehmen können.

Wie viele Länder und Sprachen deckt Zalando ab?

Zalando ist in 25 Ländern tätig und bietet seinen Service in 23 Sprachen an.

Was ist die Zielgruppe des Design-Systems von Zalando?

Die Zielgruppe des Design-Systems umfasst über 200 Produktdesigner, Contentdesigner und Userforscher, sowie über 500 Web- und App-Entwickler.

Wie unterscheidet sich das Design-System von Zalando vor und nach der Überarbeitung?

Nach der Überarbeitung ermöglicht das Design-System eine größere Variation der visuellen Sprache, ist jedoch gleichzeitig kohärenter und konfigurierbarer ohne den Aufwand von hackigen Lösungen.

Was ist der Unterschied zwischen dem 'Base Theme' und den anderen Themen im Zalando-Designsystem?

Das 'Base Theme' repräsentiert die Standarderfahrung von Zalando, während die anderen Themen, wie das Designer-Erlebnis, eine spezifischere und stilisiertere Ausprägung der visuellen Sprache bieten.

Was ist das Hauptziel hinter der Einführung von Design-Token?

Hauptziel der Einführung von Design-Token ist es, die Möglichkeit themenbasierter Designs in einer skalierbaren und konfigurierbaren Art zu ermöglichen.

Wie hat sich die Einführung von Design-Token auf die Zusammenarbeit zwischen Designern und Entwicklern ausgewirkt?

Die Einführung von Design-Token hat zu einer engeren Zusammenarbeit zwischen Designern und Entwicklern geführt, indem sie eine gemeinsame Sprache und ein Verständnis für die Anwendung von Designentscheidungen in verschiedenen Themen schafft.

Was ist das Konzept hinter der Designer-Theme-Implementierung?

Das Konzept hinter der Designer-Theme-Implementierung ist es, einen geschützten Raum mit einem erweiterten Design zu schaffen, der die visuelle Welt von Luxury-Marken widerspiegelt und die Marken stärker hervorhebt.

Wie hat sich die Reaktion der Kunden und der Markenpartner auf die Design-Änderungen bewegt?

Die Reaktion der Kunden und der Markenpartner auf die Design-Änderungen war sehr positiv, was zu einer Verdopplung der Gesamtengagement-Rate führte und es Zalando ermöglichte, mehr als 40 neue Luxusmarken zu gewinnen.

Was sind die drei wichtigsten Lehren, die aus der Einführung des Design-Systems von Zalando gezogen wurden?

Die drei wichtigsten Lehren sind: 1) Design-Token sind ein Denkansatzwechsel, der durch Governance widerstandsfähig sein muss; 2) Tokens müssen im Einklang mit der Markenarchitektur stehen; 3) Es ist wichtig, frühzeitig zu beginnen und zu iterieren, um die Qualität des Design-Systems zu bewerten und zu verbessern.

Outlines

00:00

🌟 Einführung in das Design-System von Zando

Dieser Absatz präsentiert Cheryl, Senior Product Managerin bei Zando, und ihre Kollegen Leon und Gonzalo. Sie erläutern, dass die dargestellten Bildschirme verschiedene Kategorien eines einzigen Produkts zeigen und nicht Untermarken. Sie möchten die Neugestaltung ihres Design-Systems erklären, das es ermöglicht, visuelle Sprache in großem Maßstab zu variieren. Dazu gehört das Tokenisieren des Systems und das Erstellen des ersten Themes parallel. Sie betonen, dass dies eine einzigartige Vorgehensweise ist, die von der Organisationsstruktur und Strategie abhängt, aber sie hoffen, dass andere von ihren Erfahrungen lernen können. Zudem wird das Unternehmen Zando kurz vorgestellt, das als führendes Multi-Brand-Fashion- und Lifestyle-Destination in Europa gilt.

05:02

🎨 Die Bedeutung von Design-Token und die Einführung von Theming

Cheryl und ihr Team diskutieren, wie sie die visuelle Sprache variieren können, ohne die Erfahrung zu stören oder die Markenintegrität zu gefährden. Sie beschreiben die Zando-Brand-Zugangsmerkmale und wie diese in der Benutzeroberfläche umgesetzt werden, unter Verwendung von Color Snap, einem Werkzeug, das Farbtöne dynamisch aus der Fotografie zieht und sie mit den definierten Farbattributen abgleicht. Sie führen in das Konzept der Design-Token ein, das es ermöglicht, die visuelle Sprache durch theming in einer skalierbaren Weise zu gestalten. Sie verwenden den Vergleich mit Ryan Gosling in verschiedenen Rollen, um das Konzept der Tokens zu veranschaulichen.

10:05

🛍️ Designer-Erfahrung und die Anwendung von Design-Token

Der Absatz konzentriert sich auf die Designer-Erfahrung, bei der Zando die Möglichkeit bieten möchte, Luxusmarken auf der Plattform darzustellen. Die Kunden suchten aktiv nach Marken, die Zando nicht hatte, und die Marken waren interessiert, Zando beizutreten, wenn ein entsprechender Design-Raum geschaffen wurde. Das Team arbeitete an der theming-Technik, um diese Anforderungen zu erfüllen, und stellte fest, dass Design-Token semantisch und einfach sein sollten, damit jeder weiß, wo und wie sie angewendet werden. Sie verwenden kurze Namen basierend auf Typ, Kategorie, Funktion und optionalem Zustand für die Tokens und betonen die Flexibilität der Tokens, indem sie zeigen, wie sie verschiedene Werte annehmen können, um die visuelle Sprache zu konfigurieren.

15:05

🔄 Herausforderungen und Lernpunkte beim Aufbau des Design-Systems

In diesem Absatz werden die Schwierigkeiten und Lernpunkte bei der Entwicklung des Design-Systems diskutiert. Sie beschreiben, wie man Design-Token sorgfältig auswählt und benutzt, um eine Übersichtlichkeit und Kohärenz zu gewährleisten. Sie betonen die Notwendigkeit, Grenzen zu definieren und die Flexibilität des Systems zu bestimmen. Sie teilen mit, dass interne Diskussionen ein gesundes Zeichen für das Fortkommen des Teams sind und dass es wichtig ist, frühzeitig zu beginnen und zu iterieren. Sie reflektieren über die erfolgreiche Umsetzung des Designer-Themes und wie es die Grundlage für weitere theming-Prinzipien und -Anwendungen bildet.

20:07

📚 Schulung und Weiterentwicklung des Design-Systems

Der letzte Absatz beschäftigt sich mit der Schulung und dem fortlaufenden Aufbau des Design-Systems. Sie erklären, wie wichtig es ist, die Community über Design-Token und theming zu informieren, um eine Kultur der gemeinsamen Verantwortung und Wiederverwendung zu fördern. Sie teilen ihre drei wichtigsten Erkenntnisse mit, darunter die Bedeutung des Design-Tokens als Veränderung des Denkens, die Notwendigkeit einer robusten Governance und die Bedeutung der Ausrichtung der Tokens an die Markenarchitektur. Sie bedanken sich für die Teilnahme und beenden die Präsentation.

Keywords

💡Design System

Ein Design System ist eine Sammlung von Regeln, Komponenten und Arbeitsabläufen, die Unternehmen nutzen, um ihre Produkte oder Dienstleistungen konsistent und effizient zu gestalten. Im Video wird das Design System von Zalando als zentrales Element beschrieben, das für die Erstellung einer einheitlichen und skalierbaren visuellen Sprache verantwortlich ist.

💡Visual Language

Die visuelle Sprache ist die Art und Weise, wie Informationen und Botschaften durch Grafiken, Farben, Typografie und andere visuelle Elemente übermittelt werden. Im Kontext des Videos bezieht sich die visuelle Sprache auf die Gestaltungsentscheidungen, die für die Zalando-Plattform getroffen wurden, um verschiedene Marken und Kategorien einzuheitlich darzustellen.

💡Tokenizing

Tokenizing ist der Prozess, bei dem Design-Entscheidungen in sogenannte Tokens umgewandelt werden, die in verschiedenen Design-System-Komponenten wiederverwendet werden können. Im Video wird gezeigt, wie Zalando Tokens verwendet, um die visuelle Sprache flexibel und skalierbar zu gestalten.

💡Theming

Theming bezieht sich auf die Anwendung spezifischer visueller Eigenschaften auf verschiedene Bereiche oder Marken innerhalb einer Plattform. Im Video wird das Einführen von Theming in das Zalando-Design-System beschrieben, um verschiedene Marken und Kategorien besser voneinander abzuheben.

💡Brand Integrity

Brand Integrity ist die Einheitlichkeit und Erkennungsfähigkeit einer Marke, die über verschiedene Kanäle und Produkte hinweg aufrechterhalten wird. Im Video wird diskutiert, wie Zalando die Brand Integrity beibehält, während es gleichzeitig mehr Variation in der visuellen Sprache ermöglicht.

💡Zalando

Zalando ist ein führendes europäisches Unternehmen für Multi-Brand-Moda und Lifestyle, das in 25 Ländern und 23 Sprachen tätig ist. Im Video wird erläutert, wie das Unternehmen sein Design-System anpasst, um den sich ändernden Anforderungen der Geschäftsstrategie gerecht zu werden.

💡Designer Experience

Designer Experience bezieht sich auf die Gestaltung und das Erlebnis für Kunden, die nach Luxusmarken suchen. Im Video wird beschrieben, wie Zalando sein Design-System anpasste, um eine spezielle Erfahrung für Kunden zu schaffen, die Luxusmarken auf der Plattform suchen.

💡Semantic Tokens

Semantic Tokens sind benannte Werte, die eine bestimmte Bedeutung in einem Design-System haben und je nach Kontext unterschiedlich interpretiert werden können. Im Video wird erklärt, wie Zalando semantische Tokens verwendet, um die Anwendung von Design-Entscheidungen in verschiedenen Themen zu erleichtern.

💡Coherence

Coherence bezieht sich auf die Einheitlichkeit und Verständlichkeit innerhalb eines Designs oder einer Gruppe von Designs. Im Video wird die Bedeutung von Kohärenz diskutiert, um sicherzustellen, dass die verschiedenen Themen in Zalando's Design-System harmonisch zusammenarbeiten.

💡Governance

Governance ist der Prozess der Verwaltung und Kontrolle der Ressourcen und Prozesse innerhalb einer Organisation. Im Video wird die Einführung von Governance-Prinzipien beschrieben, um die Verwendung von Themen im Design-System zu steuern und zu koordinieren.

💡Maturity Stages

Maturity Stages beziehen sich auf die verschiedenen Entwicklungsphasen eines Design-Systems, von der frühen Annahme bis hin zur Reife. Im Video wird die Position von Zalando im Zusammenhang mit den Reifephasen seines Design-Systems diskutiert, um die Notwendigkeit der Anpassung des Systems zu betonen.

💡Product Strategy

Eine Produktstrategie ist ein Plan, der die Ziele, Richtung und Prioritäten für die Entwicklung eines Produkts oder einer Produktlinie festlegt. Im Video wird die Rolle der Produktstrategie bei Zalando hervorgehoben, um die Anforderungen der Design-System-Entwicklung und -Anpassung zu leiten.

💡Cross-Platform Adoption

Cross-Platform Adoption bezieht sich auf die Nutzung und Annahme eines Design-Systems oder einer Technologie auf verschiedenen Plattformen. Im Video wird die breite Annahme des Zalando-Design-Systems auf verschiedenen Plattformen als ein Indikator für seine Erfolgsgeschichte und seine Notwendigkeit der Weiterentwicklung diskutiert.

Highlights

Cheryl, Senior Product Manager bei Zalando, präsentiert die Neugestaltung des Designsystems für visuelle Sprachvariationen.

Zalando ist eine führende Multi-Brand-Fashion- und Lifestyle-Destination in Europa mit über 6.000 Marken und 50 Millionen Kunden.

Das Design-System-Team besteht aus 16 Personen, die zwischen Ingenieuren und Designern aufgeteilt sind.

Das Design-System wurde 2019 eingeführt und hat sich von der frühen Annahmephase bis zur reif gestalteten Stufe entwickelt.

Zalando hat sich bewusst entschieden, von service-orientiert zu produktzentriert zu wechseln, um den Design-System-Vision und die Produktstrategie zu stärken.

Das Design-System wurde erweitert, um mehr Variation in der visuellen Sprache zu ermöglichen, ohne die Erfahrung oder Markenintegrität zu brechen.

Design-Token wurden eingeführt, um theming in einer skalierbaren Weise zu ermöglichen.

Die Designer-Erfahrung war der erste Anwendungsfall für das Theming, mit einem Fokus auf Luxusmarken.

Die Designer-Vision wurde durch ein Metaphor des Designer Boutique-Raums kommuniziert, um die Erfahrung neu zu gestalten.

Zalando nutzt Design-Token, um eine konsistente und konfigurierbare visuelle Sprache zu schaffen.

Die thematische Typografie wurde angepasst, um die spezifischen Bedürfnisse jeder Kategorie widerzuspiegeln.

Die Einführung von Design-Token hat zu einer Vereinfachung des Farbsystems bei Zalando geführt.

Die Kunden- und Markenpartnerfreundlichkeit der Design-Änderungen wurde positiv aufgenommen, mit einer Verdopplung der Gesamtinteraktion.

Mehr als 40 neue Luxusmarken wurden erfolgreich zu Zalando onboarded.

Zalando hat eine Reihe von Theming-Prinzipien entwickelt, um die Kohärenz und die Markenintegrität aufrechtzuerhalten.

Die Einführung von Design-Token erfordert eine Veränderung des Denkens und eine stärkere Resilienz durch Governance.

Zalando hat drei Schlüssel-Lernpunkte aus dieser Erfahrung gezogen, darunter die Bedeutung von Design-Token als Veränderung des Denkens.

Die Schulung und Onboarding der Community ist entscheidend für den Erfolg des Theming in großen Organisationen.

Transcripts

[Music]

hi everyone both here in the room and

watching online we've traveled all the

way from Germany and Ireland and are

really excited to be here today I'm

Cheryl senior product manager at zando

I've been working on our design system

team for close to two years now and I'm

here with my colleagues Leon and Gonzalo

senior product designers on the zelando

Design Systems team as

well now when you look at these three

screens what do you think they

show and how do you think they might be

related maybe you're thinking something

along the line of sub Brands because

well that's the title of our talk but

actually there's a plot twist

what you see here are not sub Brands but

more like distinct categories of a

single

product these categories all live

together on the zando fashion store but

have a slightly different style today we

want to share with you how and why we

revamped our design system to enable

this visual language variation at scale

this includes tokenizing our system and

building the First theme in parallel of

course this was our unique approach

because it always depends on your

organizational setup and strategy but we

still think and hope that you can use

some of our

learnings to set the stage we want to

give you a short intro about

zelando zelando is a leading multi-brand

fashion and lifestyle destination in

Europe with over 6,000 Brands 50 million

customers spanning across 25 countries

and 23 languages and of course we want

to continue expanding as a paneuropean

ecosystem for fashion and lifestyle

e-commerce now when we distill that

scale down to design at solando our

community includes over 200 product

designers content designers and user

researchers and here I'd like to give a

quick shout out to the design Community

who are having a watch party in Berlin

tonight to cheer us on

[Applause]

the design system team consists of 16

people which is split equally between

engineers and designers with 1 pm myself

support this community as well as over

500 web and app

Engineers the design system has been

around since 2019 and has to keep up

with the needs of this many people and

growing over the years we've moved past

the early adoption stages seeing healthy

cross-platform adoption

and to leverage spark Box's maturity

stages you can say we sit somewhere

between 3 and 4 wanting to evolve the

design system as you would any external

product that is also the reason why I'm

here

today building a mature design system

means we're now set we're now faced with

a new set of challenges such as

continuously demonstrating value and

staying relevant to our users as the

organization evolves and to overcome

them we've consciously decided to shift

our mindset between being service

oriented versus product Centric that

means we operate as a full-fledged

internal product tightly integrating the

PM role and Engineering teams and

prioritizing areas of focus that tie

back to a clear design system vision and

product strategy which then Lads back to

a bigger picture

C's current strategy across its multiple

categories and offerings focuses on

creating more tailored experiences

hitting to our customers unique

lifestyle needs in different moments of

their shopping Journey For example when

looking for beauty products or designer

luxury goods seeking inspirational

stories or joining the plus program for

our most loyal

customers these offerings are connected

but may need different levels of visual

distinction to amplify them

independently from the core

brand to contribute to these changing

needs of our business and in in turn

enable teams who are building the

digital experiences the design system

needed to De average the visual language

so our guiding question was how might we

enable more variation in our visual

language at

scale but also the underlying question

needed to address how much variation

could we allow without breaking the

experience or in other words what level

of brand Integrity do we want to

maintain yeah and to dive a little bit

deeper into those questions let's take a

look at the zando

brand our character traits are the core

of who we are as a company and brand and

those are inclusive bold

trustworthy playful humble and values

driven and as you can see on product

this translates into this very vibrant

colorful

UI which is enabled through a tool in

the system called Color snap it pulls

the color from the photography

dynamically and matches them with our

defined color

attributes the tool also sets the color

of the text to be either white or black

to ensure accessible color contrast

combinations and and as a result we

support a default a monochrome light and

a monochrome dark color

scheme but it also means that we don't

need to store this whole range of colors

as a fixed set in the system helping us

to maintain a very streamlined

palette our primary brand color is

orange used in the logo brandmark that

is also known as the shoe tip and

besides that we have a typography

pairing of a sun and a serif

font and all of this together makes up

the default zando experience or what we

today refer to as the base

team and as Sher mentioned earlier we

needed to accommodate for more variation

transitioning from this very consistent

visual language to one that's more

coherent and

configurable and the way to do that in a

sustainable way without creating any

hacky Solutions was by introducing

theming to the system and uh through

design

tokens so everyone knows what a design

token is

right well the official way we

introduced design tokens to our

community was to this

guy and yes you can tell that we did

this a year

back Ryan Gosling like any other another

actor plays different roles in different

movies let's say he is a design choken

and movies are

themes so in Barbie Ryan Gosling is

equal to Ken but in Drive he's

driver while in Blade Runner

2049 he is

K he is the same person but he assumes

different personalities based on the

movie like a token that assumes

different values based on the

theme and you can keep adding tokens to

describe more

characteristics similarly design tokens

are used to represent different

properties depending on the

theme in summary design tokens are

designed decisions that make theming

possible in a scalable way and for us

the first use case to bring this to

reality was the designer

experience yes and now what do we mean

by the designer experience so this is

referring to the core Journey for

customers that look for any luxury

Brands like mes maella Gucci Etc on our

website or app and by the end of 2022

research showed that customers were

actively searching for these brands that

we didn't yet carry at zando at the same

time the the brands expressed interest

in joining if we provided a more

protected space with an elevated design

that connects to the visual world of

luxury Brands so this presented a big

business opportunity and created

momentum for us to kick off

theming when we started we had little to

no understanding though how theming

would actually work so to keep things

moving in sync con Alo and I joined the

designer project team to work together

and inform the theming explorations on

the system

side and the initial Explorations that

you can see here were created on a scale

of incremental evolutionary and

revolutionary to evaluate with Engineers

what types of changes can potentially be

implemented through theming but also

answer questions like how many changes

can we make before coherence is lost or

what are the minimum requirements to

create a credible designer

destination and the vision for designer

came in form of a metaphor of a designer

Boutique space this was a really

powerful tool to bring everyone on the

same page and served as this guiding

principle to reimagine the whole

experience for example instead of using

Color snap we worked with lots of wides

space a minimalistic palette to let the

image shine and created these big

upscale headlines changed media ratios

to be more immersive and also

experimented with motion and 3D models

for an overall crafted and curated

touch to systematically approach visual

language differentiation we leverage

zalando's existing character traits and

focus on those that align with each

category specific needs amongst other

things this method then defines a unique

personality and style that's still

closely tied to the core for example

designer is more Valu driven and less

playful while for beauty of sports the

character might be

different and since for us theming is

really about extending the expression of

our brand alongside its brand

architecture a close collaboration with

the brand team was an essential part of

the whole

process one important outcome was for

example that we made sure to have the

same look and feel on and off product

because the way we see themes is that

they should spend across all the touch

points now let's jump into our approach

to design tokens which was heavily

informed by designer as our first use

case we focused on building our tokens

to be semantic and simple the reason for

that is that we wanted for anyone to

understand how and where to apply it

them we use short names based on its

type category function and the optional

State and these design tokens represent

different properties depending on the

theme they are always the same for all

themes and the fact that they can assume

different values is what makes our

visual language

configurable as an example of

flexibility these two screens are

basically the same but with different

values

applied allowing us to keep the

Integrity of the user experience and

accessibility through semantic

override now going down another level in

bottons for example we assign different

background color tokens for a primary

and a secondary button one has a primary

background and the other one is

transparent

but for the interactive States they use

a single tokens for

hover another one for

press

Focus

Etc and for disabled States we use a

single opacity token for every

interactive

component which makes makes them

slightly transparent against any

background color this allowed us to keep

a really short set of around 35 color

tokens covering background borders and

text we evaluated covering all theme

requests only with semantic tokens but

we would have end up with a huge list of

tokens making everyone's life harder and

of course we didn't want

that so we used component tokens for

specific cases to introduce a higher

level of configuration

for instance in the designer theme we

needed to make ourlink typography

lighter hide the icon and change the

color component tokens was the only way

to Target these properties without

affecting other

components but we do this only for a

limit amount of components only for so

far we carefully assess every use case

and we Jo expose directly these tokens

to our

consumers in figma these are private to

our

libraries here you can see that we

heavily rely on typography variables for

these kind of

tokens so what's worth for us when

building design tokens is adding only

what's needed so don't try to cover

every possible use case discuss the

names with the team and bring all the

voices from iOS Android web Engineers

design and product

and extremely important Define

boundaries otherwise things might get

chaotic define how flexible you want to

be and how much can you actually

support but in reality it's never that

simple in fact this is one of the most

challenging steps in this process and it

still happens to us from time to time

going through questions like should we

allow this or should we restrict that

where sometimes this can lead to discuss

the whole themeing

concept So to avoid these heada the main

thing to keep in mind is defining and

documenting definitions as a team accept

platform differences and nuances and

don't don't expect to get it right

immediately it's just important to start

early and

iterate finally Embrace these internal

discussions they are a healthy indicator

of your team's progress to

maturity by building these Concepts and

capabilities at the same time as the

designer theme meant that we were able

to address most of the requirements

through

theming except for any major layout

changes motion and then of course new

features but everything else you see

here is now configurable within a

defined set of

boundaries for instance the designer

typography stack we adjusted only the

headline Styles keeping the same font

families but making them bigger lighter

and also a bit

shorter the body Tex Styles though

remain unchanged due to their widespread

usage in

components and when it comes to color we

kept the brand orange for designer but

use it sparingly focusing mainly on a

monochrome black white gray palette

any tactical colors for error or success

messages remain the same across all the

themes and applying these decisions to

one of the key components in e-commerce

our product card led to some small but

very impactful changes for example

through a dedicated s color token and

also component level tokens to adjust

multiple values of the wish list Button

making it appear transparent against the

gray image background and having a black

selected

State putting this product card in

context for example in the component

that we call showstopper you see here

that the background color

changes the text uses the defined

headline

Styles the themed link and also image

ratio and then again on page level you

may notice now that in this example of a

brand

homepage the bass and designer theme are

structurally very similar they use the

same code the same figma files but they

ultimately look quite

different and that was also the reason

we were super curious how customers and

brand Partners would receive these

significant

changes but in the end we got very

positive results the overall engagement

doubled and over the last month we were

able to onboard more than 40 new luxury

Brands to

[Applause]

zelando ultimately we were able to bring

together all of this great work on both

projects which was really an ambitious

goal and for that we needed a solid

focus on prioritization and sequencing

in place with high cross team dependency

on the design system where more than 120

components across multiple screens and

platforms required theming product

managers across different teams needed

to be in sync for delivery for us that

meant adopting an iterative approach to

component migration this was based on

which screens were needed first for user

acceptance testing and initial

launch following the success of the

First theme we knew that we would have

to address new use cases soon along with

questions around

governance being one company with a

well-defined visual identity we were

asked things like well who gets a theme

and who decides that how would we avoid

friction this needed to be addressed and

tackled through the introduction of

processes and theming

principles the principles are the result

of a full day workshop with the whole

systems team and multiple iterations as

an example we have the onepage one theme

principle which ensures that designs

always follow the primary theme on a

page avoiding having multiple visual

languages mixed on the same screen or

prioritize coherence meaning keeping

established patterns and being mindful

of themes coexisting in harmony across

the product without any one of them

stealing the spotlight

and the First new theme we applied and

stress tested these principles against

was zando stories and zando stories is

one of the different categories through

which we aim to bring more inspirational

fashion and culture content to our

platform stories now also has a

dedicated typ stack to reflect the more

editorial nature of the content and it

uses a dark color scheme as default

the use case was also a great

opportunity to extend the existing

theming capabilities evaluating which

ones have the highest potential to be

reusable for other themes as well and if

you have a clear product Vision it

really helps to make more future

friendly decisions on what to introduce

to the

system our timing was also quite lgy fig

released variables around the same time

as we were documenting our themes in

figma we use one variables collection

for these three

themes and in here we store all of our

semantic and component

tokens at the same time this collection

loads separate collections for the color

schemes and in here we only have the

color

tokens this means that a theme can have

more than one color scheme and they can

be nested and combined as much as

needed and as everything is managed

through design tokens all of our

components are compatible with color

schemes all this work resulted in

substantial simplifications like like

removing light dark and inverted

variants and also Concepts like onl and

on

dark one of the many benefits of this

approach is that in the future we can

easily build dark mode variations for

each theme or even a specific campaign

color

scheme but our work didn't stop there we

also have to bring everyone on the same

page through Education and Training

because design tokens and theming are a

big mindset

shift we onboarded our community through

different for formats such as deep D

sessions usability tests and medium

articles from the design and Engineering

point of view this onboarding material

Fosters a culture of Shar ownership

making others bu into the idea of

reusability and coherence which is

critical for the success of theming in a

large

organization and one of the most

rewarding parts for us

was definitely the excitement and

appreciation of our community during the

presentation of theming and the

onboarding

sessions reflecting back this has been a

great opportunity to assess the quality

of the design system itself we know that

a very strict and consistent design

system makes development extremely fast

but as the company evolves and the

business requirements shift you will see

more deviation

we needed to Envision the long-term

product goals Beyond serving just the

immediate needs where it becomes a

requirement to handle flexibility as

part of the design system itself and

simplify it along the way and with

that we want to share with you our three

key learnings from this

experience one recognizing that design

tokens are a mindset

shift to be scalable it needs to be

resilient through governance and princip

and at its core tokens need to align

with your brand

architecture and that's a wrap thank you

for joining us

[Music]