MesDépanneurs
L'app des artisans, de la demande d'intervention au paiement, portée par un design system pensé en états
composants dans le design system, dont 26 icônes
étapes d'intervention, chacune déclinée en états
parcours de devis prototypés et testés
L'essentiel, avant le détail
- Le problème
- Les artisans du réseau MesDépanneurs, filiale d'Engie, géraient leurs interventions sur une web app limitée. Il leur fallait une application native pour accepter une demande, planifier, faire signer un devis chez le client, puis clôturer et encaisser l'intervention.
- Mon rôle
- J'ai conçu les maquettes et le prototype des parcours d'intervention, avec un focus sur la saisie du devis et la hiérarchie de l'information, et j'ai structuré le design system qui les fait tenir ensemble.
- Le résultat
- Une application couvrant l'intervention de bout en bout et le pilotage de l'activité, un design system de 36 composants pensé autour des statuts, et deux parcours de devis jugés unanimement plus fluides que la web app par les artisans.
Un outil de terrain, utilisé devant le client
L'artisan utilise l'application entre deux chantiers, souvent d'une main, parfois devant le client qui attend son devis. Chaque écran doit se lire en un coup d'œil et ne demander que l'action suivante.
Une intervention traverse quatre étapes, prise de rendez-vous, rédaction du devis, réalisation des travaux et finalisation, et chacune peut être à réaliser, en attente, validée ou refusée. Ces statuts sont le vrai sujet de l'interface.
Une intervention, de la notification au paiement
-
01
Faire de l'intervention le fil rouge
À partir du userflow du projet, j'ai organisé toute l'application autour d'un objet unique : l'intervention, identifiée par son numéro et suivie de la demande au paiement. Le détail d'une commande se lit en trois onglets, client, intervention et messagerie, et l'onglet intervention empile les quatre étapes dans l'ordre où l'artisan les vit, chacune avec son statut et sa prochaine action.
-
02
Un tableau de bord pour piloter son activité
L'application s'ouvre sur un tableau de bord qui répond à la question que se pose l'artisan en début de journée : où en suis-je ? Le taux de finalisation est mis en avant, accompagné d'une météo qui en donne la tendance d'un coup d'œil. Viennent ensuite les commandes en cours, annulées et finalisées, le chiffre d'affaires consultable mois par mois, les réclamations en cours, le taux de paiement en ligne et la satisfaction client détaillée en propreté, courtoisie, ponctualité et qualité du travail. Depuis la barre de navigation, l'artisan retrouve ses interventions filtrables par statut et par type d'activité, son calendrier et ses notifications.
Le tableau de bord, la liste des interventions avec leurs badges de priorité, le calendrier et les notifications -
03
De la notification au rendez-vous
Une nouvelle demande arrive par notification. L'écran de proposition réunit ce qu'il faut pour décider vite : la prestation, la fourchette tarifaire, l'adresse, la date souhaitée et les photos du client, avec deux actions sans ambiguïté, accepter ou refuser. Une fois acceptée, l'artisan planifie dans un agenda qui affiche ses autres interventions, et un bouton d'appel rappelle de confirmer le créneau avec le client.
Notification, proposition d'intervention, détail de la commande et planification du rendez-vous -
04
Un devis rédigé et signé chez le client
Le devis se construit par désignations : un nom, jusqu'à neuf photos, la main d'œuvre, le déplacement et les fournitures. Le récapitulatif se met à jour en direct, TVA, remise, prise en charge partenaire, franchise et acompte, pour que l'artisan annonce un montant juste sans calcul de tête. Deux parcours ont été prototypés : la signature sur place, conditions cochées puis signature manuscrite à l'écran, ou l'envoi du devis par mail pour signature avant l'intervention.
Rédaction du devis, ajout de photos, récapitulatif par désignation puis signature manuscrite -
05
Finaliser et encaisser sur place
La dernière étape se fait aussi sur le terrain : photos de fin de travaux prises depuis l'application, documents typés, procès-verbal, diagnostic ou compte rendu, puis un paiement en trois temps, déclenché, en cours, validé. L'artisan sait à tout moment où en est son intervention sans quitter l'écran.
Conditions de signature, photo de fin de travaux, suivi des étapes et ajout d'un document typé
Un système pensé autour des statuts
Plutôt que de dessiner chaque écran, j'ai conçu des composants qui portent les statuts. La carte d'étape est le cœur du système : un même composant décliné en validé, à réaliser, en attente, refusé, programmé ou désactivé, avec à chaque fois la bonne action en bouton principal et les autres en retrait.
Les couleurs sont sémantiques et réservées aux statuts : turquoise pour ce qui est validé, rouge pour ce qui demande d'agir, orange pour l'attente, vert pour l'appel au client. Le récapitulatif du devis change lui-même de couleur selon que le montant est vide, validé ou en alerte. Au total, 36 composants, dont 26 icônes, une barre de navigation, des badges adaptables, un stepper de paiement et une série d'illustrations pour les moments de confirmation.
Ce qui a été livré
Le parcours d'intervention complet, de la notification au paiement
Un tableau de bord pour suivre son activité : finalisation, chiffre d'affaires, réclamations, satisfaction client
Deux parcours de devis maquettés et prototypés : signature sur place ou envoi par mail
Un design system de 36 composants, dont 26 icônes, organisé autour des statuts
Des artisans unanimes lors des tests menés par MesDépanneurs : une application bien plus fluide que la web app
Ce que je retiens
- Sur une application de terrain, les statuts sont le contenu : concevoir le système à partir des états d'un objet rend chaque écran plus simple, et le produit plus facile à faire évoluer.
- Une couleur réservée à une seule signification vaut mieux qu'une palette riche : l'artisan apprend vite à lire rouge comme « à moi d'agir ».
- Les retours d'artisans sont plus spontanés et plus directs que ceux d'utilisateurs internes, ce qui change la façon d'évaluer un produit.
