Refonte UX/UI & Design System pour le leader des cosmetiques naturels

Le contexte

Le site Aroma-Zone n'est pas un simple catalogue produit : il combine fiches produits et ateliers, pages institutionnelles ("Qui sommes-nous ?"), recettes cosmetiques DIY et contenus tutoriels. Chaque format avait ete construit au fil du temps avec ses propres patterns, ce qui rendait l'experience incoherente et compliquait la production de nouvelles pages.

L'approche

Plusieurs designers intervenaient en parallele sur le site. Mon perimetre s'est structure autour de trois axes :

Une methode iterative

Le design system n'a pas ete construit isole dans un coin puis livre tel quel : il a evolue par iterations, avec des retours reguliers des designers qui l'utilisaient au quotidien sur les pages produit. En parallele, une UX researcheuse menait des tests utilisateurs sur le site e-commerce. Ses retours faisaient evoluer les pages produit, et ces evolutions remontaient a leur tour de nouveaux besoins pour le design system. Les deux chantiers avancaient ensemble, pas l'un apres l'autre.

Le vrai enjeu n'etait pas de refaire quelques ecrans, mais de donner a l'equipe design — plusieurs designers travaillant en parallele sur le site — un langage commun capable de tenir sur des formats tres differents : e-commerce, editorial, DIY. J'ai structure la librairie Figma en cinq niveaux, du token de base jusqu'au template de page complet, pour que chaque nouvel ecran se construise par assemblage plutot que par re-conception.

Cette architecture "atomique" est ce qui a permis de couvrir aussi bien une fiche produit qu'une page de recette DIY ou un tutoriel saisonnier avec la meme base de composants.

Specimens reels — page de specs annotees

Chaque composant documente ses variantes et ses etats d'interaction, avant d'etre integre en contexte reel sur le site.

Chaque niveau s'appuie sur le precedent : les Foundations figent les tokens de base, les Components et Blocs les assemblent en briques fonctionnelles, et les Templates couvrent tous les types de page du site — y compris des cas specifiques comme une fiche produit a variantes ou une page en rupture de stock. Une equipe produit peut ainsi construire une nouvelle page en assemblant des blocs existants plutot qu'en repartant d'une page blanche.

Une fiche produit, en detail

Sur un serum comme sur un atelier DIY, la meme structure : galerie d'images, badges, notation, variantes de contenance et de couleur, et un CTA d'ajout au panier toujours accessible.

La fiche produit ne s'arrete pas a la vente : un panneau "Conseils associes" relie chaque produit aux contenus editoriaux et tutoriels qui l'accompagnent.

L'ampleur du systeme

Comptes clients, programme de fidelite, boutiques physiques, contenu editorial, recettes : le design system couvre l'ensemble du site, jusqu'au moindre variant de composant.

Le programme de fidelite est un bon exemple de la densite d'information a tenir : points, bons, carte fidelite et historique, sur un seul ecran coherent en desktop comme en mobile.

Fidelite, boutiques physiques, contenu editorial et recettes — les memes composants habillent tous les formats du site, desktop comme mobile.

Et ca descend jusqu'au detail : chaque composant a ses variantes — ajout au panier, configurateur, selecteurs, listes — documentees dans la librairie.

Ce que ca a change

Avis client