Kusamuka kwa e-commerce Design System ku L'Oréal: zovuta ndi zothetsera

Nkhaniyi ikubwerezanso msonkhano wa Daphna Keim, Design Lead ku L'Oréal, ndi gulu lake la Product Designers Yann Stephan, Romain Allain et Thirin Ariaratnam, pamsonkhano womwe unakonzedwa pa February 29, 2024 ku UX-Republic Hub. Mutu wamadzulo ano: "Kusamuka kwa e-commerce Design System ku L'Oréal: zovuta ndi zothetsera".

Daphna Keim adalowa nawo ku D2C Factory - kuyang'anira kupanga masamba onse a e-commerce agululi - mu 2023. Atafika ngati Design Lead watsopano, adazindikira zovuta zingapo zamabungwe mkati mwa mtsogoleri wadziko lino mu kukongola. Cholinga cha msonkhanowu chinali kuwunikira ntchito yomwe yachitika mchaka chimodzi, ntchito yomwe yasintha kwambiri chilengedwe cha e-commerce ku L'Oréal.

Kufika kwa Design Lead yatsopano ku L'Oréal: kusintha kwa gulu la gulu

Context: chilengedwe cha D2C 

Musanayambe kufotokoza zovuta ndi zothetsera zomwe zapezeka, ndikofunikira kubwerera ku maziko. L'Oréal imagwira ntchito m'maiko 50 omwe amapereka malonda achindunji a e-commerce, ndipo ili ndi 237 "white label" relay masamba. Gulu la Daphna Keim limagwira ntchito ndi mabungwe awiri akunja, ofanana ndi 7 Product Designers. Izi ndizofanana ndi gulu la 10 Product Designers ndi 400 opanga pa tsamba lililonse.

Monga Daphna Keim akunenera, L'Oréal ikupereka osewera akuluakulu 4: 

  • Magulu amakampani : Amayang'anira ntchito zonse zapadziko lonse lapansi zomwe zimalowa m'magawo, magawo ndi mtundu. Masiku ano, amasamalira nkhani zonse za e-commerce ndikuwongolera zolemba zoyera.
  • Magawano : Mwanaalirenji, CPD (Consumer Product), DPP (Professional Products Division), Derma kukongola. 
  • Madera malo : SAPMENA, LUSA, North Asia, Europe, etc.
  • Zizindikiro : Mitundu 70 yomwe tsopano ndi yapadziko lonse lapansi, kuphatikiza 34 mu e-commerce.

Iye akuumirira pa mfundo yakuti iye akufuna kufotokoza izo "aliyense wa anthuwa ndi olankhulana nawo omwe angakambirane nawo, ndi omwe angafunse". 

Malingaliro a kampani NGlora Product 

NGlora ndi chizindikiro choyera yomwe lero ikuyendetsedwa ndi magulu a Corporate ndi magulu a IT. Kuti mumve zambiri, ndi chinthu chopangidwa kuchokera ku Salesforce solution pomwe adabwera kudzapanga masamba awo onse a e-commerce, ndi yankho loyamba la mafoni. Lingaliro linali "kukhala ndi yankho lapadera ndi zomangamanga zapadera" kumene mitundu yonse ingakhalepo mu code. Chotsatira chake, masamba onse azitha kukonza mosavuta zigawo zomwe zimawasangalatsa. 

Daphna Keim akufotokoza momwe NGlora imagwirira ntchito: 

  • Timapeza poyamba engineering solution, zomwe zimamasulira ku core system. Pa mbali ya mapangidwe, gulu lake liri ndi udindo wopanga zinthu zonse za chizindikiro choyera. "Zomwe timachita ndi UX yoyera: ulendo wogula, ulendo wa ogula ndipo nthawi zina, timapanga kusiyana kwa mabungwe ena." 
  • Ndiye pali zomwe timazitcha Magawo Osanjikiza zomwe zimayendetsedwa ndi madera, motsogozedwa ndi magulu a IT. Izi zimayang'ana chilichonse chapafupi (njira zolipirira, mapulogalamu okhulupilika okhudza dziko, ndi zina).
  • Pomaliza, timasiyanitsa Mtundu wa Brand zomwe zimapanga pamwamba pa UI yonse. Izi ndizokhazikika pamtundu uliwonse.

 

Kupanga dongosolo: nkhani ndi ukatswiri 

Maziko akakhazikitsidwa, Design Lead imawonetsa njira yawo, yogawidwa m'magawo anayi: 

  • Kupanga gulu ndikuwunikira luso lake (Zowonetsedwa ndi Daphna Keim)
  • Njira yosamukira ku Figma (Kuwonetsedwa ndi Yann Stephant)
  • Kusintha kuchokera ku laibulale, kapena zingapo zenizeni, kupita ku Design System (Kuwonetsedwa ndi Thirin Ariaratnam)
  • Njira zogwirira ntchito kusamukako kukamaliza (Zowonetseratu za Romain Allain)

Daphna Keim's onboarding gawo

Pafupifupi chaka ndi theka chapitacho, Daphna Keim adalowa nawo D2C Factory ku L'Oréal ngati Design Lead. Kenako imadutsa gawo lodziwika bwino komanso loyambira, pomwe zovuta zonse zamabizinesi zimayamba. Chifukwa chake akuyamba kutilembera iwo: 

  • Pa mbali ya mapangidwe, pali zida zambiri. Vuto linali loti onse sanagwiritse ntchito imodzi. L'Oréal amagwiritsa ntchito Sketch ndi Abstract. Mabungwe ena awiriwa adaganiza zosamutsa mafayilo onse a Brand Layers kumalo awo ogwirira ntchito: Figma.
  • Panalibe kasamalidwe ka bungwe. Choncho, gulu lirilonse linali ndi malo awo ogwirira ntchito komanso njira yawoyawo yogwirira ntchito.
  • Panalibe kulankhulana pakati pa magulu osiyanasiyana.
  • Palibe malangizo omwe adapangidwa. 

Nthawi zambiri, opanga adakumana ndi vuto lina: kwenikweni, ntchito yawo ndi ukatswiri wodziwika pang'ono. Kenako The Design Lead imatsindika "vuto la kulumikizana ndi kuvomerezeka" chifukwa cha kusowa kwa magulu apangidwe. 

Koma monga momwe Daphna Keim amanenera bwino, "tsamba la e-commerce lopanda UX ndi UI sizingatheke". Choncho kunali koyenera kupeza njira zothetsera mavutowa.

Choncho lingaliro loyamba linali lotikulalikira zomwe akanatha kuchita. Koma kuti tipitirire patsogolo, tinkafunika kukumba pansi pa vuto la gululi. Njira yosamukira ku Figma inali itatsegulidwa kale. Komabe, sanagwirizane pa nkhani ya kusamuka. Kenako amandiuza vuto ili: "Titani ndi Figma kuti atithandize m'moyo wathu watsiku ndi tsiku?". Yankho lake: Figma akanawalola kutero chitsanzo, sinthani njira zawo zonse ndipo koposa zonse kukhathamiritsa ndikusintha ma Brand Layers awo onse. Lingaliro la kugwirizanitsa ndi kukhathamiritsa ndiye linawalola iwo kusankha njira yawo yochitira kusamukaku. Iwo adafika pa "cholinga chomaliza": pangani Design System imodzi yomwe imaphatikiza onse Design Systems oyimira mtundu uliwonse wamtundu wawo.

Nthawi yoyeretsa chipinda chathu!

Yann Stephant nayenso akuwonetsa momwe sewero lidachitikira Daphna asanabwere kuchokera momwe amawonera ngati Product Designer. Monga akufotokozera, magulu a L'Oréal adalumikizidwa kwenikweni ndi Sketch ndi Abstract. Umu ndi momwe bungweli linapangidwira mozungulira zida zake: 

  • Laibulale yazigawo za Abstract, komanso fayilo yapadziko lonse lapansi (yowonetsa masamba onse a e-commerce okhala ndi zilembo zoyera). Izi zitha kugawidwa kumagulu onse a Brand.
  • Akamagwira ntchito pafunso, zimatsogolera kukusintha kwa gawo limodzi kapena zingapo. Ndiye kunali koyenera kugawana nawo ndi mabungwe, kuwachotsa mu sitolo ya mabuku ndi Master. Kuti achite izi, adawajambula m'malo a Abstract kuti mabungwe abwere kudzabwezeretsa zinthu zomwe zidasinthidwa. 

Koma monga Product Designer akunenera, "Mafayilo amakula kwambiri, zomwe zidabweretsa zovuta zambiri zaukadaulo. Tinayenera kupeza yankho”. Kenako ikuwonetsa njira zosavuta zosinthira: 

  • Tengani Sinthani mafayilo ku Figma 
  • Kukhazikitsidwa kwa kusanthula koyambirira kwa chilichonse chomwe chidasankhidwa (kusintha kwa zigawo, kusindikiza mafayilo, ndi zina). 
  • Makinawa, kukhathamiritsa, kuyitanitsa ndi kuika patsogolo mafayilo onse kuti asamukire ku a Design Systems 
  • Kupanga kwa a grid imodzi (chifukwa mtundu uliwonse unali ndi gridi yake pamasamba ake a e-commerce). 

Kuphweka, kugwirizanitsa ndi kukhathamiritsa 

Thirin Ariaratnam, Wopanga Zinthu ku L'Oréal, akuwonetsa ulaliki wake powulula yankho la Unique Design System : "Izi zidatheka chifukwa cha Design Tokens". Izi ndi zinthu zofunika zomwe wopanga adzagwiritse ntchito kuti athe kupanga mawonekedwe. Amayimira chilankhulo chofala pakati pa wopanga ndi wopanga. 

Akuwonetsa kukhalapo kwa mitundu ya 3 ya Zizindikiro ku L'Oréal (kuti mudziwe zambiri) : 

  • Les Zizindikiro Zoyambira (Zomwe ankagwiritsa ntchito asanasamuke.)
  • Les Zizindikiro za Semantic (zachindunji monga malo, malire, zolemba, etc.)
  • Les Zizindikiro Zamagulu (kupangidwa kwa "maina" enieni a zigawo zomwe zimaphatikizanso magawo ang'onoang'ono.)

"Tithokoze chifukwa cha pulagi ya Design System iyi, takwanitsa kupanga ulalo pakati pa Design System ndi Masters."

Thamangani sprint pa DTC (Direct To Consumer)

Romain Allain, Wopanga Zinthu wina wa gululo, ndiye amalowererapo kuti apereke magawo 5 omwe amatanthauzira njira zopangira mu Design System yatsopanoyi : 

  1. Kukhazikitsidwa kwa a sprint ya mwezi umodzi, kuchokera pa tikiti (= ntchito yopangira) yoperekedwa ndi m'modzi mwa omwe akukhudzidwa ndi mtunduwo. 
  2. Kugwiritsa ntchito a nthambi dongosolo pa Figma (= chitsanzo cha tsamba lomwe titha kusintha popanda tsamba lalikulu). Ichi ndi chinthu chothandiza pama projekiti akuluakulu, chifukwa monga momwe Wopanga Zinthu akunenera, "kusintha kwakung'ono kulikonse kumatha kukhala ndi vuto lalikulu".
  3. Kugwiritsa ntchito Njira ya Atomic Design (kuti mudziwe zambiri).
  4. Les ndemanga neri les collaborations : izi zimapangitsa kukopera ndi kumata zosinthidwa zomwe zinapangidwa kukhala fayilo ya Sprint, yofikiridwa ndi onse omwe ali nawo mu sprint (madivelopa, POs, BAs, okonza, etc.). 
  5. La kutsimikiza neri Le chitukuko cha tikiti : nthambi zonse zosinthidwa kapena zopangidwa zidzaphatikizidwa munthambi zazikulu (kusintha kwa library) 

 

Kutsiliza 

Design Lead yochokera ku L'Oréal ikumaliza ulalikiwu powunikira ntchito yomwe gulu lake likuchita, zomwe zimapangitsa kuti zitheke kugwedeza chilengedwe chamtundu wa e-commerce. Iye akutsindika kufunika pa mfundo iyi: "Kusamukira kwathu ku Figma kungawoneke kosavuta koma pamapeto pake ulendowo unali wovuta kwambiri". 

Amamaliza kuthana ndi imodzi mwazovuta zomwe gulu lake likukumana nalo. Kodi tingatani kuti tikhalebe ndi luso la "kupanga" pamene tikukhalabe ndi malo ochepetsetsa aukadaulo? Zipitilizidwa…

 

 

 Ines Barbara, Communication and Marketing Assistant ku UX-Republic