UI : Habillage de parcours d'assurances
Refonte graphique et ergonomique de tunnel de devis et de souscription d'assurance auto et habitation
De la réalisation du devis à la souscription en ligne en toute autonomie
Contexte
Suite à la phase d'idéation, de conception du prototype et de tests utilisateurs. Mon travail a concister à habiller, mettre en scène et valoriser le parcours de devis et de souscription de devis d'assurance.
J'ai ainsi créer l'ensemble de la charte, determiné le langage graphique et ses repères visuels. J'étais également en charge des choix d'ergonomie permettant d'offrir l'expérience d'un service simple et fluide.
Les objectif étaient multiples : mettre en confiance l'internaute, l'accompagner tout au long de la démarche et favoriser la souscription en ligne en toute autonomie.
Mon rôle
Design
- Design des interface web & mobile
- Design de composant et d’icônes
- Déclinaison des étapes et scénarios
- Itérations graphiques et ergonomiques
- Garantir la cohérence et l’harmonie visuelle
- Mise en place des fondations du design system
- Création du nouveau langage visuel de la marque
Gestion de projet
- Rôle de Product Owner Proxy
- Co-Animation des rituels agiles (méthode scrum)
- Assistance à la priorisation des fonctionnalités (US et Backlog)
- Assistance à la rédaction des spécifications
- Suivi des développements
- Tests et retours quotidiens
- Suivi des performances et de la conversion
Entrée en matière
Guider pas à pas
- Focaliser l’attention
- Suggérer la suite sans freiner
- Être transparent et accessible
Première étape du tunnel
Vu mobile
Détails du véhiculier (recherche par marque)
Principes et partis pris
Actions réactions
- Une interface qui réagit aux actions utilisateurs
- Restituer la progression
- Proposer une réponse visuelle à l’enchainement des questions
Principe d’interaction du bouton d’action principale 
Principe d’interaction d’une bulle d’aide
Première étape du parcours dûment complètée
Créer le dialogue
Un langage commun
- Utiliser des codes visuels connus et reconnus
- Des éléments graphiques compréhensibles
- Des questions avec réponses
Principaux codes couleurs et leurs sens du système graphique Amaguiz
Pictogrammes des éléments d’interface
Première étape partiellement complètée avec erreurs et points d’attentions
Créer le dialogue
Clarifier, laisser décider
- Assurer le devoir de conseil
- Détailler les composantes de l'assurance
- Une assurance à sa guise
Étape de présentation du devis et de son tarif condensé
Un ensemble graphique
Assurer une cohérence
- Ne pas créer de rupture dans le parcours
- Pouvoir s’arrêter et de nouveau continuer
- Créer une harmonie visuelle
Ensemble de pictogramme du parcours et des différentes applications Amaguiz
Détail des interactions de la page de tarificationTester et apprendre
Itérer et s'améliorer
- Processus d’amélioration continue
- Logique d’AB Testing
- Développement en cycle itératif
Une vision globale
Décliner et adapter
- Capitaliser et transposer
- Favoriser le cross selling
- Renforcer l’identité de marque
Ensemble d’élément du tunnel habitation, issu du travail secondaire d'harmonisation des parcours et services de la marque