Retour
Rôle
UX/UI Designer & Intégrateur
Secteur
Télésurveillance
Type
Onboarding
Logiciels utilisés
Miro
Figma
Visual studio code
À la signature d'un contrat de télésurveillance, l'entreprise doit collecter auprès du client ou du technicien qui l'accompagne l'ensemble des consignes opérationnelles qui régiront la gestion du site : conduites à tenir en cas d'alarme, personnes habilitées à intervenir, accès et codes, procédures spécifiques.
Jusqu'ici, ce recueil se faisait sur papier, de manière non standardisée. J'ai pris l'initiative de repenser ce processus de zéro : concevoir un formulaire digital multi-étapes, du benchmark à la maquette haute fidélité sur Figma, jusqu'à l'intégration complète en HTML et CSS.
Aucun formulaire digital n'existait. La collecte des consignes reposait sur des échanges oraux ou des documents papier libres, sans structure commune. Ce fonctionnement créait quatre problèmes récurrents :
Zéro standardisation
Chaque technicien collectait les informations à sa façon. Des champs manquaient, des consignes étaient interprétées différemment d'un dossier à l'autre.
Perte de données
Les documents papier se perdaient, n'étaient pas archivés, ou arrivaient illisibles. Retrouver des consignes validées des mois plus tôt relevait du défi.
Processus lent et peu professionnel
Le remplissage manuel lors d'un rendez-vous client était chronophage, source d'erreurs de retranscription, et renvoyait une image peu soignée.
Risque opérationnel réel
Des consignes mal renseignées pouvaient déclencher de fausses interventions ou des mauvaises procédures en cas d'alarme des erreurs coûteuses dans ce secteur.
Souscrit au contrat. Pas toujours à l'aise avec les outils digitaux. Veut que ça aille vite et ne pas avoir à poser de questions.
– Comprendre immédiatement ce qu'on lui demande
– Remplir sans aide extérieure
– Corriger une erreur sans tout recommencer
– Valider ses informations avant soumission
Accompagne la signature. Connaît le produit, travaille souvent depuis une tablette. Doit guider le client tout en avançant efficacement.
– Guider le client étape par étape
– Remplir vite, sans ressaisie
– Vérifier la complétude avant validation
– Utiliser le formulaire sur tablette, sans connexion stable
J'ai commencé par analyser des formulaires d'onboarding dans des secteurs proches assurance, sécurité, services aux entreprises pour identifier les patterns qui favorisent la complétion et ceux qui génèrent de l'abandon. J'ai également listé l'ensemble des informations nécessaires à un dossier de consignes complet.
Le formulaire a été découpé en étapes thématiques, chacune correspondant à une catégorie logique :
– Identification du site et du client
– Contacts d'urgence et personnes habilitées
– Procédures en cas d'alarme ou d'intervention
– Accès, codes et équipements spécifiques
– Consignes particulières et instructions libres
Cette segmentation réduit la charge cognitive : l'utilisateur ne voit jamais la totalité du formulaire d'un coup et avance section par section.
Les wireframes ont servi à valider la logique de progression et la hiérarchie des champs avant d'investir dans le visuel. Chaque écran a été pensé pour une utilisation en rendez-vous : zones de saisie larges, peu de texte, navigation évidente.
Les maquettes Figma ont défini le système visuel complet : typographie lisible sur tous supports, code couleur par section, indicateur de progression visible en permanence, messages d'erreur contextuels. Une fois validées, j'ai procédé à l'intégration directe en HTML et CSS sans framework JS, sans dépendance externe.
Ce projet couvre la chaîne complète d'une initiative digitale menée en autonomie totale : identification du problème, conception UX, design d'interface, et livraison d'un produit fonctionnel en HTML/CSS.
Il illustre la capacité à transformer une pratique informelle et risquée en outil structuré, directement utilisable sur le terrain et à assumer les deux rôles de designer et d'intégrateur jusqu'à la livraison finale.
– Audit de l'existant
– Architecture de formulaire
– Benchmark UX
– Prototypage Figma
– Intégration HTML/CSS
