Directeur Artistique Digital, UX/UI designer senior à Paris depuis plus de 11 ans, j’accompagne les entreprises pour leur permettre d'atteindre leurs utilisateurs à travers des fonctionnalités simples et intuitives, une communication digitale efficace et des sites web et application mobiles claires.
visage.gif

Chanel : Les Coyères • UX/UI (EN)

(Version en français par ici)
Several times a year, Chanel renews its collection of make-up with a new range of new colors and new products. Make-up artists create a new seasonal look combining red-lips, eyeliner and nail varnish on a paper support called the" Coyères". These "Coyères" are also used to explain all the necessary steps to apply make-up for consumers during events or make-up classes. The assignment was to facilitate for the user to apply make up through the Chanel online platform, design the UX/UI and visual elements, we produced high-fidelity mockups with animated functional specifications that developers at AKQA would use to build the site.

Worked as a designer and art director for AKQA Paris
Deliverables: Responsive UX/UI and visual design for online experience

Mockup-02_coyere_desktop2.png

Select your the right look

I worked closely with Daniel Baesler, a talented creative designer. Our starting point was to know how to show the different looks. In order to help them to choose, we used the painted Coyères but had also put forward the color schemes of each of them. Every single (colored) tile matches a specific make-up product.

 

Make-up APPLYINg steps

The Coyère's page is made of 3 main features: the stepper, the related product and the preview on a Coyère

coyere.png

1 - The stepper
Every stepper is divided in different stages, mainly 4: Eyes (yeux), Lips(lèvres), Skin(Teint) and nails (Ongles). Some stage is subdivided into only multiple parts, for instance 5 for the eyes.

2 - Related Product & Advices
For every stage, a related product and advice are shown. If there are different tints, just follow the characters A- B - C - D shown on the image.

3 - Preview on the Coyère
Detailed progress on the actions is spelt out on the Coyère.

visage.gif
 

Final result

 

The entire pages

04-_-Chanel_coyere_desktop_09.jpg
 
Mockup-02_coyere_phone.png
 

Other Screens