Aroma-Zone · 2022 · Freelance
Refonte UX/UI & Design System pour le leader des cosmétiques naturels
Aroma-Zone vend des huiles essentielles, des recettes maison et des ateliers DIY. Quand je suis arrivé, l'équipe design avait déjà lancé la refonte du site. Je l'ai rejointe pour construire avec elle le design system qui devait faire tenir ensemble des pages très différentes.
Rôle
Product Designer freelance
Périmètre
UX/UI, Design System
Plateformes
Web desktop & mobile
Outils
Figma, tokens & composants
Le contexte
Le site ne vend pas que des produits. Il y a aussi des ateliers, des recettes DIY, des tutoriels et des pages de marque. Chaque format avait été fabriqué à son époque, avec ses propres composants. Rien ne se ressemblait vraiment, et sortir une nouvelle page prenait des jours.
L'approche
Plusieurs designers travaillaient sur le site en même temps. On s'est réparti les sujets, et j'en ai pris trois.
Audit & consolidation
Passer en revue l'existant page par page avec les autres designers, pour repérer ce qui se répétait et ce qui partait dans tous les sens.
Design System
Construire une librairie de composants réutilisables (tags, onglets, notation, fil d'ariane, cards produit) à partir des besoins de l'équipe.
UI responsive
Redessiner les écrans principaux en desktop et en mobile. Sur petit écran, il fallait décider avec l'équipe produit ce qui passe en premier.
Une méthode itérative
Le design system a bougé au fil des semaines, avec les retours des designers qui s'en servaient tous les jours. En même temps, une UX researcheuse faisait passer des tests utilisateurs. On reprenait les pages produit à partir de ses retours, et ces pages faisaient remonter de nouveaux besoins pour le système. Les deux avançaient ensemble.
Le Design System
Plusieurs designers devaient pouvoir avancer en parallèle sans que le site parte dans trois directions. J'ai structuré la librairie Figma en cinq niveaux, du token de base au template de page, en la calant avec les designers qui s'en servaient. Un nouvel écran se monte en assemblant des blocs existants, au lieu d'être redessiné.
C'est ce qui permet de traiter une fiche produit, une recette DIY et un tutoriel de saison avec les mêmes briques.
Spécimen — tokens & composants réels
Color tokens
Typography scale
Composants recréés
Spécimens réels — page de specs annotées
Chaque composant est documenté, avec ses variantes et ses états, avant d'être transmis aux développeurs.
Foundations
Assets
Components
Blocs
Templates
Chaque niveau s'appuie sur le précédent. 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, y compris les cas tordus comme une fiche produit à variantes ou une page en rupture de stock. Une équipe produit monte sa page avec des blocs existants au lieu de repartir d'une page blanche.
Une fiche produit, en détail
Sur un sérum comme sur un atelier DIY, la même structure. Galerie d'images, badges, notation, choix de contenance et de couleur, et un bouton d'ajout au panier qui reste toujours à portée.
La fiche produit ne s'arrête pas à la vente. Un panneau "Conseils associés" renvoie vers les articles et les tutoriels qui vont avec.
L'ampleur du système
Comptes clients, fidélité, boutiques physiques, articles, recettes. Le design system couvre tout le site, jusqu'au dernier variant.
Le programme de fidélité montre bien la densité à tenir. Points, bons, carte et historique, sur un seul écran qui marche en desktop comme en mobile.
Fidélité, boutiques, articles, recettes. Les mêmes composants habillent tous les formats, desktop comme mobile.
Et ça descend jusqu'au détail. Chaque composant a ses variantes documentées dans la librairie, de l'ajout au panier aux sélecteurs et aux listes.
Ce que ça a changé
1
Design System unique pour couvrir fiches produit, ateliers, recettes, tutoriels et pages de marque.
↓
Moins de temps passé par l'équipe à concevoir les nouvelles pages, grâce aux composants réutilisables.
↔
Le même rendu entre desktop et mobile, sur tous les formats de contenu.
Avis client
Émilie
Avis laissé le 23/08/2022
Très bonne collaboration avec Romain, toujours sympathique et à l'écoute des problématiques.
Rapide compréhension de nos besoins et résultats à la hauteur de nos attentes.