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

Artikel ini menceritakan pembentangan oleh Daphna Keim , Ketua Reka Bentuk di L'Oréal, dan pasukan Pereka Produknya Yann Stephant , Romain Allain , dan Thirin Ariaratnam , pada pertemuan yang diadakan pada 29 Februari 2024, di Hab UX-Republic. Tema malam itu ialah: “Memindahkan 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 menekankan bahawa “setiap orang ini berpotensi menjadi rakan seperjuangan yang akan mereka bertukar idea, dan yang boleh membuat permintaan”.

Gambaran Keseluruhan Produk NGlora 

NGlora ialah penyelesaian label putih yang kini diuruskan oleh pasukan Korporat dan IT. Secara lebih terperinci, ia merupakan produk yang dibina di atas platform Salesforce , yang mereka gunakan untuk mencipta semua laman e-dagang mereka, dengan pendekatan mudah alih dahulu. Ideanya adalah untuk mempunyai penyelesaian tunggal dengan seni bina tunggal, di mana semua variasi akan terdapat dalam kod. Ini akan membolehkan setiap laman web mengkonfigurasi komponen yang mereka perlukan 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 amnya, pereka menghadapi masalah lain: profesion mereka merupakan kepakaran yang kurang diiktiraf. Ketua Reka Bentuk kemudian mengetengahkan “masalah komunikasi dan legitimasi” disebabkan oleh kekurangan pasukan reka bentuk.

Namun seperti yang dinyatakan oleh Daphna Keim dengan tepat, “laman e-dagang tanpa UX dan UI adalah mustahil .” Oleh itu, adalah perlu untuk mencari penyelesaian kepada masalah ini.

Oleh itu, idea awal adalah untuk mempromosikan apa yang mereka mampu lakukan. Tetapi untuk melangkah lebih jauh, adalah perlu untuk menyelidiki inti masalah organisasi ini. Satu inisiatif untuk berhijrah ke Figma telah pun dilancarkan. Walau bagaimanapun, mereka tidak dapat bersetuju tentang proses asas migrasi. Beliau kemudian membangkitkan isu ini: "Apakah yang boleh kita lakukan dengan Figma untuk membantu kita dalam operasi harian kita?" Jawapannya: Figma akan membolehkan mereka memodelkan dan menyeragamkan semua proses mereka dan, yang paling penting, untuk mengoptimumkan dan mengautomasikan semua Lapisan Jenama mereka . Konsep pengharmonian dan pengoptimuman ini kemudiannya membolehkan mereka memilih pendekatan mereka untuk migrasi ini. Mereka sampai pada "objektif akhir": untuk mencipta satu Sistem Reka Bentuk yang seterusnya akan menggabungkan semua Sistem Reka Bentuk yang mewakili 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 Bentuk Produk, “saiz fail terlalu besar, yang menyebabkan banyak masalah teknikal. Penyelesaian perlu dicari .” Beliau kemudian menggariskan langkah-langkah mudah untuk migrasi:

  • 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 memperkenalkan penyelesaian Sistem Reka Bentuk yang unik : “Ini dapat direalisasikan hasil daripada Token Reka Bentuk .” Ini adalah elemen asas yang digunakan oleh pereka untuk mencipta antara muka. Ia mewakili bahasa yang sama antara pereka dan pembangun.

Dia mengetengahkan 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 dalam pasukan, kemudian berucap untuk membentangkan 5 langkah utama yang menentukan kaedah pengeluaran mereka 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 L'Oréal mengakhiri pembentangan dengan mengetengahkan kerja yang dilakukan oleh pasukannya, yang telah menggoncang ekosistem e-dagang jenama tersebut. Beliau menekankan kepentingan perkara ini: "Penghijrahan kami ke Figma mungkin kelihatan mudah, tetapi akhirnya prosesnya 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