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
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.
Thay way, all markets could fit somewhere in between.
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).
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.
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.
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 :
- 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.
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.
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.