Ma refonte de site Web à faible coût qui a augmenté les taux de conversion de 42% en 7 semaines

Faire une refonte complète du site Web de ma boutique en ligne a été sur ma liste de choses à faire depuis très longtemps, mais je n'ai pas pu me résoudre à appuyer sur la gâchette car cela n'a jamais été une priorité.

Voici la chose. Mon taux de conversion a toujours été assez bon (>3%). Et ma boutique en ligne connaît une croissance à deux chiffres chaque année, alors pourquoi faire bouger les choses ?

Mais ensuite, j'ai assisté à une réunion de cerveaux il y a 3 mois avec un groupe d'autres vétérans du commerce électronique et j'ai décidé d'en parler pendant mon tour sur le "hotseat".

Salut tout le monde. Je pense faire une refonte du site, mais mon taux de conversion actuel est toujours assez bon. Dois-je le mettre à jour maintenant ? Et tu penses que c'est assez grave pour que je doive le réparer aujourd'hui ? Puis-je le reporter d'un an ?

Les réponses que j'ai reçues étaient atrocement douloureuses à entendre.

• Ce site semble avoir été conçu dans les années 90. Si vous faisiez une refonte, je parie que vous pourriez obtenir une augmentation de 50% du taux de conversion. – Mike Jackness
• Vous organisez un cours ? Je ne prendrais pas ton cours si je voyais ça. – Kévin Stecko
• Ce sont les types de sites que j'aime acheter , réparer et revendre à profit. – Dana Jaunzemis

Entendre ces commentaires a vraiment blessé ma fierté et j'ai fait de mon mieux pour ne pas être sur la défensive.

Mais dès que je suis revenu du cerveau, j'ai immédiatement contacté mon concepteur, j'ai créé une maquette rapide dans Photoshop et j'ai commencé à le lancer .

Mon processus de mise en œuvre était assez simple. J'ai parcouru et parcouru chaque page moi-même, je l'ai présentée « à peu près » à quoi je voulais qu'elle ressemble et j'ai demandé à mon designer de choisir les pièces pour la rendre « meilleure ».

J'ai budgétisé environ 6 semaines pour faire la refonte avec moi en contribuant environ 40 heures de mon temps. Chaque page du site a été entièrement refaite.

Dans l'ensemble, le projet a fini par prendre 7 semaines en raison de circonstances imprévues avec la compatibilité des navigateurs (je vous déteste IE !) et m'a coûté 1840 $ .

Note de l'éditeur : voici un lien vers mon nouveau site et vous pouvez utiliser la machine wayback pour voir l'ancienne version.

Obtenez mon mini-cours gratuit sur la façon de démarrer une boutique de commerce électronique réussie

Si vous souhaitez démarrer une entreprise de commerce électronique, j'ai mis en place un ensemble complet de ressources qui vous aideront à lancer votre propre boutique en ligne à partir de zéro. Assurez-vous de l'attraper avant de partir!

Cliquez ici pour télécharger

Résultats de la refonte de mon site Web

Les résultats de conversion suivants concernent uniquement le trafic sur mobile, ordinateur et tablette pour le trafic Google CPC .

Étant donné que mon site génère une tonne de trafic provenant de pages de contenu qui ne sont pas nécessairement converties en ventes, il était plus logique de calculer les chiffres pour le trafic publicitaire ppc ciblé à des fins de comparaison.

• Taux de conversion de bureau ont augmenté de 46% Mis à jour!
• Taux de conversion mobiles ont augmenté de 21% Mis à jour!
• Taux de conversion Tablet ont augmenté de 25% Mis à jour!

Remarque : Mes données de taux de conversion ont été comparées à la même période que l'année précédente pour éliminer des variables telles que la saisonnalité et les fluctuations de la demande.

Cela étant dit, le seul véritable moyen de mesurer les différences de taux de conversion est de tester par fractionnement les conceptions, ce que je n'ai pas fait pour gagner du temps.

Tout d'abord, l'augmentation du taux de conversion des ordinateurs de bureau m'a vraiment choqué car je ne m'attendais pas à un saut aussi important. Je savais que mon ancien site avait besoin de travail mais pas tant que ça !

( Mise à jour : après quelques mois de données supplémentaires, l'augmentation du taux de conversion pour le bureau est de 46 %)

Pour les clients de tablettes, l'augmentation du taux de conversion était en fait supérieure à 15 %, car j'ai trouvé un bug majeur dans la mise en œuvre de la tablette quelques semaines après le lancement qui a été mélangé avec les résultats.

( Mise à jour : après quelques mois de données supplémentaires, l'augmentation du taux de conversion pour la tablette est de 25 %.)

Et pour le mobile, j'avais déjà mis en place un site mobile assez décent en 2013 donc je ne m'attendais pas à des sauts énormes mais 12% c'est quand même assez bon.

( Mise à jour : après quelques mois de données supplémentaires, l'augmentation du taux de conversion pour mobile est de 21 %.)

En tout cas malgré l'augmentation du taux de conversion, toutes les données n'étaient pas roses. Pour une raison quelconque, mes mesures sur site, telles que le taux de rebond, ont augmenté d'environ 10 % dans l'ensemble.

Note de l'éditeur : pour le moment, je soupçonne que c'est parce que j'ai supprimé la navigation de gauche du site, mais je devrai passer au crible les données pour savoir exactement pourquoi cela se produit. Mettre à jour! J'ai arrêté la prise en charge de plusieurs versions de navigateur dans cette refonte, ce qui a contribué à ce problème.

Quel panier j'utilise ?

La question la plus courante que l'on me pose toujours à chaque refonte est…

Steve, qu'est-ce que c'est dans le panier ? Est-ce Shopify ? Ou est-ce Bigcommerce ?

Et quand je dis à tout le monde que j'utilise toujours mon panier d'achat open source old school fortement modifié , ils sont généralement choqués.

Voici le truc…

Le panier que vous choisissez n'a rien à voir avec l'apparence de votre panier ou l'apparence de votre site Web. L'objectif principal de votre panier est de gérer et de traiter les transactions.

Si votre panier dispose de toutes les fonctionnalités backend dont vous avez besoin, vous n'avez pas nécessairement besoin de changer . L'esthétique de votre site Web a très peu à voir avec le moteur de panier d'achat.

Donc, même si vous avez un vieux panier comme le mien, tant qu'il a toutes les fonctionnalités dont vous avez besoin, vous ne devriez pas le juger par son apparence, car vous pouvez toujours changer son apparence.

La meilleure partie est que si vous êtes sur une plate-forme open source, vous pouvez ajouter vos propres fonctionnalités quand vous le souhaitez car vous avez un contrôle total.

Par exemple pour cette refonte du site, j'ai mis en place cette chouette petite fonctionnalité de preuve sociale pour ma boutique. En gros toutes les 5 à 15 secondes, une petite fenêtre apparaît dans le coin inférieur gauche qui affiche un achat précédent effectué sur le site.

Sur Shopify, vous pouvez acheter un plugin pour faire exactement la même chose et payer 15 $/mois. Mais il m'a fallu environ 5 heures (ça aurait vraiment dû prendre 2 heures mais mon codage était rouillé) pour pomper la même chose sans frais récurrents .

Quoi qu'il en soit, ce ne sont que quelques-uns des avantages de posséder le code source. Si vous êtes techniquement enclin, je vous recommande d'essayer l'open source.

Mais si vous n'avez aucune idée de la conception de sites Web et que vous ne voulez pas avoir à vous soucier de quoi que ce soit de technique, optez pour un Shopify ou un BigCommerce.

Changer le schéma de couleurs

L'une des plus grandes plaintes concernant mon site d'un point de vue esthétique était la palette de couleurs. L'ancien site était violet et jaune et la palette de couleurs que j'ai choisie donnait au site un aspect démodé .

Note de l'éditeur : voici un lien vers mon nouveau site et vous pouvez utiliser la machine wayback pour voir l'ancienne version.

Ce qui est ironique, c'est que dans mon cours Créer une boutique en ligne rentable, j'enseigne en fait des cours sur la théorie des couleurs, mais je n'avais pas ces connaissances en 2013 donc je n'ai jamais eu l'occasion de les mettre en pratique .

Bref, j'ai utilisé un site appelé color.adobe.com pour choisir des couleurs complémentaires pour mon nouveau design. Et pour rafraîchir l'apparence, j'ai choisi le bleu sarcelle, le rose vif et le jaune.

Pourquoi 3 couleurs ? C'est parce que je voulais une couleur spécifique associée à « l'action ». Je voulais une couleur spécifique pour "attirer l'attention". Et enfin, je voulais une couleur générale vive pour que le site se sente « jeune et branché ».

La sarcelle est ma couleur de fond. Le jaune est ma couleur « d'attention » si j'ai des offres spéciales, et le rose vif est utilisé pour chaque bouton d'action sur le site car il se démarque et apparaît.

Chaque page de mon site est conçue pour avoir un objectif singulier.

Pour la première page, je veux que les gens parcourent notre collection personnalisée car c'est la section avec les marges les plus élevées. Sur les pages de catégories, je veux que les gens cliquent sur un produit. Et sur une page de produit, je veux que les gens cliquent sur « Ajouter au panier ».

Les 3 piliers de la conversion

Une grosse erreur que je vois que les gens font lors de la conception de leurs propres sites Web, c'est qu'ils essaient de copier Amazon.com . Amazon est la plus grande plate-forme de commerce électronique de la planète, alors pourquoi ne modéliserais-je pas mon site sur le leur ?

Tout d'abord, la conception du site Web d'Amazon est moche, générique et ne convient pas à la plupart des magasins en ligne de niche . La raison pour laquelle Amazon peut s'en tirer avec un site Web moche est que tout le monde sait qui ils sont, ils sont habitués à l'interface et ils font déjà confiance à Amazon.

Mais lorsque vous avez votre propre site Web, vous devez établir cette confiance à partir de zéro car personne ne sait qui vous êtes.

Dans l'ensemble, il y a trois choses principales qui sont cruciales pour quiconque atterrit sur votre site pour la première fois.

Premièrement, vous devez informer les gens que vous offrez la livraison gratuite. Une sorte d'offre de livraison gratuite fait désormais partie du cours grâce à Amazon et aux autres magasins de commerce électronique à grande surface.

Deuxièmement, parce que vous êtes une entité inconnue, vous voulez rassurer les clients qu'ils peuvent retourner leur marchandise s'ils ne sont pas satisfaits.

Et enfin, la troisième chose que vous devez établir avec un nouveau client est la confiance qui est peut-être le facteur le plus important de tous.

Si un client atterrit sur votre site et qu'il ne fait pas confiance à votre magasin parce qu'il n'a jamais entendu parler de vous, il va simplement ramasser et partir.

Pour ma refonte, je renforce la confiance de différentes manières.

Dans l'en-tête de chaque page, je souligne la livraison gratuite, les retours sans tracas et mon numéro de téléphone. Avoir un numéro de téléphone bien en vue est TRÈS IMPORTANT !

Chaque fois que j'achète en ligne dans une nouvelle boutique, la première chose que je fais est de cliquer sur la page de contact et de chercher un numéro de téléphone et une adresse . Et si aucun de ces articles n'est affiché ou si un seul des deux est présent, je n'y achèterai pas.

Les clients veulent avoir la possibilité de contacter un magasin en cas de problème avec leur achat. Et par conséquent, vous voulez que ces informations soient aussi visibles que possible sur chaque page, y compris les heures d'ouverture de votre magasin.

Le fait d'avoir des « heures d'ouverture officielles » donne également à votre boutique une apparence plus professionnelle, car vous vous présentez comme une entreprise établie avec de « vraies » heures de bureau.

Preuve sociale et confiance

Vers le bas de chaque page, j'ai une section dédiée à la preuve sociale qui donne de la crédibilité à mon site.

Après tout, nous avons été présentés dans tout un tas de magazines différents et nous avons participé à l'émission Today, alors à quoi bon si nous ne nous en vantons pas ?

Notre section de preuves sociales / mentions dans la presse se trouve sur chaque page du site, donc même si vous ne la voyez pas la première fois, vous finirez par le remarquer.

J'ai également demandé à un tas de nos clients leur photo et un témoignage qui s'affiche juste en dessous de la rubrique presse.

Ce sont de vrais clients qui ont fait leurs achats sur notre site, ont été très satisfaits de leur achat, et ont bien voulu nous laisser un très beau témoignage.

Une cliente en particulier, Sherri, a acheté plus de cent cinquante fois sur notre site parce qu'elle aime beaucoup nos mouchoirs.

Et enfin, j'ai inclus du verbiage qui rassure le client que sa satisfaction est notre principale préoccupation. Nous ne laissons jamais un client partir mécontent. Et si quelque chose ne va pas, nous vous remboursons intégralement.

Modification de la navigation

La refonte de la navigation de mon nouveau site a été un domaine où j'ai eu du mal. Tout d'abord, je suis un GRAND fan de la navigation à gauche . Mon ancien design l'avait et mes clients l'ont adoré car le menu était toujours visible et accessible.

Le côté gauche d'une page Web est également l'endroit où votre œil se dirige naturellement et c'est l'endroit le plus évident pour commencer à magasiner.

Mais voici mon dilemme…

Si je devais inclure une colonne de gauche dédiée à la navigation, tout le reste du site devrait rétrécir.

Par exemple, toutes mes images de produits devraient être considérablement réduites, ce qui aurait un impact négatif sur les conversions .

Mes images de catégorie seraient plus petites, ce qui réduirait le CTR .

Le verbiage sur chaque page prendrait plus d'espace sur l'écran, ce qui pousserait les produits plus loin dans la page .

Donc, en fin de compte, je suis allé avec un menu déroulant de niveau supérieur, de style survol . La beauté d'une barre de navigation de niveau supérieur est qu'elle se comporte de la même manière qu'une barre de navigation de gauche, mais elle n'occupe pas la même quantité d'espace à l'écran.

Et en déplaçant la navigation vers le haut, j'ai pu faire exploser mes images de catégorie et de produit de 300%, ce qui les a vraiment rendues pop.

L'autre avantage de l'utilisation de la navigation de haut niveau était la possibilité de séparer des catégories distinctes de manière très claire.

Par exemple, j'ai maintenant une catégorie déroulante distincte « Acheter par occasion » alors que dans mon ancienne conception, cette section était mélangée avec le reste du menu de gauche afin qu'elle ne ressorte pas.

J'ai également ajouté une section spéciale dédiée aux produits personnalisés, aux best-sellers, aux nouveautés, une page FAQ, une page de contact, la page à propos, voir le panier et payer.

Fondamentalement, tous les éléments de navigation les plus importants sont maintenant dans la barre principale pour que tout le monde puisse les voir.

Mettre l'accent sur ma proposition de valeur unique

Un principe important que j'enseigne dans mon cours sur le commerce électronique est que chaque page de destination de votre site doit avoir une proposition de valeur unique et forte .

Pourquoi quelqu'un devrait-il acheter dans votre magasin ? Pourquoi devrais-je acheter ici plutôt qu'un concurrent ? La réponse doit être claire tout de suite.

Donc, pour ce design, j'ai choisi de mettre en avant nos points forts sur chaque page de notre site.

Par exemple, sur la page d'accueil, notre proposition de valeur est en plein dans l'image de démarrage.

Sur nos pages de catégories, j'ai mis en place une zone de texte spéciale pour expliquer pourquoi notre magasin est spécial.

Le but ultime est de convaincre un client dans les 5 premières secondes pourquoi il devrait acheter chez vous et non chez un concurrent.

Embellir les pages de produits

L'un des plus grands points à retenir de ma critique de site était que mes pages de produits n'étaient pas à la hauteur .

Voici une page de produit de l'ancien design.

Voici que la même page ressemble sur mon nouveau site.

Remarquez-vous des différences ? Tout d'abord, parce que j'ai supprimé la barre latérale gauche, j'ai pu augmenter la taille de l'image du produit de 266% .

Non seulement l'image principale est beaucoup plus grande, mais j'ai également réorganisé les éléments de la page du produit pour encourager davantage de clics « Ajouter au panier ».

Par exemple, juste à côté du bouton « Ajouter au panier » se trouvent des zones de texte qui rassurent le client sur la livraison gratuite et les retours sans tracas.

Il existe également un lien en haut qui indique de manière dynamique au client quand il recevra sa commande selon qu'il choisit le standard ou l'express, et tous les frais d'expédition associés.

J'ai également superposé les boutons Pinterest et Facebook directement sur l'image elle-même pour encourager le partage après avoir remarqué que la plupart des visiteurs ne regardaient même pas les boutons de partage dédiés sur mon ancien site.

Une chose intéressante à noter est que j'avais à l'origine deux énormes boutons bleus et rouges à partager sur Facebook et Pinterest juste sous l'image, comme indiqué ci-dessous.

Mais finalement, j'ai décidé de les supprimer car ils se démarquaient plus que le bouton rose vif "Ajouter au panier". En fin de compte, j'apprécie beaucoup plus une action « Ajouter au panier » qu'un partage sur les réseaux sociaux.

Enfin, j'ai également augmenté la taille de la section des ventes croisées pour inciter le client à acheter des articles similaires.

Améliorer le paiement

L'amélioration du processus de paiement n'était pas une priorité absolue pour moi car il n'y avait aucun problème grave avec l'ancien site. Mais comme j'avais déjà ouvert le capot, j'ai décidé de résoudre certains problèmes en suspens qui persistent sur mon site depuis un certain temps.

Tout d'abord, de temps en temps, nous recevions des appels de personnes confuses et se demandant s'ils avaient besoin d'un compte pour acheter sur notre site. Voici à quoi ressemblait la première page de paiement sur notre ancien site.

La solution à ce problème consistait à masquer la connexion par défaut et à n'afficher que deux boutons rose vif pour la vérification.

J'ai également rendu les logos de confiance plus visibles pour rassurer le client que le paiement est sécurisé et que sa satisfaction est garantie.

L'autre changement majeur était que j'ai rendu la caisse complètement réactive .

Remarque : si vous êtes sur Shopify, vous avez probablement déjà vu à quoi ressemble un beau processus de paiement réactif.

Donc, au lieu de réinventer la roue, j'ai essentiellement imité la conception de la caisse de Shopify parce que c'est assez génial.

En bref, voici à quoi ressemble ma caisse maintenant sur différentes tailles d'écran.

Pour le bureau…

Pour tablette et mobile

Quelques mots sur le mobile

Lors de la dernière refonte de mon site en 2013, j'ai mis en place un site Web mobile complètement séparé du site de bureau qui vivait dans un sous-domaine différent.

Et même si je pense toujours que c'était la bonne décision à l'époque, ce n'est certainement pas le cas aujourd'hui. Aujourd'hui, il existe de nombreux frameworks comme BootStrap qui facilitent grandement la conception réactive.

Au cours des dernières années, il a été très difficile de maintenir la synchronisation de mes sites mobiles et de bureau, je suis donc heureux d'avoir maintenant un seul site unifié sur toutes les plateformes.

Le principal inconvénient de devenir réactif était que je devais tester en profondeur le site sur 3 plates - formes complètement différentes , ordinateur de bureau, tablette et mobile. Et au sein de chaque plate-forme, il fallait gérer plusieurs versions de navigateur et résolutions d'écran.

Par exemple, j'ai dû tester IE 8, 9, 10 et 11 pour les machines Windows. J'ai dû tester Safari 6,7 et 8 pour Mac.

En fin de compte, j'ai parcouru mon compte Google Analytics pour effectuer des tests d'utilisabilité pour chaque navigateur utilisé sur mon site au cours de la dernière année à l'aide d'un outil appelé Browser Stack.

Inutile de dire que ce processus était nul et était ma partie la moins préférée de la refonte :(

Quoi qu'il en soit, voici quelques points saillants concernant le nouveau design mobile. La plupart de ces éléments de campagne sont assez standard, je ne vais donc pas vous ennuyer avec trop de détails.

Sur tablette et mobile, j'ai modifié le menu pour le réduire en un seul menu déroulant.

Sur la base de mon précédent site mobile, j'ai découvert que tout le monde a tendance à aller directement à la barre de recherche. Je me suis donc assuré d'inclure la barre de recherche au premier plan sur chaque page du site mobile.

Parce que l'espace de l'écran est beaucoup plus petit sur un téléphone, j'ai supprimé certains éléments «non essentiels» de la page pour des tailles d'écran plus petites.

Changements sur Pinterest

Le dernier changement que j'ai apporté a été de complètement réorganiser mes pages de contenu. Comme je l'ai mentionné à plusieurs reprises dans le passé, j'utilise nos pages d'art et d'artisanat pour diriger les gens vers notre boutique en ligne. Et Pinterest est une grande source de trafic pour ces pages.

En conséquence, j'ai complètement refait la plupart des images d'artisanat et j'ai créé des versions spéciales hautes et maigres juste pour Pinterest . J'ai également fait de nouvelles images pour nos photos de produits.

Par exemple, au lieu d'utiliser une image rectangulaire pour Pinterest lorsque vous cliquez sur le bouton « épingler », vous obtenez maintenant une version haute et maigre qui est haute résolution.

Conclusion

Dans l'ensemble, 7 semaines et 1840 $ est un assez bon investissement pour les gains que je connais actuellement. Mon principal problème en ce moment est que j'ai trop de projets en cours simultanément et pas assez de temps pour travailler sur chacun.

Mais voici le truc…

Même si mon taux de conversion était bon auparavant, l'augmentation nette des ventes due à un taux de conversion encore meilleur l'emportera probablement sur les autres efforts de création de trafic que j'avais prévu de mettre en œuvre cette année.

Et s'il y a une leçon à tirer ici, c'est que l'augmentation du taux de conversion de votre site augmentera les ventes de toutes vos autres sources de trafic .

La base de votre entreprise de commerce électronique commence par votre plate - forme et il est important d'avoir tous vos canards en place AVANT de vous concentrer sur la création de trafic.