Des maquettes conditionnées
Quand nous construisons un tunnel de vente pour n’importe quel produit, c’est la conversion qui doit primer sur le reste. La conviction que nous avons, c’est que l’UX/UI a pour objectif premier de mener l’utilisateur à convertir. Réaliser un design « joli », juste pour qu’il le soit n’a pas beaucoup de sens. L’esthétique doit être présente, mais pas le centre des préoccupations dans ce cas de figure.
C’est pour cela qu’avant de commencer à maquetter, nous avons pris le temps d’étudier le marché, de faire un benchmark des concurrents, de comprendre ce que les utilisateurs recherchent vraiment lorsqu’ils souhaitent se renseigner sur une formation trading ou sur une communauté. Quand les besoins sont clairs, il faut les structurer sous forme de pages avec une architecture qui n’a qu’un seul but : amener à la conversion en répondant aux besoins et interrogations de l’audience.
Pour chacune des pages présentes sur Trading Connection, une architecture précise a été réalisée afin d’indiquer à notre UX/UI Designer le chemin à prendre. Toujours en utilisant Figma, celui-ci à pu proposer dans un premier temps des wireframes au client. Ces derniers permettent de visualiser la composition des pages avant d’y mettre le coup de peinture qui l’illustrera par la suite.
Une fois ces wireframes validés, nous avons pu décliner la charte graphique du client afin de transposer leur identité au sein des différentes pages. Deux tunnels de vente et quelques pages informationnelles (qui sommes-nous, homepage et contact) plus tard, le développement peut désormais commencer.
Un développement efficace et adapté
Systeme IO est l’un des nombreux outils sur le marché qui permettent d’avoir à la fois un CMS pour créer son site web, d’un CRM pour gérer les leads, d’un outil newsletter, des automatisations intégrées, des webinaires… Bref, un outil tout-en-un qui promet monts et merveilles. La réalité est souvent bien différente. Il y’a beaucoup d’outils oui, mais ils sont généralement de plus faible qualité que des outils dédiés.
La création de site web sur Systeme io est par exemple beaucoup moins permissive que sur un WordPress classique. Pour prendre un autre exemple, les fonctionnalités CRM sur ce genre de plateformes n’arrivent pas à la hauteur d’un HubSpot ou d’un Salesforce. Pour la plupart des outils, cette réalité est très peu assumée alors qu’elle est bien réelle.
Le développement des tunnels de vente est néanmoins l’une des fonctionnalités principales de ce genre d’outils. Nous avons pu développer fidèlement les maquettes réalisées en optimisant du mieux possible le responsive. Les bases SEO ont pu être appliquées afin de générer du contenu par la suite qui générera naturellement du trafic.
Une fois ces pages développées, la contribution de contenus a pu commencer. Grâce à une très grande efficacité dans notre collaboration avec Sébastien de Trading Connection, cette étape a pu se faire très efficacement et très rapidement. Lorsqu’elle n’est pas bien gérée, cette partie du projet peut ralentir fortement celui-ci.
Les automatisations avec systeme io
Notre client souhaitait automatiser la connexion entre Systeme.io et sa communauté Discord.
L’objectif : lorsqu’un utilisateur réalise un achat sur son site, il rejoint automatiquement le serveur Discord et obtient un rôle spécifique lui donnant accès à des avantages exclusifs, tant que son abonnement reste actif.
Comme cette fonctionnalité n’est pas proposée nativement par Systeme.io, nous avons dû la développer sur mesure.
Nous avons donc conçu une application en Next.js, hébergée sur Vercel, permettant de lier Discord à Systeme.io. Concrètement, dès qu’un utilisateur clique sur un bouton de synchronisation affiché à la fin du tunnel d’achat, son ID Discord est enregistré dans le champ contact du CRM de Systeme.io.
Une fois cette base mise en place, nous avons configuré plusieurs workflows sur Zapier et ajouté d’autres automatisations. Résultat : lors de l’achat de certains produits, le rôle correspondant est automatiquement attribué à l’utilisateur sur Discord, sans aucune intervention manuelle.
