EDI Courtage

Overview

EDI Courtage est une gamme de produits B2B pour le secteur de l'assurance en France. Chez Worldline, j'ai travaillé sur EDI Conformité et EDI Message : la première centralise les déclarations annuelles de conformité entre intermédiaires, assureurs et courtiers grossistes ; la seconde synchronise les systèmes d'information des assureurs et des intermédiaires via des messages EDI normalisés (primes, règlements, commissions, etc.). J'ai rejoint le projet en tant que développeur front-end sur un chantier quasi sans budget design, seulement une trame de base fournie par un studio externe, puis je suis progressivement devenu product designer à temps plein sur ces deux produits.

73+

Composants Figma publiés

400+

Écrans designés pour le dev

3

Profils utilisateur dans les parcours

20+

Sessions UX client

Problem

À mon arrivée, l'équipe livrait un MVP qui ressemblait à un back-office fait de longs tableaux façon Excel. Pour EDI Conformité, le cœur était un questionnaire de conformité, mais la vraie complexité était ailleurs : plusieurs types d'utilisateurs (intermédiaires, assureurs, courtiers grossistes), des droits différents, et des workflows qui devaient faire collaborer des partenaires qui n'avaient pas la même représentation du processus.

Le design n'avait pas été vendu sur le projet, c'était en quelque sorte dû en plus du développement. Pas de UI kit, pas de bibliothèque Figma, pas de règles partagées pour construire un écran, une pop-up ou un formulaire. À mesure que les fonctionnalités dépassaient le questionnaire initial, plans d'action, publication aux partenaires, recommandations, les écrans devenaient difficiles à livrer de façon cohérente.

Quand le projet EDI Message a été gagné, les contraintes étaient familières, données opérationnelles denses, formulaires complexes, utilisateurs habitués aux tableurs, mais le modèle d'interface aussi : même ADN back-office qu'EDI Conformité, mêmes workflows experts noyés dans des tableaux, mêmes besoins en formulaires, modales et écrans d'état. Le produit devait faire partie de la famille EDI Courtage, pas ressembler à un outil ajouté à la va-vite.

My role

• Entrée en développeur front-end (avec un peu de full stack), puis bascule en product designer à temps plein quand le design est devenu critique pour la livraison
• Redesign de premiers écrans de ma propre initiative pour montrer au client à quoi le produit pouvait ressembler, des prototypes qui ont convaincu en interne et ouvert la voie à une validation côté client
• Rédaction d'un guide de style développeur et d'un starter kit (marges, couleurs, do/don't, patterns de pop-up) pour que les devs puissent étendre l'UI sans design écran par écran à chaque ticket
• Design de tous les écrans des deux applications, empty states, loaders, erreurs, formulaires multi-étapes complexes
• Création et publication d'un UI kit Figma commun, mini design system tokenisé avec un seul jeu de composants et deux thèmes produit (EDI Conformité et EDI Message), aligné côté code sur Angular Material dans une stack front Angular
• Animation de tests utilisateurs avec de vrais assureurs et courtiers ; travail avec le Product Owner pour prioriser la roadmap à partir des retours terrain
• Participation aux cérémonies agile (daily, refining, grooming) et estimation des tickets design au même titre que le développement
• Garant du design, relecture des merge requests front pour valider la cohérence avec Figma, échanges avec les développeurs quand le CSS dérivait, et maintien de l'alignement UI avec le design system en production
• Intégration front-end des écrans pendant la transition dev → design

Approach

Prouver la valeur avant d'avoir un budget. Sans ligne design formelle, j'ai redesigné des parcours clés et les ai présentés au client. L'enthousiasme interne et les retours clients ont aidé à débloquer du budget, le design a été revendu comme un levier de différenciation, pas un bonus.

Scaler le design sans scaler l'équipe. Au début, un style guide léger donnait assez de garde-fous aux développeurs pour livrer de nouveaux écrans. Quand la complexité a augmenté, questionnaires qui se ramifient selon l'activité, publication aux partenaires, plans d'action centralisés, ce n'était plus suffisant. J'ai redesigné l'application complète et suis passé d'une livraison écran par écran à un design système partagé.

Une identité EDI Courtage, deux thèmes produit. EDI Message ressemblait beaucoup à EDI Conformité sur le plan de l'interface, mêmes types d'écrans, mêmes patterns back-office, mêmes attentes utilisateur. Plutôt que de designer deux UI en parallèle, j'ai construit un UI kit commun : une bibliothèque Figma publiée, câblée avec des design tokens, structurée comme un sélecteur de thème mode EDI Conformité vs mode EDI Message. Pour les patterns de composants, l'espacement et les bases d'interaction, je me suis fortement inspiré des Material Design web guidelines, adaptées à la marque EDI Courtage et aux deux thèmes produit, pas appliquées telles quelles. Les deux applications tournaient en Angular, donc le kit se traduisait en Angular Material côté code : les développeurs pouvaient s'appuyer sur des composants documentés et familiers plutôt que de reconstruire l'UI from scratch, ce qui a beaucoup simplifié l'intégration front sur les deux produits. Mêmes composants Figma, mêmes règles d'interaction, deux thèmes couleur, une couche Angular Material partagée sur les deux codebases.

Designer pour un domaine multi-acteurs. EDI Conformité n'est pas un simple formulaire en ligne : l'intermédiaire remplit un questionnaire unique, publie sa déclaration à ses partenaires, et les assureurs ou courtiers grossistes analysent les réponses et formulent des recommandations. Les plans d'action vivent dans un espace partagé. J'ai cartographié droits, états et passages de relais entre types d'utilisateurs pour que chaque acteur voie la bonne partie du workflow sans casser la coordination.

EDI Message : des tableurs vers une UI opérationnelle. EDI Message gère l'échange de données informatisé entre systèmes assureur et intermédiaire, messages EDI plats pour les actes de courtage comme l'émission de primes (500), le règlement (502), le reversement de commissions (503) ou les préavis de mise en demeure (504). Comme le modèle d'interface collait à Conformité, j'ai pu étendre le même design system plutôt que repartir de zéro, puis valider les parcours en sessions UX co-construites avec le client.

Des rituels agile sur un socle projet. L'équipe a adopté les cérémonies agile, daily, refining, grooming, et estimait les tickets design comme dev : combien de temps devrait prendre un écran, un parcours, une tâche d'intégration avant d'entrer en sprint. Jalons client et rituels sprint coexistaient pendant que l'équipe gagnait en itération. Pas de PM dédié : le PO interne cumulait un rôle hybride PO/PM, backlog, périmètre et alignement métier. Une équipe en train d'ancrer les réflexes produit, priorisation partagée, itération, estimation, et pour moi, une première expérience du design comme voie à part entière dans ce rythme. Nous animions des sessions UX mensuelles avec le client, en lien avec le PM, le PO, les développeurs front-end et back-end, pour aligner la roadmap et valider les parcours avant développement.

Outcome

Ce qui avait commencé comme un MVP à petit budget avec seulement une direction artistique externe est devenu deux applications B2B cohérentes au sein de la famille EDI Courtage, avec une identité de marque partagée. J'ai installé une pratique design dans l'équipe, des corrections d'écran ponctuelles à une couverture UI complète, une bibliothèque Figma publiée avec tokens thématisés, une couche Angular Material partagée pour les développeurs, une revue des merge requests comme garde-fou côté code, et de la recherche utilisateur récurrente avec assureurs et courtiers. Cette trajectoire a aussi structuré mon parcours : c'était mon premier gros projet design produit chez Worldline, à temps plein, de bout en bout, à l'échelle d'un vrai B2B, et le passage d'une passion pour l'intégration front-end au design UX/UI comme discipline principale. C'était aussi une première leçon sur la façon dont une équipe passe de la livraison projet à des modes de fonctionnement produit, même quand l'organisation n'a pas encore tout aligné.

EDI Conformité est en ligne sur ediconformite.fr.