Directeur Artistique Digital Freelance, UX/UI Designer senior à Paris
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.
CHANEL_banner.jpg

Chanel : Comparateur de couleurs • améliorations UX/UI

(See the english version here)
Chanel.com visait à ajouter plus de couleurs sur son site web en ligne. Malheureusement, la charte de la marque limitait l'utilisation des couleurs à seulement 3 couleurs : noir, gris et blanc... Cependant, Chanel avait une large gamme de couleurs dans ses produits, pour aller au-delà, nous avions décidé d’améliorer l’expérience de certaines fonctionnalités, et dans ce cas : le comparateur de couleurs des produits maquillage. Nous avions travaillé à améliorer les interactions permettant à l'utilisat•rice•eur d'explorer pleinement la richesse des couleurs des produits Chanel avec toutes les variantes que ces dernières pouvaient offrir.

J'étais en charge de la conception de l'UX / UI et des éléments visuels, nous avions produit des maquettes haute fidélité avec des spécifications animées fonctionnelles que les développeurs d'AKQA utiliseraient pour construire le site.

Travaillé en tant que directeur artistique digital • UX/UI designer pour AKQA Paris
Livrables : Pages de comparateur de couleurs en responsive.

Product detail page

 

comparaison jusqu’à 3 couleurs

Comme indiqué plus haut, sur la page produit, chaque produit offre une très large gamme des couleurs. Beaucoup d'entre elles sont assez proches, donc pour faciliter la comparaison, nous en avions d'abord décidé de les afficher en grand, puis d’y associer sa référence de couleur et son nom, cela a permis de les distinguer plus facilement. L'utilisat•rice•eur sélectionne d’abord la première couleur, ensuite à chaque fois qu'une couleur est ajoutée, elle se glisse depuis la droite (animation ci-dessus). Le comparateur occupe alors toute la largeur de l'écran.

 

comparaison entre 2 différentes couleurs

 

L'accent de la page est mis sur l'expérience dans la comparaison des couleurs. Nous avions facilité le déplacement chaque “tuile” de couleur et de le placer près d'une autre. Passez simplement la souris dessus, cliquez (ou appuyez) puis faites-la glisser vers la gauche ou la droite comme indiqué ci-dessous.

 

Suppression d’une couleur du comparateur

L'animation ci-dessous montre l'animation d'interface lorsqu'un•e utilisat•rice•eur supprime une couleur ou deux.

Design des écrans


écrans Finalisés