The migration of the e-commerce Design System at L’Oréal: challenges and solutions

This article retraces the conference of Daphna Keim, Design Lead at L'Oréal, and his team of Product Designers Yann Stephant, Romain Allain et Thirin Ariaratnam, during the meetup organized on February 29, 2024 at the UX-Republic Hub. The theme of this evening: “The migration of the e-commerce Design System at L’Oréal: challenges and solutions”.

Daphna Keim joined the D2C Factory – in charge of producing all of the group's e-commerce sites – in 2023. Upon her arrival as new Design Lead, she identified several organizational problems within this world leader in beauty. The aim of this conference was to highlight the work accomplished in one year, work which has profoundly transformed the e-commerce ecosystem at L'Oréal.

The arrival of a new Design Lead at L’Oréal: a shift in the group’s organization

Context: the ecosystem of a D2C 

Before introducing the challenges and solutions found, it is important to go back to the foundations. L'Oréal operates in 50 countries that offer direct e-commerce, and has 237 “white label” relay sites. Daphna Keim's team works with two external agencies, the equivalent of 7 Product Designers. This therefore amounts to a team of 10 Product Designers and 400 developers for each site.

As Daphna Keim points out, L'Oréal presents 4 main players: 

  • Corporate teams : they oversee all global projects which then cascade into the divisions, zones and brands. Today, they take care of all e-commerce matters and manage the white label.
  • Divisions : Luxury, CPD (Consumer Product), DPP (Professional Products Division), Derma beauty. 
  • Areas geographic : SAPMENA, LUSA, North Asia, Europe, etc.
  • Brands : 70 brands that are now international, including 34 in e-commerce.

She insists on the fact that she wishes to highlight that “each of these people are potential interlocutors with whom they will exchange, and who can make requests”. 

NGlora Product Overview 

NGlora is a white label which is today managed by Corporate teams and IT teams. To go into details, it is a product made from the Salesforce solution on which they came to create all of their e-commerce sites, with a mobile-first solution in mind. The idea was “to have a unique solution with a unique architecture” where all variations would be present in the code. As a result, all sites would be able to easily configure the component(s) of interest to them. 

Daphna Keim explains how NGlora works: 

  • We first find the engineering solution, which translates to the core system. On the design side, its team is responsible for designing all the features of the white label. “What we do is really pure UX: the purchasing journey, the consumer journey and sometimes, we create variations for certain entities.” 
  • Then there are what we call Layer Areas which are handled by the geographic areas, under the direction of the IT groups. This focuses on everything local (payment methods, loyalty programs targeted in a country, etc.)
  • Finally, we distinguish the Brand Layer which designates the entire UI overlay. This is specific to each brand.

 

Building a system: use case and expertise 

Once the foundations have been laid, the Design Lead then presents their process, segmented into 4 stages: 

  • Building a team and highlighting its skills (Presentation by Daphna Keim)
  • The process of migrating to Figma (Presentation by Yann Stephant)
  • The transition from a library, or even several in reality, to a Design System (Presentation by Thirin Ariaratnam)
  • Working methods once the migration is complete (Presentation by Romain Allain)

Daphna Keim's onboarding phase

Almost a year and a half ago, Daphna Keim joined the D2C Factory at L'Oréal as Design Lead. It then goes through a rather particular discovery and onboarding phase, where all the brand's organizational problems emerge. So she starts by listing them for us: 

  • On the design side, there are many tools. The problem was that they didn't all use the same one. L'Oréal used Sketch and Abstract. The two other agencies had decided to migrate all Brand Layers files to their own workspace: Figma.
  • There was no agency management. Thus, each team had their own workspace and their own way of working.
  • There was no communication between the different teams.
  • No guideline was created. 

Generally speaking, designers faced another problem: in fact, their profession is a little recognized expertise. The Design Lead then emphasizes “a problem of communication and legitimacy” due to the lack of design teams. 

But as Daphna Keim quotes so well, “an e-commerce site without UX and UI is not possible”. It was therefore necessary to find solutions to these problems.

The initial idea was therefore toevangelize what they were capable of doing. But to go further, we had to really dig to the bottom of this organizational problem. An initiative to migrate to Figma had already been opened. However, they could not agree on the process underlying a migration. She then points out this problem: “What can we do with Figma to help us in our daily lives?”. His answer: Figma would allow them to model, standardize all their processes and above all optimize and automate all their Brand Layers. This concept of harmonization and optimization then allowed them to choose their angle of action for this migration. They arrived at an “end goal”: create a single Design System which in turn combines all the Design Systems representative of each of their brands.

Time to clean our room!

Yann Stephant in turn presents the state of play before Daphna's arrival from his point of view as Product Designer. As he explains, the L'Oréal teams were essentially attached to Sketch and Abstract. Here is how the organization was built around its tools: 

  • A library of components on Abstract, as well as a global Master file (presenting all e-commerce pages in white label). This would subsequently be shared for all Brand Layers.
  • When they worked on a query, it necessarily led to the update of one or more components. It was then necessary to share them with the agencies, taking them out of the bookstore and the Master. To do this, they duplicated them in an Abstract space so that the agencies could come and recover the elements that had been modified. 

But as the Product Designer points out, “The file sizes were too large, which caused many technical problems. We had to find a solution”. It then presents the different simplified steps for the migration: 

  • Import Sketch files to Figma 
  • The establishment of an initial analysis of everything that was classified (configuration of components, transcription of files, etc.) 
  • Automation, optimization, ordering and prioritization of all the files in order to move to a Design System 
  • The creation of a single grid (because each brand had its own grid for its e-commerce sites). 

Simplification, harmonization and optimization 

Thirin Ariaratnam, Product Designer at L'Oréal, introduces his presentation by revealing the solution of a Unique Design System : “This was made possible thanks to Design Tokens”. These are basic elements that a designer will use to be able to design an interface. They represent a common language between designer and developer. 

He highlights the existence of 3 types of Tokens at L’Oréal (to know more) : 

  • The Base Tokens (what they used before the migration.)
  • The Semantic Tokens (for specifics such as surfaces, borders, texts, etc.)
  • The Component Tokens (the creation of specific “namings” for components that themselves include subcategories of components.)

“Thanks to this Design System organizer plugging, we managed to create this link between the Design System and the Masters.”

Run a sprint at the DTC (Direct To Consumer)

Romain Allain, another Product Designer of the team, then intervenes to present the 5 main stages which define their production methods in this new Design System : 

  1. The establishment of a sprint of 1 month, from a ticket (= an assigned design task) submitted by one of the brand's stakeholders. 
  2. The use of a branch system on Figma (= instance of a page that we will be able to modify independently of the main page). This is a useful feature for large projects, because as the Product Designer points out, “every small change can have a big impact”.
  3. The use of Atomic Design method (to know more).
  4. The reviews and collaborations : this results in copying and pasting the modifications made into a Sprint file, accessible to all stakeholders in the sprint (developers, POs, BAs, designers, etc.). 
  5. La validation and ticket development : all branches modified or created will be merged into the main branches (library update) 

 

Conclusion 

The Design Lead from L'Oréal concludes this presentation by highlighting the work carried out by her team, thus making it possible to shake up the brand's e-commerce ecosystem. She highlights the importance on this point: “Our migration to Figma may seem simple but ultimately the journey was quite complex”. 

She ends up addressing one of her team's current issues. How can we sustain “design” expertise while maintaining a reduced center of expertise? To be continued…

 

 

 Inès Barbara, Communication and Marketing Assistant at UX-Republic