Comment nous avons construit un site Web SaaS que les gens comprennent réellement

Il y a quelques mois, mon équipe et moi avons finalement pris en charge le projet que les départements marketing du monde entier (y compris le nôtre) continuent de remettre à plus tard : nous avons reconstruit notre site Web.

Et puis, nous avons vu une augmentation de 93% de la génération de leads.

Immédiatement, nous avons réalisé que nous avions déchiffré la formule d'un site SaaS qui fait l'impossible : il fait comprendre aux gens ce que fait notre entreprise.

Puisqu'il nous a fallu quelques années pour arriver ici, en tant que collègue spécialiste du marketing, je voulais vous éviter la peine et partager notre processus.

1. Supprimer les obstacles : des parties prenantes limitées et un MVP solide

Le plus gros inconvénient de tout projet à enjeux élevés est le trop grand nombre de cuisiniers dans la cuisine.

Pour éviter cet écueil, j'ai nommé une seule partie prenante pour chaque aspect du site : une pour la conception, une pour le contenu et une pour le produit. D'autres personnes ont eu l'occasion de donner leur avis, mais les décisions finales ont été prises exclusivement par ces trois propriétaires. Cela était vrai même lorsque les commentaires provenaient de personnes occupant des postes de direction.

De plus, pour lutter contre l'extrême perfectionnisme que j'ai souvent vu dans la planification de projets marketing, nous avons emprunté à notre expérience produit et poussé à une sortie progressive avec un MVP (produit minimum viable) et des phases pour chaque page. Cela nous a permis de travailler plus rapidement, mais cela a également créé une opportunité de nous améliorer continuellement.

• Travail en arrière – Commencez avec une date de sortie (réaliste) et travaillez en arrière, afin que toutes les équipes s'adaptent au calendrier plutôt que de donner des estimations trop prudentes.
• Nommer des parties prenantes uniques - Assurez-vous d'avoir une partie prenante pour chaque domaine, dans notre cas, cela signifiait la conception, le contenu et le produit. Recueillez largement les commentaires, mais limitez les décisions à ces personnes.
• Choisissez un propriétaire de projet – Il devrait y avoir un seul propriétaire pour le projet dans son ensemble. Cette personne sera chargée de prendre des décisions en cas de conflit (et il y aura conflit).
• N'attendez pas le produit parfait - Créez un MVP pour chaque page, assurez-vous qu'il fait bouger l'aiguille et comptez sur une publication progressive.
• Allez dans les détails et réagissez rapidement - Utilisez tous vos outils d'analyse et d'expérience utilisateur pour comprendre rapidement la réponse aux pages que vous publiez et pour les itérer.

2. Les métriques qui comptent : définir des objectifs et des KPI

L'une des premières choses que nous avons faites a été de faire le point sur les problèmes que nous voulions résoudre et de fixer des objectifs pour leur amélioration. Nous étions confrontés à de nombreux problèmes : faible taux de conversion, informations obsolètes, conception obsolète, explication limitée de notre offre multi-produits, aucune page de clients et une page de tarification peu claire.

Nous avons déterminé que la seule façon de faire un travail approfondi dans un délai raisonnable serait d' identifier les pages clés sur lesquelles travailler. Pour nous, cela signifiait se concentrer sur :

• La page d'accueil
• Sélectionnez les pages de produits
• La page des tarifs
• Pages d'études de cas
• Création d'une page clients

Cela impliquait également de renoncer à plusieurs pages que nous voulions aborder pour assurer le lancement du projet à temps.

Pour suivre le succès, nous définissons les objectifs et les KPI suivants :

• Augmenter le taux de conversion en prospects et améliorer la qualité des prospects
• Amélioration du taux de rebond et augmentation du temps passé sur le site et des pages par session
• Améliorer la perception de la marque
• Créer une meilleure navigation sur le site
• Assurer une meilleure exposition de nos différents produits
• Augmenter le trafic organique
• Mise en place d'une infrastructure de site facile à faire évoluer

Chaque entreprise aura des objectifs différents et devra suivre différentes mesures, mais le processus de sélection des pages clés sur lesquelles travailler en premier vous donnera une vue rapide et claire de ce qui fonctionne et de ce qui ne fonctionne pas avant de refaire tout votre site.

• Répondez aux besoins inter-entreprises – Les métriques comme le taux de conversion, le taux de rebond, etc. ne font pas tout. Recherchez également des commentaires qualitatifs sur le site de la part de votre équipe RH, de votre responsable de marque, de votre équipe de vente et de votre PDG.
• Test A/B – Oui, cela semble évident, et vous êtes probablement pressé de publier votre nouveau site, mais vous ne voulez pas vous débarrasser de tout ce qui fonctionne bien. Alors, assurez-vous de tout publier avec un test A/B et regardez attentivement les résultats.
• Définir un KPI principal - Avoir une seule métrique principale vous aidera à prendre des décisions en cas de conflit, dans notre cas, il s'agissait du taux de conversion en tête.
• Sortie par phases – La reconstruction de l'ensemble du site Web en une seule fois est un risque. Commencez avec des pages à faible effort et de grande valeur, puis apprenez et adaptez votre plan.
• Construisez une infrastructure d'analyse – Construisez une infrastructure de mesure à l'avance pour vous assurer de pouvoir suivre l'impact sur chaque KPI.

3. S'inspirer : il y a quelque chose à apprendre de tout le monde

Une fois que nous avons identifié nos problèmes, défini des objectifs d'amélioration et identifié la portée du projet, nous avons commencé à réfléchir à la mise en page et à la conception.

Pensez au nombre de sites SaaS que vous avez visités et quittés sans avoir une idée réelle de ce que fait l'entreprise. « Quelque chose à voir avec le service client ? Peut-être le marketing par e-mail ? » C'est ce que nous avons essayé d'éviter. Nous avons donc commencé par identifier ce dont les visiteurs auraient besoin pour vraiment comprendre Yotpo.

Nous avons créé une feuille de calcul, recueilli l'inspiration de plus de 150 autres sites Web, noté ce que nous aimions et n'aimions pas à propos de chacun et, plus important encore, noté si nous pouvions comprendre ce que fait l'entreprise. Nous avons examiné des éléments aussi granulaires qu'un bouton CTA ou aussi larges que la mise en page générale, les visuels ou le ton de la voix.

Pour la plupart, nous avons consulté des sites d'entreprises que nous ne connaissions pas, de sorte que notre test de compréhension de l'entreprise serait authentique.

• Ne manquez pas votre première impression – N'oubliez pas de prendre des notes la première fois que vous visitez un site Web. Les premières impressions sont essentielles et, comme on dit, vous n'aurez pas de seconde chance.
• Faites une liste – Vous pouvez apprendre de tout le monde. Créez une liste de sites Web pour vous inspirer. Certains sites Web auront un excellent design, d'autres une excellente microcopie et d'autres une navigation incroyable.
• Adoptez l'inconnu – Regardez principalement les entreprises que vous ne connaissez pas pour voir si leur site exprime clairement ce qu'elles font.

4. Qu'est-ce qui vient en premier, la conception ou le contenu ?

Notre produit est super visuel, à tel point que les visiteurs devraient être capables de comprendre 70% du produit sans même lire un mot. Il ne s'agissait pas seulement de trouver le bon slogan, il s'agissait de montrer plutôt que de dire.

Comprenant que les visuels présentés au-dessus du pli seraient essentiels pour attirer l'attention des utilisateurs, nous avons utilisé cet espace pour montrer des maquettes de notre produit en action. Au lieu de laisser le contenu diriger le design, nous avons adopté l'approche opposée, en menant le design et en faisant en sorte que le contenu s'aligne sur la vision de notre studio.

Notre incroyable spécialiste du marketing de contenu, Mel, a utilisé le cadre de conception d'abord pour affiner la stratégie de contenu du site et se concentrer sur ce qui compte le plus pour les clients potentiels : comment Yotpo peut les aider. Elle a fait des recherches pour bien comprendre l'industrie du commerce électronique et les points douloureux typiques. Ensuite, elle a encadré les solutions dans un format rapide et facile à lire qui complétait la structure de conception, tout en incitant les utilisateurs à avancer avec des étapes concrètes pour en savoir plus sur nos produits.

Le résultat est un contenu simple et axé sur la valeur qui reste fidèle au caractère et à la mission de Yotpo pour aider les marques à réussir.

• Laissez le contenu suivre la conception – Si votre équipe de contenu est suffisamment solide pour écrire directement, commencez par la conception et demandez-leur d'écrire en fonction de la limite de caractères. C'est un défi, mais c'est aussi un exercice de rationalisation de votre message.
• Comprenez la meilleure façon de décrire votre produit - si votre produit est visuellement attrayant, mettez-le en valeur en utilisant de nombreuses maquettes et en mettant en valeur le design.
• Gardez-le intéressant au-dessus du pli – Cela peut sembler évident, mais les gens oublient souvent qu'il s'agit de l'immobilier le plus important sur chaque page. Investissez davantage dans ce que vous y affichez.

5. Dans les coulisses : page de tarification

Objectifs de la page :

Il était important pour nous de rendre notre tarification facile à comprendre. Nous avons choisi de regrouper nos forfaits premium sous un même parapluie et notre forfait gratuit sous un autre. De cette façon, les visiteurs intéressés par notre abonnement payant pourraient facilement parler avec les ventes pour en savoir plus, et ceux intéressés par le plan gratuit pourraient commencer immédiatement. Nous voulions également inclure une FAQ détaillée pour répondre à toutes les questions que les visiteurs pourraient avoir.

Notre studio de design talentueux - en particulier notre directeur artistique, Shiri, et notre concepteur de produits senior, Eliko - a pris ces objectifs et les a suivis. Dans cette section et les suivantes, ils expliqueront la stratégie de conception derrière chacune des pages clés du nouveau site Web.

Stratégie de conception :

Puisque l'objectif était d'amener les gens à comprendre et à cliquer sur les plans, nous en avons fait la hiérarchie supérieure. Le fond a été intentionnellement créé pour être plus doux et plus léger afin de ne pas distraire les cases du plan. Pourtant, nous avons utilisé l'arrière-plan comme une opportunité pour représenter la marque Yotpo avec des dégradés et des formes géométriques subtiles. Cette structure générale, développée pour répondre aux objectifs de la page de tarification, s'est avérée être une base vraiment efficace pour les autres pages du site.

6. Dans les coulisses : pages produits

Objectifs de la page :

Chacune des pages de produits incluses dans la refonte, c'est-à-dire les évaluations et les évaluations et le marketing visuel, devait expliquer toutes les fonctions d'un produit super complexe d'une manière que les gens pouvaient comprendre en quelques secondes. Non seulement cela, nous voulions montrer les différents cas d'utilisation pour chaque produit. Par exemple, sur la page Avis et évaluations, cela signifiait expliquer tous les aspects, du fonctionnement de la génération de contenu aux intégrations avec Google et Facebook. Bien que la page soit longue et complète, elle est légère en texte et lourde en visuels.

Stratégie de conception :

Nous avons rapidement déterminé que les maquettes de nos produits en action seraient le moyen le plus simple de faire comprendre aux visiteurs leur fonctionnement. Alors que nous voulions à l'origine utiliser la vidéo, nous nous en sommes tenus au MVP pour sortir les premières versions des pages à temps.

Sur la base de ce que nous avons appris lors de la conception de la page de tarification, nous avons su rendre l'arrière-plan plus clair et plus silencieux tout en mettant l'accent sur les maquettes, en particulier celles situées au-dessus du pli. Les maquettes sont également réalisées dans un langage de conception simplifié pour les rendre faciles à digérer.

La conception axée sur la maquette répond à un certain nombre d'autres problèmes pratiques. Premièrement, les maquettes sont par nature adaptées aux mobiles, à la fois en raison de leur taille et de leur capacité à transmettre de nombreuses informations dans un format minimaliste. En général, concevoir en pensant au mobile vous oblige à considérer ce qui est nécessaire et ce qui ne l'est pas, et cela était certainement vrai pour les maquettes. De plus, ce format est également facilement évolutif pour les futures pages de produits à mesure que notre offre se développe.

7. Dans les coulisses : page Clients

Objectifs de la page :

La page clients était un nouvel ajout à notre site. Nous recherchions un moyen efficace de présenter les marques étonnantes qui utilisent Yotpo et de mettre à jour et de créer une nouvelle maison pour nos études de cas. Les éléments les plus importants sur cette page sont les logos de la marque et les nouvelles études de cas vidéo que nous avons créées pour son lancement.

Stratégie de conception :

Nous voulions raconter l'histoire de la croissance de ces marques avec Yotpo, mais aussi l'importance du contenu généré par les utilisateurs dans son ensemble. La pièce principale pour raconter ces histoires est les logos des clients et les études de cas vidéo, qui occupent chacun une place importante sur la page. De plus, nous avons construit le nouveau modèle d'étude de cas, qui est intégré à cette page, pour être aussi flexible que possible, afin qu'il puisse raconter l'histoire unique de chaque marque au lieu d'inclure simplement des questions et des réponses à l'emporte-pièce.

8. Dans les coulisses : page d'accueil

Objectifs de la page :

Avant tout, l'objectif de la page d'accueil était que les visiteurs comprennent rapidement et facilement ce que fait Yotpo avant de faire défiler vers le bas. Nous voulions également à la fois présenter notre offre multi-produits et mettre en valeur notre plus grand atout : nos clients. Enfin, la page d'accueil devait servir de page de passerelle qui rendait les visiteurs curieux d'en savoir plus sur nos produits.

Pour nous assurer que nous avons atteint ces objectifs, nous avons assis des collègues devant d'autres pages d'accueil SaaS, et pendant qu'ils parcouraient la page, nous leur avons demandé quel élément ils voulaient voir ensuite. Sur la base de leurs réponses, nous avons compris que le flux dont la plupart des gens ont besoin à partir d'une page d'accueil est :

Stratégie de conception :

Notre plus grand défi pour la page d'accueil était d'attirer l'attention des visiteurs tout de suite. Nos recherches nous ont montré que de nombreux sites SaaS utilisent aujourd'hui de jolies illustrations pour attirer les visiteurs, mais nous voulions quelque chose de plus substantiel pour fidéliser les visiteurs.

Nous avons utilisé le flux décrit ci-dessus et le langage de conception que nous avions affiné sur les pages de prix et de produits pour attirer l'attention des visiteurs avec des maquettes minimalistes qui donnent une compréhension immédiate de ce que fait Yotpo. Ceci est suivi d'une bande de logo client au-dessus du pli, puis d'un aperçu rapide et précis de notre offre de produits qui conduit les visiteurs vers les pages de produits. Avec la majeure partie des maquettes en haut, nous avons pu utiliser des illustrations pour soutenir le contenu ci-dessous.

Le résultat global est une page qui donne une sorte de « powershot » ou une vue d'ensemble du produit, encourageant les visiteurs à continuer vers les pages du produit pour en savoir plus.

Notre pile technologique

Nous avons utilisé tous les outils possibles pour créer le nouveau site et mesurer les résultats. Voici un aperçu de notre pile technologique :

• Prototypage et conception – Balsamiq, InVision, Sketch, Photoshop, Illustrator et After Effects
• Analyse et conversion - Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
• Gestion de projet – Smartsheet, Trello

En ce qui concerne le développement, notre assistant de développement David a travaillé avec notre équipe de conception pour donner vie au site. Il a utilisé des composants réutilisables sur tout le site et a mis l'accent sur des visuels nets en incluant des images de rétine pour presque toutes les images et en optant pour SVG (graphiques vectoriels évolutifs) sur les fichiers PNG dans la mesure du possible. Il a également travaillé en grande partie dans SCSS pour avoir accès à plus d'options lors du développement du site.

Conclusion

La reconstruction d'un site Web est une entreprise majeure, mais lorsque vous avez un processus solide en place, vous pouvez le réaliser rapidement et efficacement. Les choses les plus importantes que nous avons apprises dans la construction de ce processus étaient les suivantes :

1. Désignez un seul maître d'ouvrage et réduisez les parties prenantes au minimum.
2. Définir une portée réaliste pour le projet.
3. Évaluez quelles pages devraient être supprimées au lieu d'être repensées.
4. Fixez-vous des objectifs et des KPI clairs.
5. Choisissez un seul KPI principal.
6. Inspirez-vous d'autres sites.
7. Découvrez la manière la plus simple et la plus efficace d'expliquer votre produit.
8. Diriger avec le design dans la mesure du possible. Le contenu peut suivre et sera plus fort pour cela.
9. Optez pour une libération progressive.
10. A/B teste tout.

Si vous souhaitez en savoir plus sur la refonte de notre site Web, ou si vous avez des questions sur ce que j'ai écrit ici, n'hésitez pas à nous contacter ici. Je serais heureux de discuter. :)