Direct Assurance
Direct Assurance
J’ai contribué à concevoir et développer un parcours de devis automobile progressif pour rendre une logique métier dense plus facile à suivre.
01 · Le défi
Transformer un questionnaire dense en conversation guidée
Un devis automobile doit recueillir de nombreuses informations sur le véhicule, les conducteurs et leur situation avant de proposer une formule. L’enjeu frontend consistait à préserver cette profondeur métier sans donner la sensation d’un formulaire interminable.
Le parcours avance par étapes, conserve le contexte des réponses et présente une question principale à la fois. Cette continuité aide à comprendre où l’on se trouve, ce qui a déjà été renseigné et ce qui reste à compléter.
02 · Architecture du parcours
Faire progresser sans perdre le contexte
L’interface combine une progression globale stable et des interactions locales adaptées à chaque type de donnée.
Découper la complexité
Organiser le devis en étapes métier identifiables plutôt qu’en une succession uniforme de champs.
Afficher les états utiles
Faire apparaître la sélection, la validation et l’étape active au moment où elles deviennent nécessaires.
Conserver un fil narratif
Réinjecter les réponses dans des phrases lisibles pour garder une vue d’ensemble du dossier.
Des interactions adaptées à la donnée
03 · Construction frontend
Faire dialoguer HTML, SCSS et Angular
Mon intervention portait sur l’intégration HTML/SCSS, la logique TypeScript et le développement de composants partagés dans l’environnement Angular. Chaque interaction devait rester cohérente avec les autres écrans tout en répondant à une donnée métier spécifique.
La séparation entre structure, présentation et logique permet d’appliquer les mêmes règles de progression, d’état et de validation aux différentes étapes du devis, puis de faire évoluer les écrans sans reconstruire le parcours à chaque besoin.
- HTML sémantique
- SCSS modulaire
- Angular · TypeScript
Un parcours cohérent
04 · Design system
Des composants pour guider sans surcharger
Le langage d’interface distingue clairement la question, la réponse active et l’action qui permet de poursuivre le devis.
Couleurs
- VioletInteraction et information
#39246a - CorailAction principale
#f36b56 - EncreTitres et données
#18152b - VoileSurfaces de formulaire
#f5f2f8 - ValidationÉtapes complétées
#4fae78 - BlancRespiration et contraste
#ffffff
Typographie
Arboria · Regular / Bold
Parlons de votre véhicule.
Des formulations directes et une progression visible transforment le questionnaire en conversation guidée.
05 · Langage graphique
Donner un rythme visuel à la décision
La direction d’interface s’appuie sur peu de signes, mais leur fonction reste constante tout au long du devis.
La progression comme repère
Le véhicule se déplace sur la ligne d’étapes et matérialise l’avancement sans ajouter de panneau supplémentaire.
Le violet pour interagir
Liens, réponses et états actifs partagent une même couleur afin de rendre l’action reconnaissable.
Le corail pour continuer
L’action principale se distingue du contenu du questionnaire et marque les moments de validation.
