Ce n'est plus un secret en 2024 : le site internet d'une entreprise est un pilier essentiel de sa stratégie marketing. Mais avoir un site ne suffit pas. Il faut ensuite faire venir ses prospects dessus, via différents leviers -ex: mailing, réseaux sociaux, SEO, SEA, etc.-, puis convertir ses prospects en leads. (Et potentiellement, ensuite, en clients).

Le taux de conversion, un enjeu stratégique

Le taux de conversion est une métrique utilisée pour mesurer le pourcentage de visiteurs d'un site web réalisant l'action souhaitée. Par exemple, faire une demande de devis. En 2023, le taux de conversion moyen des sites web à une échelle mondiale se situe entre 2,35 % et 3 %.

Et ilexiste de nombreux moyens d'améliorer ce taux :

• Optimisation de l'expérience utilisateur (UX) : simplifiez la navigation sur votre site et assurez-vous que toutes les informations importantes sont facilement accessibles.
• Amélioration du contenu et des appels à l'action (CTA) : rédigez des contenus clairs et engageants qui répondent aux besoins et aux questions de vos visiteurs et placez des CTA bien visibles et incitatifs à des endroits stratégiques sur vos pages.
• Optimisation des temps de chargement : assurez-vous que votre site se charge rapidement pour réduire le taux de rebond. Utilisez des outils comme Google PageSpeed Insights pour identifier les points d'amélioration.
• Personnalisation et segmentation : utilisez des outils de personnalisation pour adapter le contenu et les offres en fonction des segments de votre audience.

Différents leviers sur lesquels nous avons collaboré avec les équipes de StreamNative, afin d'augmenter de plus de 30% le taux de conversion de leur dernière campagne marketing.

Qui est StreamNative ?

StreamNative est une plateforme de messagerie et de streaming basée sur Apache Pulsar, conçue pour les applications cloud-native et orientées événements. Fondée en 2019 par les créateurs originaux d'Apache Pulsar, StreamNative offre des services de Pulsar gérés, des options de déploiement flexibles et un support expert. Ils sont les principaux contributeurs au projet open-source Apache Pulsar et visent à transformer les capacités des entreprises en unifiant les données pour des insights en temps réel.

StreamNative et Digidop, une collaboration de longue date

Après une première collaboration en 2022 sur la refonte totale de leur site web et la migration vers Webflow, nous continuons d'accompagner StreamNative sur des missions ponctuelles de webdesign et développement Webflow. Parmi ces missions, nous avons travaillé avec leurs équipes data et marketing sur la conception et le développement d'une landing page offrant des estimations chiffrées et précises à leurs prospects.

Comment nous avons conçu et développé un calculateur

Comme pour chacun de nos projets, nous avons commencé par des échanges avec les équipes clients. Les objectifs étaient de :

1. Comprendre les besoins des équipes de StreamNative.
2. Évaluer notre capacité à proposer une solution adaptée et réalisable.
3. Valider une roadmap pour le projet.

Pourquoi développer un calculateur de Prix ?

La page de prix initiale de StreamNative n'était pas représentative du vrai coût de la solution, ce qui posait plusieurs défis :‍

1. ‍Problématique du modèle de prix complexe à variables multiples : il était essentiel de fournir des estimations précises et personnalisées.‍
2. Déploiement d’un Lead Magnet pour les équipes marketing : attirer et capturer l'intérêt des prospects grâce à un outil interactif.‍
3. Accélération du closing pour les équipes de vente : en envoyant des informations précises sur les besoins des clients et les calculs de prix préalablement réalisés.

Processus de développement

Pour atteindre ces objectifs, nous avons suivi un processus de développement en plusieurs étapes en utilisant FigJam, Figma, Webflow et JavaScript.

1. Analyse du Modèle de Prix

Sur la base de plusieurs feuilles de calculs Excel, fournies par l'équipe produit, nous avons commencé à analyser le modèle de prix de StreamNative, en identifiant les variables, types de données, unités de mesure, etc.

2. Définition du Parcours Utilisateur

Nous avons ensuite défini un parcours utilisateur, incluant :

• Les étapes du formulaire (multi-step form)
• Les champs à intégrer selon le type de données à récolter
• Les variables et chemins possibles selon les réponses

3. Structuration des Données

La structuration des données a été essentielle pour :

• Récolter des données à chaque étape
• Établir les calculs intermédiaires
• Valider les champs obligatoires et optionnels

4. Design UX & UI

Nous avons travaillé sur le design UX & UI en utilisant FigJam et Figma pour prototyper les concepts et valider les paramètres avec l'équipe de StreamNative.

5. Développement Front-End

Nous avons utilisé Webflow pour développer l'interface front-end, alignée avec les designs créés sur Figma, garantissant un site rapide avec des temps de chargement inférieurs à une seconde grâce à l'hébergement Webflow et à la propreté du code source.

6. Intégration de JavaScript

Le code JavaScript a été intégré pour rendre le calculateur interactif et dynamique, permettant des estimations en temps réel.

7. Connexion API au CRM

Une fois le calculateur créé, nous avons établi des connexions API entre Webflow et leur CRM (Hubspot), permettant de :

• Faire remonter l'ensemble des données
• Créer un nouveau lead qualifié avec BAT pour les équipes Sales
• Traquer l'efficacité des campagnes pour l'équipe Marketing

8. Phase de Test

Des tests approfondis ont enfin été réalisés pour :

• Analyser les comportements d'un parcours utilisateur en situation réelle
• Assurer le bon fonctionnement du calculateur et la précision des estimations
• Assurer la remontée des données dans le CRM

Pourquoi avons-nous utilisé Webflow ?

• Flexibilité dans le développement du front-end : Webflow nous permet de développer de façon précise l'ensemble des comportements UX/UI validés sur la partie concept Figma.
• Intégration facile du code JavaScript : Webflow permet d'intégrer facilement du code JavaScript personnalisé, essentiel à l'ajout des fonctionnalités interactives et dynamiques comme celle de notre calculateur.
• Copywriting de la landing page facilement modifiable pour les équipes marketing : les équipes marketing peuvent facilement modifier le contenu de la landing page grâce à l'interface intuitive de Webflow, sans nécessiter de compétences techniques avancées ni l'aide de nos développeurs.
• Solution combinée à leur site vitrine : utiliser Webflow permet d'intégrer le calculateur avec leur site vitrine existant, assurant une expérience utilisateur fluide.

Les résultats de cette collaboration

Grâce à ce nouveau calculateur, StreamNative dispose désormais d'une précieuse ressource marketing et d'un avantage concurrentiel significatif pour leurs campagnes :

• Une augmentation de plus de 30% du taux de conversion
• Plus de leads qualifiés
• Un meilleur closing et gain de temps pour les équipes de vente
• Un outil performant pour les équipes marketing

Voici un aperçu du résultat en images.

"Thank you for all the work for the TCO calculator"
_{‍Amy Krishnamohan, VP of Marketing at StreamNative.}

Ressources complémentaires sur Webflow et les calculateurs JS :

• Guide JavaScript : Créer un calculateur en code personnalisé sur Webflow [Tutoriel Blog]
• Introduction à JavaScript : Comment programmer un calculateur ? [Tutoriel Vidéo]
• Besoin d'experts pour votre projet ? Découvrir nos offres d'accompagnement Web