Meetup: "D'Migratioun vum E-Commerce Design System" bei L'Oréal

Dësen Artikel erzielt vun der Presentatioun vun der Daphna Keim , Design Lead bei L'Oréal, an hirem Team vun de Produktdesigner Yann Stephant , Romain Allain an Thirin Ariaratnam , beim Meetup, deen den 29. Februar 2024 am UX-Republic Hub ofgehale gouf. D'Thema vum Owend war: "Migratioun vum E-Commerce Design System bei L'Oréal: Erausfuerderungen a Léisungen."

D'Daphna Keim ass bei der D2C Factory bäikomm - verantwortlech fir all d'E-Commerce-Site vum Grupp ze produzéieren - am Joer 2023. No hirer Arrivée als neien Design Lead, huet si verschidde organisatoresch Probleemer an dësem Weltleader a Schéinheet identifizéiert. D'Zil vun dëser Konferenz war d'Aarbecht ze ënnersträichen, déi an engem Joer erreecht gouf, Aarbecht déi den E-Commerce Ökosystem zu L'Oréal déif transforméiert huet.

D'Arrivée vun engem neien Design Lead bei L'Oréal: eng Verréckelung an der Organisatioun vun der Grupp

Kontext: den Ökosystem vun engem D2C

Ier Dir d'Erausfuerderungen a Léisunge virstellt, ass et wichteg zréck op d'Fundamenter ze goen. L'Oréal schafft a 50 Länner, déi direkten E-Commerce ubidden, an huet 237 "White Label" Relais Sites. Dem Daphna Keim seng Equipe schafft mat zwou externen Agencen, d'Äquivalent vu 7 Produktdesigner. Dëst entsprécht also engem Team vun 10 Produktdesigner a 400 Entwéckler fir all Site.

Wéi d'Daphna Keim weist, stellt L'Oréal 4 Haaptspiller vir:

Corporate Équipë : Si iwwerwaachen all global Projeten déi dann an d'Divisiounen, Zonen a Marken kaskadéieren. Haut këmmeren si sech ëm all E-Commerce-Saache a verwalten de wäisse Label.
Divisiounen : Luxus, CPD (Consumer Product), DPP (Professional Products Division), Derma Beauty.
Beräicher geographesch : SAPMENA, LUSA, Nordasien, Europa, etc.
Marks : 70 Marken déi elo international sinn, dorënner 34 am E-Commerce.

Si insistéiert drop, datt si ervirhiewe wëll, datt "jiddweree vun dëse Leit potenziell Gespréichspartner sinn, mat deenen si Iddien austausche wäerten, a mat deenen si Ufroen kënne stellen".

NGlora Produit Iwwersiicht

NGlora ass eng White-Label -Léisung, déi aktuell vun de Corporate- an IT-Teams geréiert gëtt. Méi genee gesot ass et e Produkt, dat op der Salesforce-Plattform baséiert ass , déi si benotzt hunn, fir all hir E-Commerce-Säiten ze kreéieren, mat engem Mobile-First-Usaz. D'Iddi war, eng eenzeg Léisung mat enger eenzeger Architektur ze hunn, wou all Variatiounen am Code präsent wieren. Dëst géif et all Site erlaben, déi Komponent(en) einfach ze konfiguréieren, déi se brauchen.

D'Daphna Keim erkläert wéi NGlora funktionnéiert:

Mir fannen éischt de Ingenieur Léisung, déi iwwersetzt op de Kär System. Op der Designsäit ass säin Team verantwortlech fir all d'Features vum wäisse Label ze designen. "Wat mir maachen ass wierklech reng UX: d'Kaafrees, d'Konsumentrees an heiansdo kreéiere mir Variatiounen fir verschidden Entitéiten."
Da ginn et wat mir nennen Layer Beräicher déi vun de geographesche Beräicher gehandhabt ginn, ënnert der Leedung vun den IT-Gruppen. Dëst konzentréiert sech op alles lokal (Bezuelmethoden, Loyalitéit Programmer gezielt an engem Land, etc.)
Schlussendlech ënnerscheede mir de Brand Layer déi de ganzen UI Iwwerlager bezeechent. Dëst ass spezifesch fir all Mark.

E System bauen: Benotzungsfall an Expertise

Wann d'Fundamenter geluecht sinn, presentéiert den Design Lead dann hire Prozess, segmentéiert a 4 Etappen:

En Team bauen a seng Fäegkeeten ervirhiewen (Presentatioun vum Daphna Keim)
De Prozess vun der Migratioun op Figma (Presentatioun vum Yann Stephant)
Den Iwwergank vun enger Bibliothéik, oder souguer e puer an der Realitéit, an en Design System (Presentatioun vum Thirin Ariaratnam)
Aarbechtsmethoden wann d'Migratioun fäerdeg ass (Presentatioun vum Romain Allain)

Dem Daphna Keim seng Onboarding Phase

Virun bal annerhallwem Joer ass d'Daphna Keim bei der D2C Factory zu L'Oréal als Design Lead ugeschloss. Et geet dann duerch eng zimlech speziell Entdeckungs- an Onboard-Phase, wou all organisatoresch Problemer vun der Mark entstinn. Also fänkt hatt un andeems se se fir eis oplëschten:

Op der Design Säit ginn et vill Tools. De Problem war datt se net all déiselwecht benotzt hunn. L'Oréal benotzt Sketch an Abstrakt. Déi zwou aner Agenturen hunn decidéiert all Brand Layers Dateien op hiren eegene Workspace ze migréieren: Figma.
Et war keng Agence Gestioun. All Team hat also hiren eegene Workspace an hiren eegene Wee fir ze schaffen.
Et gouf keng Kommunikatioun tëscht de verschiddenen Equippen.
Keng Richtlinn gouf geschaf.

Am Allgemengen haten d'Designer en anert Problem: hire Beruff ass eng schlecht unerkannt Expertise. Den Design Lead huet dann "e Problem vun der Kommunikatioun a Legitimitéit" wéinst dem Manktem u Designteams ervirgehuewen.

Mä wéi d'Daphna Keim et sou treffend ausdréckt: „Eng E-Commerce-Säit ouni UX an UI ass onméiglech .“ Et war dofir néideg, Léisunge fir dës Problemer ze fannen.

Déi ursprénglech Iddi war dofir, dat ze promoten , wat se konnten. Mee fir weider ze goen, war et néideg, an den Zentrum vun dësem organisatoresche Problem ze dauchen. Eng Initiativ fir op Figma ze migréieren war scho lancéiert ginn. Si konnten sech awer net op de Grondprozess vun enger Migratioun eenegen. Si huet dann dës Fro gestallt: "Wat kënne mir mat Figma maachen, fir eis an eisem deegleche Betrib ze hëllefen?" Hir Äntwert: Figma géif et hinnen erlaben, all hir Prozesser ze modelléieren an ze standardiséieren an, virun allem, all hir Markenschichten ze optimiséieren an ze automatiséieren . Dëst Konzept vun Harmoniséierung an Optimiséierung huet et hinnen dann erlaabt, hiren Usaz fir dës Migratioun ze wielen. Si sinn op en "Schlusszil" komm: en eenzegt Designsystem ze kreéieren, dat all d'Designsystemer kombinéiere géif, déi all hir Marken representéieren.

Zäit eis Zëmmer ze botzen!

De Yann Stephant stellt den Zoustand vum Spill virum Daphna senger Arrivée vu senger Siicht als Produkt Designer vir. Wéi hien erkläert, waren d'L'Oréal Teams wesentlech u Sketch an Abstract verbonnen. Hei ass wéi d'Organisatioun ronderëm seng Tools gebaut gouf:

Eng Bibliothéik vu Komponenten op Abstrakt, souwéi eng global Master Datei (presentéiert all E-Commerce Säiten am wäisse Label). Dëst géif duerno fir all Brand Layer gedeelt ginn.
Wann se un enger Ufro geschafft hunn, huet et onbedéngt zum Update vun engem oder méi Komponenten gefouert. Et war dann néideg fir se mat den Agencen ze deelen, se aus dem Librairie an dem Master erauszehuelen. Fir dëst ze maachen, hu se se an engem abstrakte Raum duplizéiert sou datt d'Agencen kéinte kommen an d'Elementer recuperéieren déi geännert goufen.

Mä wéi de Produktdesigner et betount, „waren d'Dateigréissten ze grouss, wat zu ville technesche Problemer gefouert huet. Et misst eng Léisung fonnt ginn .“ Hie beschreift dann déi vereinfacht Schrëtt fir d'Migratioun:

Import Skizz Dateien op Figma
Etablissement vun enger initialer Analyse vun allem wat klasséiert gouf (Konfiguratioun vu Komponenten, Transkriptioun vu Dateien, asw.)
Automatisatioun, Optimisatioun, Uerdnung a Prioritéit vun all de Fichieren fir op eng plënneren Design Systemer
D'Kreatioun vun engem eenzegt Gitter (well all Mark säin eegent Gitter fir seng E-Commerce Sites hat).

Vereinfachung, Harmoniséierung an Optimisatioun

Den Thirin Ariaratnam, Produktdesigner bei L'Oréal, huet seng Presentatioun ageleet andeems hien d'Léisung vun engem eenzegaartegen Designsystem virgestallt huet : "Dëst gouf méiglech gemaach dank Design Tokens ." Dëst sinn Basiselementer, déi en Designer benotzt fir eng Interface ze kreéieren. Si stellen eng gemeinsam Sprooch tëscht Designer an Entwéckler duer.

Hie beliicht d'Existenz vun 3 Zorte vun Tokens bei L'Oréal (fir méi ze léieren) :

Les Base Tokens (wat se virun der Migratioun benotzt hunn.)
Les Semantesch Tokens (fir Spezifizitéiten wéi Flächen, Grenzen, Texter, asw.)
Les Komponent Tokens (d'Schafe vu spezifesche "Nimm" fir Komponenten déi selwer Ënnerkategorien vu Komponenten enthalen.)

"Dank dem Design System Organisateur Plugging, hu mir et fäerdeg bruecht dëse Link tëscht dem Design System an de Masters ze kreéieren."

Run e Sprint am DTC (Direct To Consumer)

De Romain Allain, en anere Produktdesigner am Team, huet duerno déi 5 Haaptschrëtt presentéiert, déi hir Produktiounsmethoden an dësem neien Designsystem definéieren :

D'Grënnung vun engem Sprint vun 1 Mount, vun engem Ticket (= eng zougewisen Design Aufgab) vun engem vun de Marken Akteuren presentéiert.
Mat engem Filial System op Figma (= Instanz vun enger Säit déi mir onofhängeg vun der Haaptsäit änneren kënnen). Dëst ass eng nëtzlech Feature fir grouss Projeten, well wéi de Produkt Designer weist, "All kleng Ännerung kann e groussen Impakt hunn".
D'Benotzung vun Atomic Design Method (fir méi ze wëssen).
Les Rezensiounen et les Zesummenaarbecht : dëst resultéiert an d'Kopie an d'Paste vun den Ännerungen, déi gemaach goufen an e Sprint-Datei, zougänglech fir all Akteuren am Sprint (Entwéckler, POs, BAs, Designer, etc.).
La publizéieren et le Ticket Entwécklung : all Ändern oder erstallt Filialen ginn an d'Haaptzweige fusionéiert (Bibliothéikupdate)

Conclusioun

D'Design Lead vu L'Oréal huet d'Presentatioun ofgeschloss andeems si d'Aarbecht vun hirem Team ervirgehuewen huet, déi den E-Commerce-Ökosystem vun der Mark op d'Kopp gestallt huet. Si huet d'Wichtegkeet vun dësem Punkt betount: "Eis Migratioun op Figma schéngt vläicht einfach, awer letztendlich war de Prozess zimmlech komplex . "

Si schlussendlech eng vun hiren aktuellen Themen vun hirem Team adresséiert. Wéi kënne mir Expertise "Design" erhalen an e reduzéierten Expertisezentrum behalen? Fortsetzung kënnt no…