Noticia
Design system
Noticia n'avait pas de designer dans son équipe, je suis arrivée en renfort pour revoir les interfaces et mettre en design system pour poser les bases et améliorer la cohérence des interfaces avec les développeurs.
Mon rôle
Les outil(s) et méthode(s)
J'ai collaboré sur le sujet avec :
Contexte
Noticia propose un service de ticket dématérialiser via une application, l'entreprise dispose à la fois d'un outil métier et d'une webapp. L'outil permet aux clients de gérer leurs caisses pour les tickets dématérialiser, ainsi que d’effectuer des actions de communication (avis clients, campagnes SMS, jeux à gratter, etc.).
Quant à la webapp, elle permet aux consommateurs de récupérer leurs tickets dématérialisés. Ces deux interfaces fonctionnent de manière complémentaire, avec de nombreuses fonctionnalités. Cependant, il n'existe actuellement pas de design system, que ce soit pour les fondations (comme des couleurs clairement définies) ou les composants.
Quant à la webapp, elle permet aux consommateurs de récupérer leurs tickets dématérialisés. Ces deux interfaces fonctionnent de manière complémentaire, avec de nombreuses fonctionnalités. Cependant, il n'existe actuellement pas de design system, que ce soit pour les fondations (comme des couleurs clairement définies) ou les composants.
Problématique
Comment structurer et unifier l’expérience des deux interfaces de Noticia (outil métier et webapp consommateur) en mettant en place un design system cohérent, afin de garantir une meilleure lisibilité, une maintenance plus facile et une expérience utilisateur fluide sur l’ensemble du produit ?
Objectifs
- Sensibiliser à l'usage d'un design system auprès de l'équipe produit.
- Créer un design system avec des fondations, des composants et des usages détaillés en fonction des besoins et de l'évolution du produit, en tenant compte des éléments existants pour arriver à faire une passerelle et faire une refactorisation UI
- Travailler en collaboration avec les développeurs avec la mise en place du design system sur StoryBook
.svg)
Fondations
- Typographie
- Couleurs
- Icônes
- Layout
- Style d'objet (espacement, arrondissement, ombres)
.svg)
Composants
Il a ensuite été nécessaire d'implémenter les composants du design system, en les priorisant selon les besoins d'usage sur l'interface. Voici quelques exemples de composants qui ont été implémentés.
Documentation
La documentation est souvent la partie la plus complexe. Il est parfois nécessaire de gérer plusieurs problématiques à mesure que le projet évolue : définir les usages à éviter, répertorier les variantes existantes, et préciser les conditions d’utilisation de chaque élément.
Ce que j'ai appris
J'ai beaucoup appris en développant ce design system, notamment sur la rigueur nécessaire pour intégrer des éléments existants sans repartir de zéro. Il est essentiel de composer avec ces contraintes, de refactoriser et d'ajouter progressivement de nouvelles fonctionnalités. Cette transition peut être délicate, car elle implique souvent un mélange d'anciennes et de nouvelles interfaces, ce qui nécessite patience et priorisation. Une collaboration étroite avec l'équipe technique est cruciale pour déterminer les éléments à faire évoluer selon les besoins.
.svg)