L’Oréal - Digital Service Factory Multi-brand design system and BeautyTech services for L'Oréal
Designer in a two-person team within L'Oréal's Digital Service Factory: a global design system for 35 brands and BeautyTech services in augmented reality and AI, including E-Shade Finder, winner of the CES 2023 Innovation Award and used by more than 500,000 people in six months.
Project fact sheet
- Client
- L'Oréal Group
- Role
- UI / Product Designer
- Team
- 2 designers (me and my Lead Product Designer), then alone leading the Design team for 4 to 5 months, working with the Dev and Product teams
- Scope
- Multi-brand design system · UI / Product Design · Prototyping · User testing
- Period
- 2021 – 2023
- Duration
- Almost two and a half years
- Platform
- BeautyTech services (augmented reality, AI) and design system
- Status
- Services delivered, design system rolled out across several brands
Impact
Context
The Digital Service Factory is the L'Oréal team that designs BeautyTech services for the group's brands: augmented reality and AI-assisted experiences, rolled out across several regions (EMEA, AMER, APAC).
I joined the Design team as reinforcement for almost two and a half years: first in a team of two designers, then alone for 4 to 5 months to hold the team together after my Lead Product Designer's assignment ended.
Problem
A multi-brand group, services rolled out across several regions (EMEA, AMER, APAC), and Design and Dev teams who had to deliver fast without losing consistency.
Each service risked being redesigned from scratch for every brand, resulting in interface discrepancies and longer lead times.
Goals
- Provide a shared foundation that each brand can adapt (white label)
- Speed up the production of services
- Keep consistency across brands and regions
- Make collaboration between Design and Dev smoother
Approach and lessons
- Managing and evolving the global white-label design system
- Creating BeautyTech services (Skindr 3, e-Shadefinder, essie on hand, Hair Color…)
- Prototyping and user testing
- Improving Design × Dev processes
Solution
A global white-label design system: one shared set of components, adapted per brand, on which the BeautyTech services are built.
The services (Skindr 3, e-Shadefinder, essie on hand, Hair Color…) are assembled from these components rather than redesigned every time.
The white-label design system
The system rests on three elements: shared components, components specific to certain services, and tokens. Each brand is adapted with its own themes and tokens: about thirty brands had them.
The components follow an Atomic structure and rely on nested parameters: simple to use, easy to customize.
Everything lives in Figma, with an internal CMS-like platform that makes it possible to deploy the brand-specific versions of the services.
E-Shade Finder, an AI-powered service
E-Shade Finder helps you find your shade among 22,500 options thanks to AI. The service won the CES 2023 Innovation Award and was used by more than 500,000 people in six months.
A smoother Design × Dev process
We replaced waterfall work with continuous collaboration between designers and developers, running in parallel. The result: more responsiveness and more agility.
Handoff and QA rituals frame the components and services that are built: we check that what is developed in Storybook matches the mockups.
Results
The AI-powered E-Shade Finder service won the CES 2023 Innovation Award.
The design system and the improved Design × Dev handoff cut the production time of a service by 50%, including development and adaptation to a brand's art direction. How it was measured: team estimates and ticket tracking, across all the services created.
Reflections
- Continuous collaboration between design and dev is essential. Moving in parallel rather than in a waterfall is far more effective.
- Fewer meetings, but better structured. A clear agenda and an organized flow are worth more than many small meetings that interrupt everyone's production and end up being counterproductive.
What's next
If I took on this assignment today, I would bring AI into it:
- Automate the rollout of brand-specific mockups through AI-assisted processes.
- Connect the Figma MCP to the design system to speed up mockup production.
- Prototype with Claude Code to explore more directions, faster.