Contexte et défis
IMB, une grande banque australienne, nous a demandé de relever un défi crucial :
- Renforcer la sécurité des formulaires sur leur site Webflow pour empêcher les soumissions frauduleuses.
- Améliorer la qualification des prospects en veillant à ce que seuls les utilisateurs vérifiés puissent soumettre des demandes.
En tant qu'acteur bancaire, IMB devait répondre à des normes élevées de sécurité et de fiabilité, tout en garantissant une expérience utilisateur fluide pour ses visiteurs. L'objectif était donc de mettre en place un système robuste, sans créer de friction excessive pour les utilisateurs légitimes.
Compréhension et conseil
Nous avons commencé le projet par une phase de cadrage et d'audit en collaboration avec :
- L'équipe informatique: pour garantir l'intégration technique et la compatibilité avec les systèmes internes.
- Équipe chargée de la sécurité et de l'architecture: pour répondre aux exigences de conformité bancaire.
- L'équipe de conception: pour maintenir une expérience utilisateur cohérente avec l'identité de marque d'IMB.
Cette collaboration nous a permis de définir une solution technique et UX optimisée, conciliant sécurité et expérience utilisateur fluide.
Solution mise en œuvre : OTP avec Twilio Verify + Webflow
Sécurité renforcée grâce à la vérification par SMS
Nous avons mis en place un système d'authentification OTP (One-Time Password) pour filtrer les soumissions frauduleuses. Concrètement, le workflow fonctionne comme suit :
- L'utilisateur saisit son numéro de téléphone dans un champ du formulaire Webflow.
- Un code de vérification est envoyé par SMS via Twilio Verify.
- L'utilisateur doit saisir ce code pour valider la soumission.
- Le formulaire n'est envoyé que si le code est correct.
Détails techniques de mise en œuvre
- Formulaire en plusieurs étapes dans Webflow via Formly pour fluidifier le parcours utilisateur.
- Intégration d'un sélecteur de pays pour le numéro de téléphone avec la librairie Intl Tel Input, garantissant un format compatible avec Twilio et une meilleure expérience utilisateur.
- Scripts backend sur Twilio Functions pour gérer :
/start-verify: envoi du SMS avec le code OTP./check-verify: vérification du code saisi.
Pourquoi ne pas utiliser reCAPTCHA ?
reCAPTCHA aurait ajouté de la friction supplémentaire à l'expérience utilisateur. Le système OTP offre une meilleure expérience utilisateur tout en étant plus robuste face aux bots, qui ne peuvent pas recevoir et valider un SMS.
Collaboration et résultats
Grâce à une collaboration agile avec les différentes équipes de l'IMB, nous avons obtenu des résultats significatifs :
- Expérience utilisateur optimisée: processus fluide, sans friction inutile.
- Élimination efficace du spam: élimination des soumissions frauduleuses.
- Respect des normes de sécurité bancaire: conformité garantie.
- Système évolutif et documenté, pour une maintenance facile et des améliorations futures.
Livrables au client
- Documentation technique détaillée.
- Démonstration de configuration technique dans Webflow en lecture seule.
- Vidéo explicative sur Loom pour l'équipe interne.
- Scripts sécurisés et personnalisés, prêt à être déployé.
Stack utilisé
- Webflow: gestion du front-end et des formulaires.
- API Twilio Verify: service d'authentification OTP.
- JavaScript: scripts personnalisés pour l'intégration.
- Formly: solution de formulaires avancée basée sur WebFlow.
- Intel Tel Input: gestion des numéros internationaux.
Conclusion
Ce projet illustre comment une banque peut renforcer la sécurité de ses formulaires Webflow tout en garantissant une expérience utilisateur fluide. Grâce à l'intégration stratégique de Twilio et Webflow, IMB dispose désormais d'un système robuste et évolutif qui répond à ses exigences de sécurité.
.webp)
