OneWeb - Design-to-Code – Design

À noter : le texte décrit le travail mené en entreprise. Le visuel de la vignette vient de ma refonte personnelle de OneWeb, conçue de zéro (voir OneWeb - Portail client) : il ne montre rien du projet d’origine.

Mise en place d’un workflow Design-to-Code au sein de l’équipe de développement, afin de fluidifier la production et de garantir la qualité UI des fonctionnalités Angular.

Les développeurs se concentraient sur la logique métier pendant que je prenais en charge la partie UI/UX, SCSS et vérification des effets de bord. Ce travail est lié au Design System OneWeb.

• validation UI systématique des PR
• création de variables SCSS et de composants réutilisables
• collaboration fluide avec les développeurs fullstack

Les équipes avaient besoin d’un cadre clair pour aligner le design et le code, éviter les divergences UI et réduire le temps passé à corriger les interfaces après développement.

Objectifs :

• fluidifier le passage design → code
• réduire les retours et les incohérences UI
• accélérer la livraison des fonctionnalités

J’ai mis en place des variables SCSS globales, un système de spacing cohérent et des composants UI directement alignés avec le Design System OneWeb. Chaque composant Angular était contrôlé via un process clair :

• prise du ticket par les devs
• retour UI/UX de ma part
• vérification via PR + correction des effets de bord
• validation PO

Le workflow a permis d’augmenter la qualité visuelle des écrans, de réduire drastiquement les retours et d’accélérer les développements front, en particulier pour les devs moins expérimentés en UI.

Impact concret :

• réduction des retours UI sur les PR
• meilleure cohérence entre pages et modules
• gain de temps pour les développeurs

À noter : le texte décrit le travail mené en entreprise. Le visuel de la vignette vient de ma refonte personnelle de OneWeb, conçue de zéro (voir OneWeb - Portail client) : il ne montre rien du projet d’origine.

Ce projet décrit la mise en place d’un workflow design → dev adapté à une équipe produit où les développeurs étaient à l’aise sur la logique mais moins sur la partie UI.

L’objectif était de sécuriser la qualité visuelle tout en accélérant la livraison des fonctionnalités front.

Sans cadre clair, chaque intégration UI demandait des allers-retours et monopolisait du temps sur des corrections de détails.

• réduire la charge mentale des devs sur la partie UI
• formaliser le passage maquette → composant Angular
• éviter les régressions visuelles au fil des sprints

Concrètement, nous avons défini un pipeline simple :

• le dev implémente la logique et la structure HTML/Angular
• je passe ensuite pour appliquer le design, les bons styles SCSS et vérifier le responsive
• la PR est revue côté UI avant validation PO

Le tout s'appuyait sur le Design System OneWeb et les variables SCSS globales mises en place.

Ce mode de fonctionnement a fluidifié la production des écrans métiers et limité les retours tardifs sur la partie visuelle.

Impact :

• moins de corrections UI après mise en dev
• meilleure séparation des rôles entre logique et interface
• collaboration design ↔ dev plus fluide