État Pur se refait une beauté avec un design system.
Expertises :
Ateliers co-conception
UX / UI Design
Livrables :
Design system
Écrans RWD prototypés
La création du design system est née d’un moment clé : la refonte du socle applicatif du site e-commerce d’Etat Pur, menée en synergie avec le renouvellement de son identité de marque.
Cette double transformation a ouvert une opportunité unique : concevoir un langage visuel unifié, pensé pour être facilement adopté par les différents acteurs — développeurs comme designers.
Le design system est ainsi devenu un outil stratégique, garantissant la cohérence de l’expérience et la fluidité des évolutions futures d’un site déployé dans plusieurs pays.
NOTRE RÉPONSE UX/UI
Un design system, est un avantage durable.
Une préparation minutieuse a permis de créer une base solide pour pour tous les acteurs, assurant ainsi un impact concret et durable sur l’expérience utilisateur et la production.
Stratégie et vision
Comme tout projet, un design system passe par une phase de conception où nous définissons avec le soutien de la marque et l’équipe de développeurs quels doivent être ses objectifs :
- Traiter en priorité les composants essentiels pour démarrer rapidement les développements.
- Lister les composants à créer pour implémenter la nouvelle identité de marque.
- Mettre à disposition une librairie pour les designers externes, leur permettant de réaliser et prototyper de nouvelles pages.
Organisation et équipe
Une équipe dédiée est constituée pour piloter le projet :
- Un designer pour créer et organiser la partie UX/UI dans Figma, qui servira de référence et de librairie aux développeurs et aux designers externes.
- Des développeurs chargés de mettre en œuvre les composants en HTML via Storybook sur le site central du design system, qui centralise toutes les ressources et références.
- Une product owner pour coordonner les priorités et garantir l’alignement avec les objectifs du projet.
Technique et outils
Dès les premières étapes, État Pur a pu lancer rapidement la reproduction de certains contenus existants, garantissant une mise en ligne fluide. En parallèle, les designers se sont appuyés sur les composants de l’UI Kit pour retravailler l’UX et la conception graphique, notamment sur la page produits entièrement revisitée.
Au fil du projet, des fonctionnalités clés comme le Store Locator et le moteur de recherche ont été développées et testées avec agilité grâce au prototypage, permettant d’accélérer la mise en production et d’offrir une expérience utilisateur optimisée.
Enfin, l’organisation et la documentation de l’UI Kit, rendues possibles grâce aux fonctionnalités offertes par Figma, mettent à disposition de l’ensemble des acteurs du projet tous les éléments nécessaires à la conception et au développement du site e-commerce.
La librairie ainsi crée permet également de concevoir facilement de nouveaux gabarits de page ou des fonctionnalités, en respectant l’identité de la marque.
Un investissement stratégique qui transforme la manière de concevoir, maintenir et faire évoluer l’écosystème digital de la marque.
Sans design system
- réintégrer et tester les composants,
- vérifier la cohérence graphique,
- recréer les maquettes manquantes,
- gérer les bugs d’intégration responsive.
Avec le design system
- Les composants sont déjà validés, testés et réutilisables.
- Les designers n’ont plus qu’à assembler et adapter les écrans.
- Les développeurs récupèrent directement les composants documentés.
- La cohérence visuelle et fonctionnelle est garantie d’emblée.
Grâce au design system, le temps de mise en ligne est réduit de près de 40%.
Le projet UXUI en quelques chiffres
85
jours de travail
conception UIKIT + UXUI
+
130
écrans RWD
gabarits de page prototypés
+
320
composants
librairie UIKIT
Chez Advisa, nous avons toutes les expertises pour mener vos projets UX/UI
Briefez-nous !
