OneWeb - Design System Design

Le Design System OneWeb est né du besoin d’harmoniser l’ensemble des interfaces métiers autour d’une identité, de composants et de règles communes.

Il traduit les décisions prises sur le portail en un langage visuel et technique réutilisable par toutes les équipes produit et développement.

Avant le Design System, chaque projet UI repartait presque de zéro : variations de styles, composants dupliqués et dette visuelle difficile à rattraper.

• poser des fondations stables pour toutes les futures interfaces
• réduire le temps de conception et d’intégration
• aligner les designers et les développeurs autour de références communes

Le travail a consisté à définir des tokens (couleurs, typo, espaces, rayons, ombres), à en dériver des composants Figma, puis à accompagner leur implémentation côté Angular/SCSS.

Des règles d’usage (états, comportements, responsive) ont été documentées pour chaque type de composant, afin d’éviter les dérives au fil des sprints.

Éléments clés :

• tokens de design centralisés
• bibliothèque de composants Figma + équivalents Angular
• documentation d’usage pour les designers et développeurs

Le Design System a permis d’uniformiser l’expérience OneWeb et de gagner en vitesse sur les nouveaux écrans, tout en réduisant les incohérences visuelles.

Il a également simplifié le travail des développeurs front et servi de base au projet OneWeb - Design-to-Code.

Impact :

• moins de variations visuelles d’un module à l’autre
• cycle conception → intégration plus court
• réutilisation facilitée des composants UI