Client: L'Oréal
Date: 2020/2021
Client: L'Oréal
Date: 2020/2021
L’Oréal needed a partner to help them deliver their global vision of an ecosystem of websites based on a single Design System and create a consistent world class e-commerce experience for their customers. I lead a team of designers to collaborate with the global L’Oréal UX team to facilitate the expansion of their Design System throughout APAC.
We were tasked with expanding on L’Oréal’s design system with components and functionalities specific to the requirements of the APAC business zones. To help ease the process of migrating their websites to the new technology, the first phase was to create foundation layers for each country, adding specific features that they needed based on their legacy sites. This was in part to appease their business units but also ensure that important localized features that were not "out of the box" in the design system were brought across.
The Design System is the frame work for over 100 websites for L'Oréal's luxury brands so we had to be conscious that every change/new feature or “deviation from the DS” we created has a sizable cost impact when rolled out. To mitigate the cost the business requirements needed to be achieved while creating as fewer deviations to the design system as possible to ensure that the cost of development and maintenance was controlled.
The tech stack we are using is Sketch with Abstract for version control, technical specifications and internal validation.
I proposed our team spend a month onboarding and learning the design system so when we start we had the necessary knowledge to start creating our country specific deviations effectively and whilst creating the minimum development effort.
However, this was cut short by a tight timeline so I decided that we needed a crash course from L’Oréal’s UX Team. After multiple discussions we aligned enough to make a start on an aggressive timeline to create the foundation sites for Japan, Taiwan and the APAC wide Loyalty suite.
Japan was the most critical market and the one with the most challenging and numerous requirements. We had over 30 changes to make for them, some of which were complex. The example below is a requirement born out of a need in Japan for brands to guarantee their authenticity online. There is a common miss-trust of websites in Japan which means brands need a way to prove or at least try to reassure users that their website is legitimate. For this we made a change to the header to include a badge of authenticity which when clicked reveals a modal that contains L’Oréals guarantee the site is authentic.
After tackling the Japan foundation layer we moved progressively to the other regions. We also created a generic APAC Loyalty suite which the businesses across APAC could pick and choose parts of the loyalty system for each and any brand. This was so well received that we are now handing it over to the global team for use in Europe and America.
Now the foundation layers have been complete the plan was to start working on specific changes and improvements based on a mix of research, our experience and business requirements. This is still going ahead although we are also starting to manage the migration of the Design System from Sketch and Abstract to Figma.
The reason for the move to Figma is that this multi-brand design system requires too much effort to maintain each layer. In Figma we are planning to use stylesheets to apply brand skins rather than have duplicates of the DS for each brand layer. I’m proud to say this was a suggestion I made during the onboarding process last year.
Wish us luck :)
This huge project is an as fun as it is complicated. The key aspects are maintaining the multiband design systems integrity while trying to create the best possible UX. The other challenge is the site localization requirements for the vastly different and demanding regions. The skills needed for this is a deep understanding of UI design, design system methodolgy, technical knowledge, patience and documentation. My role as leader of the APAC project also requires client management, project management and mentoring too. So much so, that I spent a lot of time creating an onboarding document to make sure ramping up the team is as painless as possible
