Міграція системи дизайну електронної комерції в L’Oréal: проблеми та рішення

Ця стаття повторює конференцію ім Дафна Кейм, керівник дизайну в L'Oréal, і його команда дизайнерів продуктів Ян Стефан, Ромен Аллен et Тірін Аріаратнам, під час мітапу, організованого 29 лютого 2024 року в UX-Republic Hub. Тема цього вечора: «Міграція системи дизайну електронної комерції в L’Oréal: проблеми та рішення».

Дафна Кейм приєдналася до D2C Factory, яка відповідала за створення всіх сайтів електронної комерції групи, у 2023 році. Прийшовши на посаду нового керівника дизайну, вона виявила кілька організаційних проблем у цьому світовому лідері краси. Метою цієї конференції було висвітлити роботу, виконану за один рік, роботу, яка глибоко змінила екосистему електронної комерції в L'Oréal.

Прихід нового лідера дизайну в L’Oréal: зміни в організації групи

Контекст: екосистема D2C 

Перш ніж представити виклики та знайдені рішення, важливо повернутися до основ. L'Oréal працює в 50 країнах, які пропонують пряму електронну комерцію, і має 237 ретрансляційних сайтів із «білими мітками». Команда Дафни Кейм працює з двома зовнішніми агентствами, що еквівалентно 7 дизайнерам продуктів. Таким чином, це означає команду з 10 дизайнерів продуктів і 400 розробників для кожного сайту.

Як зазначає Дафна Кейм, L'Oréal представляє 4 основних гравців: 

  • Корпоративні команди : вони контролюють усі глобальні проекти, які потім розподіляються на підрозділи, зони та бренди. Сьогодні вони займаються всіма питаннями електронної комерції та керують білою міткою.
  • підрозділи : Luxury, CPD (Consumer Product), DPP (Professional Products Division), Derma beauty. 
  • Області географічний : SAPMENA, LUSA, Північна Азія, Європа та ін.
  • Знаки : 70 брендів, які зараз є міжнародними, у тому числі 34 в електронній комерції.

Вона наполягає на тому, що хоче підкреслити це «Кожен із цих людей є потенційним співрозмовником, з яким вони будуть обмінюватися і які можуть робити запити». 

Огляд продукту NGlora 

NGlora є a біла етикетка якою сьогодні керують корпоративні команди та ІТ-групи. Щоб детальніше, це продукт, виготовлений з Рішення Salesforce на якому вони прийшли, щоб створити всі свої сайти електронної комерції, маючи на увазі мобільне рішення. Ідея була «мати унікальне рішення з унікальною архітектурою» де всі варіації будуть присутні в коді. У результаті всі сайти зможуть легко налаштувати компонент(и), які їх цікавлять. 

Дафна Кейм пояснює, як працює NGlora: 

  • Спочатку ми знаходимо інженерне рішення, що перекладається як основна система. Що стосується дизайну, його команда відповідає за розробку всіх функцій білої етикетки. «Ми робимо справді чистий UX: шлях до покупки, шлях споживача, а іноді ми створюємо варіанти для певних об’єктів». 
  • Тоді є те, що ми називаємо Області шарів які обробляються географічними областями під керівництвом ІТ-груп. Це зосереджено на всьому місцевому (способи оплати, програми лояльності, націлені на певну країну тощо).
  • Нарешті, ми розрізняємо Шар бренду який позначає весь накладений інтерфейс користувача. Це індивідуально для кожного бренду.

 

Побудова системи: сценарій використання та досвід 

Після закладення основи керівник проекту представляє свій процес, розділений на 4 етапи: 

  • Створення команди та підкреслення її навичок (Презентація Дафни Кейм)
  • Процес переходу на Figma (презентація Янна Стефанта)
  • Перехід від бібліотеки чи навіть кількох у реальності до системи дизайну (презентація Тіріна Аріаратнама)
  • Методи роботи після завершення міграції (презентація Ромена Аллана)

Фаза адаптації Дафни Кейм

Майже півтора року тому Дафна Кейм приєдналася до D2C Factory у L'Oréal як керівник дизайну. Потім він проходить досить особливу фазу відкриття та адаптації, де виникають усі організаційні проблеми бренду. Тож вона починає з того, що перелічує їх для нас: 

  • З боку дизайну є багато інструментів. Проблема полягала в тому, що вони не всі використовували той самий. L'Oréal використовував Sketch і Abstract. Дві інші агенції вирішили перенести всі файли Brand Layers у власну робочу область: Figma.
  • Агентського менеджменту не було. Таким чином, кожна команда мала свій робочий простір і свій спосіб роботи.
  • Не було спілкування між різними командами.
  • Настанова не створена. 

Загалом, дизайнери зіткнулися з іншою проблемою: насправді їхня професія є мало визнаною експертизою. Керівник дизайну підкреслює «Проблема комунікації та легітимності» через відсутність проектних груп. 

Але, як добре цитує Дафна Кейм, «Сайт електронної комерції без UX та UI неможливий». Тому необхідно було знайти вирішення цих проблем.

Тому початкова ідея полягала в томуєвангелізувати що вони були здатні зробити. Але щоб піти далі, нам довелося докопатися до дна цієї організаційної проблеми. Ініціатива щодо переходу на Figma вже була відкрита. Однак вони не змогли дійти згоди щодо процесу, що лежить в основі міграції. Потім вона вказує на цю проблему: «Що ми можемо зробити з Figma, щоб допомогти нам у нашому повсякденному житті?». Його відповідь: Figma дозволить їм це моделювати, стандартизувати всі свої процеси та, перш за все, оптимізувати та автоматизувати всі їхні рівні бренду. Ця концепція гармонізації та оптимізації дозволила їм вибрати кут дій для цієї міграції. Вони досягли «кінцевої мети»: створити єдину систему дизайну, яка, у свою чергу, поєднує всі системи дизайну, що представляють кожен із їхніх брендів.

Час прибирати нашу кімнату!

У свою чергу, Ян Стефант представляє стан справ перед приходом Дафни з його точки зору як дизайнера продуктів. Як він пояснює, команди L'Oréal були в основному прив'язані до Sketch і Abstract. Ось як організація була побудована навколо своїх інструментів: 

  • Бібліотека компонентів на Abstract, а також глобальний головний файл (представляючи всі сторінки електронної комерції в білій мітці). Згодом це буде спільно використано для всіх шарів бренду.
  • Коли вони працювали над запитом, це обов’язково призводило до оновлення одного або кількох компонентів. Потім довелося поділитися ними з агентствами, витягнувши їх із книгарні та Майстра. Для цього вони скопіювали їх у абстрактному просторі, щоб агентства могли прийти та відновити елементи, які були змінені. 

Але, як зазначає дизайнер продукту, «Розміри файлів були занадто великими, що викликало багато технічних проблем. Ми повинні були знайти рішення". Потім представлено різні спрощені кроки для міграції: 

  • Імпорт Файли ескізу для Figma 
  • Встановлення початкового аналізу всього, що було засекречено (конфігурація компонентів, транскрипція файлів тощо) 
  • Автоматизація, оптимізація, упорядкування та пріоритезація усіх файлів, щоб перейти до одного Система проектування 
  • Створення a єдина сітка (оскільки кожен бренд мав власну сітку для своїх сайтів електронної комерції). 

Спрощення, гармонізація та оптимізація 

Тірін Аріаратнам, дизайнер продуктів L'Oréal, представляє свою презентацію, розкриваючи рішення Унікальна система дизайну : «Це стало можливим завдяки Design Tokens». Це базові елементи, які використовуватиме дизайнер, щоб мати можливість розробити інтерфейс. Вони являють собою спільну мову між дизайнером і розробником. 

Він підкреслює існування 3 типів токенів у L’Oréal (щоб дізнатися більше) : 

  • Les Базові токени (що вони використовували до міграції.)
  • Les Семантичні лексеми (для таких деталей, як поверхні, рамки, тексти тощо)
  • Les Компонентні жетони (створення спеціальних «імен» для компонентів, які самі мають підкатегорії компонентів.)

«Завдяки цьому підключенню організатора Design System нам вдалося створити зв’язок між Design System і Masters».

Пробіг спринту на DTC (Direct To Consumer)

Ромен Аллен, ще один продуктовий дизайнер команди, втручається, щоб представити 5 основних етапів, які визначають їхні виробничі методи в цій новій системі проектування : 

  1. Створення а спринт 1 місяць, з квитка (= призначене завдання на дизайн), наданого одним із зацікавлених сторін бренду. 
  2. Використання a галузева система на Figma (= екземпляр сторінки, яку ми зможемо змінювати незалежно від головної сторінки). Це корисна функція для великих проектів, оскільки, як зазначає дизайнер продукту, «Кожна маленька зміна може мати великий вплив».
  3. Використання Метод атомного дизайну (щоб дізнатися більше).
  4. Les відгуки і Співробітництво : це призводить до копіювання та вставлення внесених змін у файл спринту, доступний для всіх учасників спринту (розробники, ОП, спеціалісти з бакалаврів, дизайнери тощо). 
  5. La перевірка достовірності ін ле розвиток білетів : усі змінені або створені гілки будуть об’єднані в основні гілки (оновлення бібліотеки) 

 

Висновок 

Керівник дизайну з L'Oréal завершує цю презентацію, висвітлюючи роботу, виконану її командою, що дозволяє потрясти екосистему електронної комерції бренду. Вона підкреслює важливість цього питання: «Наш перехід до Figma може здатися простим, але зрештою цей шлях був досить складним». 

У підсумку вона вирішує одну з поточних проблем своєї команди. Як ми можемо підтримувати досвід «дизайну», зберігаючи при цьому обмежений центр знань? Далі буде…

 

 

 Інес Барбара, Асистент з комунікацій та маркетингу в UX-Republic