Penghijrahan Sistem Reka Bentuk e-dagang di L'Oréal: cabaran dan penyelesaian

Artikel ini menjejaki semula persidangan Daphna Keim, Ketua Reka Bentuk di L'Oréal, dan pasukan Pereka Produknya Yann Stephant, Romain Allain et Thirin Ariaratnam, semasa pertemuan yang dianjurkan pada 29 Februari 2024 di Hab UX-Republic. Tema petang ini: "Penghijrahan Sistem Reka Bentuk e-dagang di L'Oréal: cabaran dan penyelesaian".

Daphna Keim menyertai Kilang D2C – yang bertanggungjawab menghasilkan semua tapak e-dagang kumpulan itu – pada tahun 2023. Selepas ketibaannya sebagai Ketua Reka Bentuk baharu, dia mengenal pasti beberapa masalah organisasi dalam peneraju dunia dalam kecantikan ini. Matlamat persidangan ini adalah untuk menyerlahkan kerja yang dicapai dalam satu tahun, kerja yang telah mengubah ekosistem e-dagang secara mendalam di L'Oréal.

Ketibaan Ketua Reka Bentuk baharu di L'Oréal: perubahan dalam organisasi kumpulan

Konteks: ekosistem D2C 

Sebelum memperkenalkan cabaran dan penyelesaian yang ditemui, adalah penting untuk kembali kepada asas. L'Oréal beroperasi di 50 negara yang menawarkan e-dagang langsung, dan mempunyai 237 tapak geganti "label putih". Pasukan Daphna Keim bekerjasama dengan dua agensi luar, bersamaan dengan 7 Pereka Produk. Oleh itu, ini berjumlah satu pasukan 10 Pereka Produk dan 400 pembangun untuk setiap tapak.

Seperti yang ditunjukkan oleh Daphna Keim, L'Oréal mempersembahkan 4 pemain utama: 

  • Pasukan korporat : mereka menyelia semua projek global yang kemudiannya mengalir ke bahagian, zon dan jenama. Hari ini, mereka menguruskan semua hal e-dagang dan menguruskan label putih.
  • Bahagian : Mewah, CPD (Produk Pengguna), DPP (Bahagian Produk Profesional), Derma beauty. 
  • Kawasan-kawasan Geographic : SAPMENA, LUSA, Asia Utara, Eropah, dsb.
  • Markah : 70 jenama yang kini antarabangsa, termasuk 34 dalam e-dagang.

Dia menegaskan bahawa dia ingin menyerlahkan perkara itu "setiap orang ini adalah rakan sembang berpotensi yang akan mereka tukarkan, dan siapa yang boleh membuat permintaan"

Gambaran Keseluruhan Produk NGlora 

NGlora ialah a label putih yang hari ini diuruskan oleh pasukan Korporat dan pasukan IT. Untuk pergi ke butiran, ia adalah produk yang dibuat daripada Penyelesaian Salesforce di mana mereka datang untuk mencipta semua tapak e-dagang mereka, dengan memikirkan penyelesaian yang mengutamakan mudah alih. Ideanya ialah "untuk mempunyai penyelesaian yang unik dengan seni bina yang unik" di mana semua variasi akan hadir dalam kod. Akibatnya, semua tapak akan dapat mengkonfigurasi komponen yang menarik minat mereka dengan mudah. 

Daphna Keim menerangkan cara NGlora berfungsi: 

  • Kami mula-mula mencari penyelesaian kejuruteraan, yang diterjemahkan kepada sistem teras. Dari segi reka bentuk, pasukannya bertanggungjawab untuk mereka bentuk semua ciri label putih. "Apa yang kami lakukan ialah UX yang benar-benar tulen: perjalanan pembelian, perjalanan pengguna dan kadangkala, kami mencipta variasi untuk entiti tertentu." 
  • Kemudian ada apa yang kita panggil Kawasan Lapisan yang dikendalikan oleh kawasan geografi, di bawah arahan kumpulan IT. Ini memfokuskan pada semua perkara tempatan (kaedah pembayaran, program kesetiaan yang disasarkan di sesebuah negara, dsb.)
  • Akhirnya, kami membezakan Lapisan Jenama yang menetapkan keseluruhan tindanan UI. Ini khusus untuk setiap jenama.

 

Membina sistem: kes penggunaan dan kepakaran 

Apabila asas telah diletakkan, Ketua Reka Bentuk kemudian membentangkan proses mereka, dibahagikan kepada 4 peringkat: 

  • Membina pasukan dan menonjolkan kemahirannya (Pembentangan oleh Daphna Keim)
  • Proses berhijrah ke Figma (Pembentangan oleh Yann Stephant)
  • Peralihan daripada perpustakaan, atau bahkan beberapa dalam realiti, kepada Sistem Reka Bentuk (Pembentangan oleh Thirin Ariaratnam)
  • Kaedah bekerja setelah penghijrahan selesai (Pembentangan oleh Romain Allain)

Fasa penerimaan Daphna Keim

Hampir setahun setengah yang lalu, Daphna Keim menyertai Kilang D2C di L'Oréal sebagai Ketua Reka Bentuk. Ia kemudiannya melalui fasa penemuan dan penyesuaian yang agak khusus, di mana semua masalah organisasi jenama muncul. Jadi dia mulakan dengan menyenaraikannya untuk kami: 

  • Di bahagian reka bentuk, terdapat banyak alat. Masalahnya ialah mereka tidak semua menggunakan yang sama. L'Oréal menggunakan Lakaran dan Abstrak. Dua agensi lain telah memutuskan untuk memindahkan semua fail Lapisan Jenama ke ruang kerja mereka sendiri: Figma.
  • Tiada pengurusan agensi. Oleh itu, setiap pasukan mempunyai ruang kerja mereka sendiri dan cara kerja mereka sendiri.
  • Tiada komunikasi antara pasukan yang berbeza.
  • Tiada garis panduan dibuat. 

Secara umumnya, pereka bentuk menghadapi masalah lain: sebenarnya, profesion mereka adalah sedikit kepakaran yang diiktiraf. Ketua Reka Bentuk kemudiannya menekankan "masalah komunikasi dan kesahihan" kerana kekurangan pasukan reka bentuk. 

Tetapi seperti yang dipetik oleh Daphna Keim, "tapak e-dagang tanpa UX dan UI tidak boleh dilakukan". Oleh itu, adalah perlu untuk mencari penyelesaian kepada masalah ini.

Oleh itu, idea awal adalah untukmenginjil apa yang mereka mampu lakukan. Tetapi untuk pergi lebih jauh, kami perlu benar-benar menggali ke dasar masalah organisasi ini. Inisiatif untuk berhijrah ke Figma telah pun dibuka. Walau bagaimanapun, mereka tidak dapat bersetuju dengan proses yang mendasari penghijrahan. Dia kemudian menunjukkan masalah ini: "Apakah yang boleh kita lakukan dengan Figma untuk membantu kita dalam kehidupan seharian kita?". Jawapannya: Figma akan membenarkan mereka model, menyeragamkan semua proses mereka dan di atas semua mengoptimumkan dan mengautomasikan semua Lapisan Jenama mereka. Konsep penyelarasan dan pengoptimuman ini kemudiannya membenarkan mereka memilih sudut tindakan mereka untuk penghijrahan ini. Mereka tiba pada "matlamat akhir": mencipta Sistem Reka Bentuk tunggal yang seterusnya menggabungkan semua wakil Sistem Reka Bentuk bagi setiap jenama mereka.

Masa untuk membersihkan bilik kami!

Yann Stephant pula mempersembahkan keadaan permainan sebelum kedatangan Daphna dari sudut pandangannya sebagai Pereka Produk. Seperti yang diterangkannya, pasukan L'Oréal pada dasarnya terikat dengan Sketch dan Abstrak. Berikut ialah cara organisasi dibina di sekeliling alatannya: 

  • Perpustakaan komponen pada Abstrak, serta fail Induk global (membentangkan semua halaman e-dagang dalam label putih). Ini kemudiannya akan dikongsi untuk semua Lapisan Jenama.
  • Apabila mereka bekerja pada pertanyaan, ia semestinya membawa kepada kemas kini satu atau lebih komponen. Ia kemudiannya perlu untuk berkongsi dengan agensi, membawa mereka keluar dari kedai buku dan Master. Untuk melakukan ini, mereka menduplikasinya dalam ruang Abstrak supaya agensi boleh datang dan memulihkan elemen yang telah diubah suai. 

Tetapi seperti yang ditunjukkan oleh Pereka Produk, “Saiz fail terlalu besar, yang menyebabkan banyak masalah teknikal. Kami terpaksa mencari penyelesaian”. Ia kemudian membentangkan langkah-langkah mudah yang berbeza untuk penghijrahan: 

  • Import Lakarkan fail ke Figma 
  • Penubuhan analisis awal semua yang diklasifikasikan (konfigurasi komponen, transkripsi fail, dll.) 
  • Automasi, pengoptimuman, susunan dan keutamaan daripada semua fail untuk berpindah ke a Sistem Reka Bentuk 
  • Penciptaan a grid tunggal (kerana setiap jenama mempunyai grid sendiri untuk tapak e-dagangnya). 

Penyederhanaan, penyelarasan dan pengoptimuman 

Thirin Ariaratnam, Pereka Produk di L'Oréal, memperkenalkan pembentangannya dengan mendedahkan penyelesaian Sistem Reka Bentuk Unik : "Ini dimungkinkan terima kasih kepada Token Reka Bentuk". Ini adalah elemen asas yang pereka bentuk akan gunakan untuk dapat mereka bentuk antara muka. Mereka mewakili bahasa yang sama antara pereka dan pembangun. 

Beliau menyerlahkan kewujudan 3 jenis Token di L'Oréal (untuk mengetahui lebih lanjut)

  • Les Token Asas (apa yang mereka gunakan sebelum hijrah.)
  • Les Token Semantik (untuk perkara khusus seperti permukaan, sempadan, teks, dsb.)
  • Les Token Komponen (penciptaan "penamaan" khusus untuk komponen yang mempunyai subkategori komponen.)

"Terima kasih kepada pemasangan penganjur Sistem Reka Bentuk ini, kami berjaya mencipta pautan ini antara Sistem Reka Bentuk dan Sarjana."

Lari pecut di DTC (Terus Kepada Pengguna)

Romain Allain, seorang lagi Pereka Produk pasukan, kemudian campur tangan untuk membentangkan 5 peringkat utama yang mentakrifkan kaedah pengeluaran dalam Sistem Reka Bentuk baharu ini

  1. Penubuhan a pecut selama 1 bulan, daripada tiket (= tugas reka bentuk yang diberikan) yang diserahkan oleh salah seorang pemegang kepentingan jenama. 
  2. Penggunaan a sistem cawangan pada Figma (= contoh halaman yang boleh kami ubah suai secara bebas daripada halaman utama). Ini adalah ciri yang berguna untuk projek besar, kerana seperti yang ditunjukkan oleh Pereka Produk, "setiap perubahan kecil boleh memberi impak yang besar".
  3. Penggunaan Kaedah Reka Bentuk Atom (untuk mengetahui lebih lanjut).
  4. Les ulasan et les kerjasama : ini mengakibatkan menyalin dan menampal pengubahsuaian yang dibuat ke dalam fail Sprint, boleh diakses oleh semua pihak berkepentingan dalam pecut (pembangun, PO, BA, pereka bentuk, dll.). 
  5. La pengesahan dan pembangunan tiket : semua cawangan yang diubah suai atau dicipta akan digabungkan ke dalam cawangan utama (kemas kini perpustakaan) 

 

Kesimpulan 

Ketua Reka Bentuk dari L'Oréal mengakhiri pembentangan ini dengan mengetengahkan kerja yang dijalankan oleh pasukannya, sekali gus membolehkan untuk menggegarkan ekosistem e-dagang jenama itu. Dia menekankan kepentingan dalam perkara ini: "Penghijrahan kami ke Figma mungkin kelihatan mudah tetapi akhirnya perjalanannya agak rumit"

Dia akhirnya menangani salah satu isu semasa pasukannya. Bagaimanakah kita boleh mengekalkan kepakaran "reka bentuk" sambil mengekalkan pusat kepakaran yang berkurangan? Akan bersambung…

 

 

 Inès Barbara, Pembantu Komunikasi dan Pemasaran di UX-Republic