Aristid Un design system pour parler le même langage.

Contexte

Aristid est un spécialiste de la communication commerciale pour le retail : l’entreprise accompagne les enseignes de la grande distribution dans la production de leurs contenus promotionnels, avec une plateforme de gestion des promotions.

J’y suis intervenu en mission pour Frontguys, de septembre à novembre 2023, comme Product Designer Design System. Plusieurs produits coexistaient, avec des interfaces peu homogènes.

Problème

Les différents produits souffraient d’incohérences visuelles. Ce n’était pas une douleur criante, mais produire un nouveau service prenait plus de temps qu’il n’aurait dû : chaque interface repartait de zéro ou presque.

Les acteurs des projets n’avaient pas de langage commun, ni visuellement, ni sur les objectifs à atteindre, ni sur le ton de voix.

Objectifs

• Rationaliser et harmoniser les interfaces des différents produits
• Simplifier et accélérer la production de nouveaux services
• Donner à tous les acteurs un langage commun : visuel, objectifs et ton de voix
• Faire travailler designers et développeurs en parallèle

Démarche et enseignements

Un rituel hebdomadaire simple. Un tableau de suivi listait les composants prêts à passer en développement. Chaque semaine, nous planifiions le sprint avec les composants à développer, puis une sprint review en fin de semaine faisait le point : ce qui avait été développé, et ce qui n’avait pas pu l’être était reporté au sprint suivant.

Chaque composant était livré avec sa documentation, et les maquettes des produits existants ont été auditées pour partir de l’existant.

Solution

Un audit, puis un système atomic

J’ai commencé par auditer les maquettes des produits existants. Le design system repose sur des composants atomic et des tokens, rassemblés dans une bibliothèque Figma et répliqués dans une bibliothèque Storybook : designers et développeurs partent des mêmes briques.

Des sprints Design × Dev

J’ai mis en place des sprints Design × Dev pour déployer les composants avec leur documentation. Un tableau de suivi montre les composants prêts pour le développement, et un point en fin de semaine mesure l’avancement.

Un accompagnement à l’adoption

J’ai accompagné deux Product Designers, dédiés à la création des produits, pour qu’ils s’appuient sur le design system dans leurs interfaces.

Résultats

Des interfaces plus cohérentes, grâce à une harmonisation entre les produits.

Une création de maquettes plus rapide grâce à la bibliothèque de composants, et un développement plus rapide grâce à la bibliothèque Storybook.

Une meilleure productivité d’ensemble, portée par la collaboration en parallèle entre designers et développeurs.

Réflexions

• Des rituels simples suffisent à faire collaborer design et dev. Une planification hebdomadaire, un tableau de suivi et une sprint review ont gardé tout le monde aligné.
• Un design system, c’est aussi un langage commun. Au-delà des composants, il a aligné les acteurs sur les objectifs et le ton de voix.
• Avancer en parallèle plutôt qu’en cascade. La collaboration continue entre designers et développeurs a amélioré la productivité des deux côtés.