Onafis
Mise en place d'un design system pour une scale-up française de winetech
2025
Contexte
Onafis est une scale-up française de winetech qui développe un SaaS de suivi en temps réel des processus de fermentation, d’élevage et de production de vins, bières et spiritueux. L’outil s’adresse à des utilisateurs variés — vignerons, brasseurs, distillateurs, œnologues ou gérants de domaine — et permet d’accéder à de la donnée opérationnelle précise via une interface web.
Dans un contexte de forte croissance, l’entreprise a initié un travail de structuration du design pour renforcer la cohérence de ses interfaces et soutenir l’évolution du produit.
À gauche, l'écran de connexion avant mon intervention, à droite celui après mon intervention
Problématique
La plateforme d’Onafis avait été construite de façon itérative, avec des écrans développés en réponse à des besoins produits immédiats.
Cela posait plusieurs freins :
Incohérences visuelles, principes d'interfaces et de navigation variés, créant une expérience fragmentée,
Temps de conception & développement allongé, dû à l’absence de référentiel partagé pour les composants UI.
Difficultés à maintenir une expérience fluide, notamment pour des utilisateurs professionnels exigeants en matière de fiabilité et de clarté d’information.
L’absence de designer dans l'équipe, pour prendre en main ces sujets et coordonner les différentes était un facteur limitant.
Poser des bases solides pour une expérience cohérente, scalable et réutilisable
En collaboration avec l’équipe Produit et Développement, je suis intervenu afin de faire :
l’inventaire des composants existants,
la définition des fondations (typographie, couleurs, espacements, règles d’utilisation),
l’architecture du design system,
la création de composants UI modulaires et documentés,
l’intégration des composants dans l’outil de production/design (outil de design + bibliothèque code).
Démarche & approche
Audit & inventaire
Recensement de tous les écrans et composants existants dans la plateforme web Onafis, pour identifier motifs récurrents, doublons, incohérences et patterns manquants.
À gauche, un écran d'acquisition regroupant de multiples données, à droite ce même écran après mon intervention. La part belle est donnée aux informations importantes. Les graphiques - non représentés sur la maquette - sont gérés par une librairie dédiée.
Définition des fondations
Mise en place d’un système de tokens (couleurs, typographies, espacements, icônes, grid) pour assurer une cohérence visuelle, prévoir le support d'un dark-mode et faciliter les itérations futures.
Création des composants
Développement d’une bibliothèque de composants modulaires (boutons, formulaires, listes de données, tableaux, états d’interaction) avec des règles claires d’utilisation, d’accessibilité et de comportement.
Utilisation des variables Figma pour gérer le light-mode et le dark-mode.
Documentation
Structuration d’une bibliothèque documentée, réunissant guidelines, bonnes pratiques et exemples d’usage pour faciliter l’adoption par les designers et développeurs.
Collaboration avec l’équipe dev
Accompagnement de l’intégration du design system dans le processus de développement via des outils de design collaboratifs, afin d’assurer une montée en puissance fluide et partagée. Après la livraison d'une première mouture du design system, nous avons travaillé pendant 15 jours avec l’équipe de développement pour qu'ils se l'approprient, le tester en situation concrète et l'adapter en fonction des besoins identifiés (cas à la marge, erreurs, etc.).
Résultats & impact
Cohérence accrue entre les interfaces, renforçant la perception d’un produit stable et professionnel.
Gain de temps très significatif dans la conception et le développement de nouvelles fonctionnalités.
Expérience utilisateur plus fluide, grâce à une bibliothèque de composants pensée pour l’usage métier.
Une base solide pour scaler l’interface à mesure que la plateforme s’enrichit (internationalisation, nouveaux modules, extensions).
En résumé
Ce design system a permis à Onafis de passer d’une collection d’écrans construits au fil des besoins à une plateforme cohérente, robuste et évolutive. C'est un atout clé pour soutenir la croissance de la solution et garantir une expérience utilisateur hautement professionnelle et fiable.
Contexte
Onafis est une scale-up française de winetech qui développe un SaaS de suivi en temps réel des processus de fermentation, d’élevage et de production de vins, bières et spiritueux. L’outil s’adresse à des utilisateurs variés — vignerons, brasseurs, distillateurs, œnologues ou gérants de domaine — et permet d’accéder à de la donnée opérationnelle précise via une interface web.
Dans un contexte de forte croissance, l’entreprise a initié un travail de structuration du design pour renforcer la cohérence de ses interfaces et soutenir l’évolution du produit.
À gauche, l'écran de connexion avant mon intervention, à droite celui après mon intervention
Problématique
La plateforme d’Onafis avait été construite de façon itérative, avec des écrans développés en réponse à des besoins produits immédiats.
Cela posait plusieurs freins :
Incohérences visuelles, principes d'interfaces et de navigation variés, créant une expérience fragmentée,
Temps de conception & développement allongé, dû à l’absence de référentiel partagé pour les composants UI.
Difficultés à maintenir une expérience fluide, notamment pour des utilisateurs professionnels exigeants en matière de fiabilité et de clarté d’information.
L’absence de designer dans l'équipe, pour prendre en main ces sujets et coordonner les différentes était un facteur limitant.
Poser des bases solides pour une expérience cohérente, scalable et réutilisable
En collaboration avec l’équipe Produit et Développement, je suis intervenu afin de faire :
l’inventaire des composants existants,
la définition des fondations (typographie, couleurs, espacements, règles d’utilisation),
l’architecture du design system,
la création de composants UI modulaires et documentés,
l’intégration des composants dans l’outil de production/design (outil de design + bibliothèque code).
Démarche & approche
Audit & inventaire
Recensement de tous les écrans et composants existants dans la plateforme web Onafis, pour identifier motifs récurrents, doublons, incohérences et patterns manquants.
À gauche, un écran d'acquisition regroupant de multiples données, à droite ce même écran après mon intervention. La part belle est donnée aux informations importantes. Les graphiques - non représentés sur la maquette - sont gérés par une librairie dédiée.
Définition des fondations
Mise en place d’un système de tokens (couleurs, typographies, espacements, icônes, grid) pour assurer une cohérence visuelle, prévoir le support d'un dark-mode et faciliter les itérations futures.
Création des composants
Développement d’une bibliothèque de composants modulaires (boutons, formulaires, listes de données, tableaux, états d’interaction) avec des règles claires d’utilisation, d’accessibilité et de comportement.
Utilisation des variables Figma pour gérer le light-mode et le dark-mode.
Documentation
Structuration d’une bibliothèque documentée, réunissant guidelines, bonnes pratiques et exemples d’usage pour faciliter l’adoption par les designers et développeurs.
Collaboration avec l’équipe dev
Accompagnement de l’intégration du design system dans le processus de développement via des outils de design collaboratifs, afin d’assurer une montée en puissance fluide et partagée. Après la livraison d'une première mouture du design system, nous avons travaillé pendant 15 jours avec l’équipe de développement pour qu'ils se l'approprient, le tester en situation concrète et l'adapter en fonction des besoins identifiés (cas à la marge, erreurs, etc.).
Résultats & impact
Cohérence accrue entre les interfaces, renforçant la perception d’un produit stable et professionnel.
Gain de temps très significatif dans la conception et le développement de nouvelles fonctionnalités.
Expérience utilisateur plus fluide, grâce à une bibliothèque de composants pensée pour l’usage métier.
Une base solide pour scaler l’interface à mesure que la plateforme s’enrichit (internationalisation, nouveaux modules, extensions).
En résumé
Ce design system a permis à Onafis de passer d’une collection d’écrans construits au fil des besoins à une plateforme cohérente, robuste et évolutive. C'est un atout clé pour soutenir la croissance de la solution et garantir une expérience utilisateur hautement professionnelle et fiable.