L'Occitane en Provence

Sélectionneur de teinte

Contexte
Création de la première gamme de maquillage L'Occitane en provence, avec un premier lancement au Japon pour Mars 2019.
A cette occasion nous avons pu concevoir un sélectionneur de teinte pour ces nouvelles pages produits.

▶ Temporalité

Décembre 2018 - Janvier 2019

▶ Rôle

Lead UI Designer

▶ Camarades complices

Mathieu Sorin
Développeur / Intégrateur en charge du projet.

1.Recherche

Regroupement de différents sélectionneur de teintes de rouge à lèvres provenant de sites concurrents.

Benchmark et études des meilleures pratiques chez nos concurrents. Recherche de l’emplacement optimal dans une page produit pouvant être déjà chargée, notamment dans sa version mobile.

2.Spécification

Décision d’offrir 2 choix de sélection pour les principaux cas d’utilisat.eu.r.ices possibles :
- par la couleur, pour les clients découvrant la gamme
- par le nom de la teinte, pour les clients souhaitant retrouver un produit.

En parallèle des ces phases de recherche, réflexion sur l’accessibilité de cette fonctionnalité menant au choix de la liste déroulante en plus de la présentation de toutes les couleurs disponibles sous forme de « gommettes ».
Discussion avec le développeur en charge du projet pour assurer cette accessibilité aussi dans le code du module.

3.Conception

Conception des maquettes et déclinaisons nécessaires avant intégration.

Sélectionneur de teinte : version desktop, site anglais.

Site UK - Version idéale

Sélectionneur de teinte : version desktop, site israélien.

Site Israélien - Version lecture de droite à gauche

Sélectionneur de teinte : version desktop, site japonais.

Site Japonais - Version chargée

Sélectionneur de teinte : version desktop, site français.

Site Français - Version minimale

Site UK - Version idéale

Site Israélien - Version lecture de droite à gauche

Site Japonais - Version chargée

Site Français - Version minimale

Et ensuite ?

D’un point de vue fonctionnel la première amélioration serait de requalifier ces teintes comme des attributs de produit et non comme des produits différents afin de ne recharger qu’une partie de la page.

← Projet précédent Projet suivant →