L'Oréal Paris

Build a new master for the brand that will be implemented for +70 countries.

User journeys & 7 questions
When I was contacted by iCrossing to join the Team as the Lead UX, the concept that they presented was the following: 7 questions to guide the user, and create pages around those. 
The website should be mobile first, and each page at some point should give an answer to those questions.

It was a matter of methodology, creating content and design in a way that can adapt to a wide range of contraints : 
- Changing place in a page depending on the context
- Take the local discrepancies in consideration
- Some countries are e-commerce oriented, others not
- Some people use products differently in others markets 

The website should be editorial, problem solving and e-commerce friendly, because it's meant to be implemented in 70 countries. 

We worked with 4 personae, decided by the client, and 8 main user-journeys, to focus on : 
- how users come from social media
- how the website can solve a problem asked on Google or Baidu
- how we can help users with tips & inspiration
- how to we make a bridge between digital and physical 

Strategic initial vision for the Redesign of L'Oreal-Paris website by iCrossing team. 

Modular approach
In order to fit this vision, the very first job after the initial workshop with the client was to creates "blocs" and their different states. 
Not only different states, as in UI design enabled - disabled - active - hover stuff, but how they change depending their place in the page, how a certain content type should be displayed in different contexts

So deciding more precisely the content strategy, designing the ideal maximum case scenario of the mandatory pages, and create blocs and theirs states.

It was perfect to fit the constraints of some markets who can't spend too much money on a website : 
We suggested the "minimum case" and "maximum case" approach.
Without the content that we flag mandatory for the minimum case, the website makes no sense. 
The maximum case, is the ideal situation with time and money to get all the perfect content.

That way, all markets could fit somewhere in between. 
Double Navigation
After deciding the content, it was about how to access this content.
We have two main content type : products, and editorial. Tons of categories, for products, but also brands, concerns, skin type, and so on...

As you may know, if we highlight everything, nothing stands out anymore.
That's how we decided to let the user pick if he/she was looking for a product approach, or more of a solution.

We could display all the product categories, provide a quick access for top brands in the "product" side, and be trendy with hashtags, main evergreen article to help users with recurrent problems (like an eyeliner tutorial or learn more about your skin type).
Recommended for you
This option is a little trick that highlight products in a category page to help users. 
When there is 40 type of shampoo, how can you choose? I personally freak out. Filters sometimes don't make sense when you don't have the knowledge. 

This is for those who doesn't know their skin type, their skin color, and basically who have very little
knowledge about beauty. 
So the idea here was also to provide a quick recommendation even if we don't know the user.
You could find on a product page "This product is perfect if: you have bleached hair" for a pink hair color for example.

And when users navigate through pages, answer some questions about their hair color for example, we can recommend some products when we have enough knowledge. But in the beginning it's at least a wide recommendation, to give a little hint about if this product is good or not for you. 

Second step of the recommendation was to put small questions in the website to get a diagnosis.

First step of your beauty assistant 
Using the Progressive Web App technology, the idea was to implement a small conversational UI assistant, based on your agenda, the moments during the day, and your habits. 

If a flight is sync in your agenda, maybe you could use some tips for your skin to look fresh when landing, or if you want to go out on Sunday, if you're in the mood, some colorful make-ups tips. 

This assistant could also be very useful when it comes to safety, if you selected a filter like "cruelty free" or "paraben free", you could be notified if you add a product containing those by mistake. 
Contextual filters... 
I put a lot of efforts into the filters, especially understanding the typologies of categories. 
The audit of the current websites of l'Oréal-Paris were unpredictable. Every category changed from one country to another, and some filters had different meaning but same label (Dry skin as a concern, and as your skin type for example).

So I wanted to understand and build a new system, based on user searches in google : 
- looks
- benefits
- texture and/or color
- ingredients (for allergy or politics engagement) 

For the colors, for instance, we almost never have contextual colors, it's often the same "palette" of black/red/blue/gold/green. But when it comes to foundation or skincolor, we really don't need those. We need contextualized color for skin foundation, from pink to brown. 

Now that you get the idea, I did this work for every typology of product in the Make-up/Skincare/Haircolor/Haircare fields. Understanding the differences in terms of user-needs, looks, benefits, textures, ingredients and colors. 
Visual design and animation 
I worked with Anne (UI designer) on filters. She tested in animation with Principle some concepts we've had together. Basically we did researches together, and she explored further in tests while I kept the ergonomics in sight. If the animation was not clear enough from a HMI perspective, another round was needed, so every animation was reviewed in that way too. 
I was organizing her work planning, giving her guidance on some ways to explore first and we reviewed the work together before presenting it to the Creative Director. 
When the team had a disagreement, I did some home made usability test to see which concept was working better. 

a UI animation made on Principle by Anne, during our work on filters. 

User-test driven
Because we had to build a master that will go live in 2 or 3 years in some countries, we wanted to think forward and try bold stuff. But we couldn't afford to do something that users don't understand. 
So we worked with the platform Ferpection, to test our big design ideas with a real representative panel. 

I organized the Usability test sessions, thinking the flow, writing questions trying to avoid bias, and debrief with Ferpection team to present a result digest to stakeholders of L'Oréal. 
Here is an extract of those slides from the double sided navigation testing. 
Building a master that will go live in a few years needs to think a step ahead, while keeping in mind the planning and team constraints. We worked on a "Blue Sky Vision" that is the end goal to reach, while building the first iterations of the product. With great people. :)

more projects