L’Oréal design system

DEC 2017 - MARS 2019

UX Designer

Freelance - L'Oréal Digital Luxe

Context

During one year, I have been involved in the development of L’Oréal design system. This work is going to allow group’s brands to develop faster new features, because all pages are designed in atomic design, with the same atoms, molecules and organisms.

Thanks to this project I could work on several softwares like Abstract (Github alternative with versioning and branches but for design files), Sketch, Zeplin or Overflow for created users path easily.
This project was very interesting, because this design system was designing in white label to ensure that all brands could apply their own artistic direction, so we had to think of every specific case.

About the workflow, I began the exploration phase on paper, then I continued on Sketch. There was a first step of feedback, concerning feasibility and advices from the UX manager. We could A/B test some features if needed. Finally, I realised a prototype with Invision or Principle, depending of the project, which allowed us to test the design, then I realised an user path on Overflow to be sure to not forget a step.

Softwares used for L'Oréal design system
Mobile pages designed with atoms, molecules and organisms
Organisation of the library
Icons on the design system's library
Color on the library
User flow for personalisation module
Desktop and mobiles pages designed with design system
Library file
Organisms on the library file

Team