Aperçu

À noter : le texte décrit le Design System que j’ai créé en entreprise. Le visuel et le lien Figma viennent de ma refonte personnelle de OneWeb, conçue de zéro (voir OneWeb - Portail client) : ils ne reprennent rien du Design System d’origine.

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.

Besoin client

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

Approche technique

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

Résultats

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

Aperçu

Création du Design System OneWeb, né directement du projet portail afin de poser des bases UI cohérentes, réutilisables et adaptées à un environnement applicatif complexe.

Le Design System structure l’identité OneWeb, accélère le delivery et simplifie la collaboration entre UI/UX designers et développeurs Angular. Il est utilisé dans le portail, la prise de RDV, les services externalisés et les constats.

création des fondations (couleurs, typo, grille, espaces)
documentation claire pour designers + devs
composants Angular/SCSS unifiés et réutilisables

Besoin client

L’entreprise manquait d’une base visuelle et technique commune. Chaque application avait sa propre UI, ce qui créait de l’incohérence, un temps de développement plus long et des difficultés de maintenance.

Enjeux majeurs :

harmoniser toutes les applications OneWeb
accélérer le delivery et réduire les divergences UI
fournir un langage commun aux équipes produit et développement

Approche technique

Le Design System a été construit en parallèle de OneWeb portail. Chaque composant UI faisait l’objet d’une étude UX, d’une déclinaison UI et d’une documentation permettant une implémentation fiable côté dev.

Les fondations SCSS ont été pensées pour Angular, avec variables centralisées, tokens de design (espacements, radius, ombres) et composants modulaires.

Éléments clés :

tokens SCSS (couleurs, typo, rayons, ombres, z-index)
grille et espaces unifiés pour toutes les apps
documentation claire pour chaque composant
base technique utilisée plus tard dans le projet OneWeb - Design-to-Code

Résultats

Le Design System est devenu la base commune de l’écosystème OneWeb. Il a simplifié les échanges entre équipes, accéléré la production et permis de maintenir une cohérence forte sur tous les écrans.

Il a également servi de socle pour la refonte de la prise de RDV et des projets orientés développement front.

Impact :

gain de temps important sur la création d’écrans
cohérence visuelle renforcée sur l’ensemble de la suite OneWeb
meilleure collaboration entre designers et développeurs