Créer une landing page B2B qui convertit

5 min
B2B
Conversion
Canal :
Site internet
Levier :
Contenu
Copywriting
Design
Lister tous les éléments à intégrer dans votre landing et les compléter sur un Google doc en interviewant les personnes qui vendent votre offre (CEO, commerciaux..).
S’inspirer d’exemples concrets avec des entreprises B2B de votre secteur d’activité mais aussi d’ailleurs.
Structurer les éléments dans un builder drag & drop pour visualiser une première version rapidement et obtenir des feedbacks. Enfin, intégrer la V2 à son CMS.
Ajouter les outils Hotjar, Google Analytics et Crisp et vérifier la rapidité de chargement avec Gtmetrix.
📣 Ce tuto a été écrit avec la collaboration de
Étape 1

Lister tous les éléments à intégrer dans votre landing et interviewer les personnes qui vendent votre offre pour les compléter

Pour rendre la Flow encore plus concret, nous allons prendre l’exemple d’une startup que l’on accompagne : Uptogether (Uptogether forme les managers grâce à un format d’intelligence collective 100% visio).

Voici leur première landing page et page d’accueil à destination des managers (leurs utilisateurs) :

Mais le manager n’est pas le client qui paie, nous avons donc décidé de créer une landing page à destination du client : le DRH.

👉 Commencez par rédiger le contenu des 12 blocs qui composent une bonne landing page.

Pour cela, posez ces questions aux fondateurs et à ceux qui vendent l’offre aux clients :

1) Bloc Menu : Logo + Produit/Offre + Case studies + Pricing + Ressources + Contact/S’inscrire

2) Bloc Hero (ce qu’on voit sans scroller) : Proposition de valeur + CTA + Visuel

Questions à poser :

  • Chez Uptogether, vous aidez qui ? À atteindre quel objectif ? Comment ?
  • Comment je fais pour travailler avec vous ?
  • Quand vous pensez à votre offre, cela ressemble à quoi visuellement ?

3) Bloc Preuve sociale : Nombre de clients avec les bénéfices qu’ils reçoivent + Logos entreprises

Questions à poser :

  • Avec combien d’entreprises vous travaillez ?
  • Quel bénéfice majeur vous leur permettez d’obtenir ?

4) Bloc Expérience client / Comment ça marche : Les étapes + visuels

Questions à poser :

  • Comment fonctionne l'offre côté client ?
  • Comment va-t-il vivre son expérience en tant que client ?

5) Bloc argumentaire de vente : Bénéfices + Features + CTA + Visuels

Questions à poser :

  • Pouvez-vous me lister la totalité des caractéristiques de votre offre ?
  • Quels sont les bénéfices de leur utilisation ?
  • À quoi cela ressemble quand on les utilise ?

6) Bloc Pricing :: Prix + récapitulatif des fonctionnalités

Questions à poser :

  • Combien ça coûte ?
  • Est-ce que vous avez des prix adaptés aux types de clients ?
  • Avez-vous une offre d’essai ?
  • Est-ce que c’est moins cher si je prends en annuel ?

7) Bloc Réassurance : 3-4 icônes avec un petit texte en dessous.

Questions à poser :

  • Quels sont les points d’hésitations de vos prospects pour passer à l’action ?
  • Que pouvez-vous leur dire pour les rassurer ?

8) Bloc Témoignages : Photo du client + Prénom, Nom et rôle + Témoignage

Questions à poser :

  • Avez-vous déjà des clients satisfaits ?
  • Des témoignages / Avis ?

9) Bloc Resources / Case studies : Preview + Visuel + CTA

Questions à poser :

  • Avez-vous créé du contenu pour partager votre expertise ?
  • Avez-vous créé des études de cas client pour démontrer la valeur de votre offre ?

10) Bloc Équipe / Vision : Photo de l’équipe + texte

Questions à poser :

  • Pourquoi est-ce que vous avez créé votre entreprise ?
  • Quelle est votre vision ?
  • Qu’est-ce qui fait de vous les meilleurs pour l’atteindre ?

11) Bloc CTA final : Rappel de la proposition de valeur + CTA

Questions à poser :

  • Comment est-ce que je peux accéder à votre offre ?

12) Bloc Footer :  Mentions légale + Contact + Ressources + Offre/Produit

Ne lâchez rien tant que vous n’avez pas toutes vos réponses.

Vous venez de rédiger l’ensemble du contenu de votre Landing page.

Étape 2

S’inspirer d’exemples concrets avec des entreprises B2B de votre secteur d’activité mais aussi d’ailleurs

On vous a sélectionné 5 super exemples de landing pages, on vous conseille de cliquer sur les liens et de les dérouler pour regarder comment ils structurent l’info et quels mots ils utilisent (et bien sûr on vous montre le résultat final très cool de la landing d’Uptogether à la fin quand la landing page sera live).

Lemlist, outil SAAS pour envoyer des cold emails

Comet, plateforme de mise en relation avec des freelances

Dropcontact, outil SAAS pour enrichir ses données

Qovery, un outil SAAS pour aider les développeurs à déployer des apps

Bigblue, un service pour automatiser sa logistique


Inspiration validée ! Il est temps de mettre les mains dans le cambouie.

Étape 3

Structurer les éléments dans un builder drag & drop afin de visualiser une première version rapidement et obtenir des feedbacks

On vous a préparé un super template sur l’outil Mockflow pour vous aider à construire votre landing page. Vous pouvez le retrouver en entier ici.

Le template est là pour vous inspirer et vous aider à structurer les différents blocs. Mais n’hésitez pas à l’adapter à vos objectifs, votre cible et votre secteur d’activité.

Pour éviter de perdre du temps à peaufiner le design de votre V1 dans votre CMS, nous vous conseillons d’utiliser l’outil Dorik. Il propose une dizaine de templates, il est gratuit et il permet de structurer le contenu hyper vite.

👉 Créez un compte Dorik et choisissez un template.

👉 Créez votre landing avec le contenu listé dans la première étape en suivant le template Mockflow.

Tips UI/UX :

La hiérarchie visuelle doit être forte pour guider l'œil vers les éléments les plus importants et surtout, dans l'ordre que VOUS avez choisi.

Les 4 leviers de la hiérarchie visuelle :

  1. La couleur : utiliser une couleur en contraste avec le reste de la page est la façon la plus simple d’attirer l’attention de votre visiteur sur un CTA (Call To Action).
  2. La taille : plus un élément gros, plus il a d’importance.
  3. Le placement : Un élément placé en haut de la page (vous le voyez sans avoir besoin de scroller) et vers le centre (vos yeux tombent directement dessus) est clairement plus important qu’un élément placé plus bas, ou sur le côté.
  4. L’espace : entourer un élément d’espace permet de le faire ressortir par contraste.

Et voici une liste de sites pour trouver des images et des illustrations pour votre LP :

Ne perdez pas trop de temps dans la partie graphisme/design.

Vous peaufinerez les détails au moment de l’intégration de votre CMS.

Voici par exemple la V1 sur Dorik pour Uptogether, à retrouver en entier ici.

✅ Vous venez de créer votre V1, il est temps de la confronter au jeu des feedbacks.

👉 Partagez la landing par vague de 5 personnes pour recueillir des retours quali et itérer entre chaque vague.

Récupérez des feedbacks de plusieurs parties prenantes :

  • Votre équipe
  • Les clients avec qui vous avez une super relation
  • Des prospects en outreach direct sur LinkedIn (Hello <prénom>, j’ai vu que vous étiez DRHs, je travaille sur notre nouveau site internet et je me demandais si vous aviez 5 min pour y jeter un œil ? :) Je serai ravi de savoir ce que vous en pensez !)</prénom>
  • Des confrères en marketing

Ces retours vont vous permettre d’arriver à une V2 ou même une V5 :).

Vous venez d’obtenir votre V5, il est temps de demander à votre Dev de l’intégrer à votre CMS.

Étape 4

BONUS

Ajouter des outils pour optimiser sa landing page en continu

> Google Analytics

  • Mettre en place un objectif de conversion
    Suivre le temps de chargement, le taux de rebond, le temps passé, l’évolution du nombre de visites.

> Hotjar

  • Analyser la Heatmap pour comprendre ce que vos visiteurs loupent.
  • Regarder des Recording de visiteurs pour découvrir des comportements réguliers et optimiser l’expérience.

> Crisp

  • Installer un live chat pour répondre à toutes les questions.
  • Mettre en place un déclencheur quand la personne part pour lui proposer une ressource.
  • Mettre en place un déclencheur avec un message personnalisé quand la personne arrive d’un URL de campagne spécifique.

> Gtmetrix

  • Vérifier la vitesse de chargement de la page
  • Suivre les recommandations d’optimisation

✅ Votre page est prête à recevoir du trafic qualifié.

La version finale de la landing page d’Uptogether est en cours d’intégration. Vous pourrez la retrouver ici : https://uptogether.com/


À vous de jouer ! :)
Pierre & Mégane, fondateurs de Marketing Flow