Refonte de ThemeIsle: voici comment cela s’est passé et combien cela a coûté

Refonte du thème


Je déteste être un buzzkill, mais je ne suis pas un fan des remaniements. Je ressens de l’excitation à l’idée de changer les choses et de rafraîchir votre site tous les deux ans, et je comprends pourquoi tant de gens aiment se débrouiller, mais ce n’est tout simplement pas moi.

Mon état d’esprit a toujours été que le design doit être "assez bien," et que c’est quelque chose qui ne fera pas une énorme différence dans le grand schéma des choses.

Mais cela dit, ThemeIsle était attendu depuis longtemps pour un changement. Même moi, je pouvais voir que les choses n’étaient plus prêtes pour 2019. Donc, quand la décision a été prise de faire bouger les choses, je me suis assuré de documenter le processus afin que nous puissions apprendre autant que possible de la transition.

Maintenant que le le nouveau design ThemeIsle a été lancé revenons sur le design précédent, les décisions prises, les objectifs fixés pour le nouveau design et comment tout s’est déroulé.

Raccourcis:

  • �� Réflexions sur l’ancien design
  • �� Le nouveau design arrive
  • �� Nouvelle structure de site Web
  • �� Meilleures pages de destination et mobiles

La vieille conception ThemeIsle et ses problèmes ��

1. Les problèmes de la conception elle-même

Honnêtement, je n’ai jamais vu la conception originale de ThemeIsle aussi mauvaise. Je veux dire, je savais que ce n’était pas génial (j’ai des yeux, après tout), mais je ne pensais pas que c’était un problème qui pouvait affecter notre marque ou avoir un impact négatif sur les ventes..

De plus, cela fait un certain temps depuis le lancement du site, et au début, la conception était à peu près à la hauteur de ce qui était ailleurs.

Cependant, au fil des ans, nous avons commencé à faire beaucoup de tests A / B, d’autres soi-disant améliorations, divers ajustements SEO, etc., et comme il n’y avait pas de référence ou de contrôle de conception avant tout, le site a perdu sa cohérence. Par exemple, nous avions cette page normale pour notre thème ShopIsle, et cette page assez personnalisée pour RokoPhoto:

shopisle vs rokophoto

En fin de compte, étant donné que la vente aux designers est un domaine dans lequel nous voulons nous développer, je me suis rendu compte qu’un design plus raffiné pourrait booster un peu notre marque et générer plus de buzz..

C’était ma principale raison derrière la refonte du site.

2. La structure du site Web et le modèle commercial

C’était l’une des choses qui me dérangeait le plus. Lorsque nous avons commencé et créé le site Web, il devait être un club à thème. Nous avions 10 à 20 thèmes et voulions les vendre sous forme de package. Assez simple.

Nous avions également un forum d’assistance à l’époque, et après avoir lancé le site principal, nous sommes tombés sur un plugin qui avait besoin d’une nouvelle maison. C’était une bonne affaire, nous l’avons donc intégré et ajouté à l’offre principale. Cela n’avait pas beaucoup de sens de l’avoir là dans le paquet de thèmes, mais c’était le mieux que nous pensions pouvoir faire à l’époque. ��‍♂️

Au cours des cinq dernières années, le marché a changé et nous avons compris que nous ne voulons plus avoir à construire et à maintenir 20 thèmes différents. Ce n’est pas non plus ce à quoi on s’attend. Nous sommes à l’ère de "thèmes phares" – où un magasin propose un thème principal ou seulement quelques-uns d’entre eux, puis des mises à niveau supplémentaires ou des packages de conception.

Nous avons également décidé de suivre une voie similaire et de travailler sur seulement deux ou trois thèmes; idem pour nos plugins.

Nous avons également appris que les marques de produits individuelles sont plus puissantes et ont plus de potentiel que "principales marques du site," il est donc plus logique de les souligner. Pensez le thème X vs Themeco.

Un autre élément contributif est la Blog ThemeIsle. Il a beaucoup augmenté au cours des cinq dernières années, et il nous a permis de nous assurer une position sur le marché que nous ne pensions pas possible lorsque nous avons commencé.

3. Notre dette technique

Deux choses dont je veux parler ici:

a) Vitesse du site Web

L’ancien site avait beaucoup de choses et de technologies héritées en place. Nous avons commencé par vendre nos produits directement via le site, en utilisant notre système fait main.

Il y a eu de nombreuses itérations du moteur du site, ce qui s’est traduit par d’innombrables champs ACF différents qui sont devenus difficiles à gérer au fil du temps. Nous avons également organisé un forum, hébergé un programme d’affiliation, hébergé les documents et probablement un certain nombre d’autres choses..

Dans l’ensemble, la structure n’était pas très efficace, ce qui a entraîné des performances assez médiocres.

En passant, nous sommes passés à FastSpring depuis, et nous ne gérons plus les ventes par nous-mêmes. Bien que nous nous soyons débarrassés de certains des autres systèmes de la même manière, une grande partie était toujours là.

b) Structure du panier

En raison de la nature de l’entreprise – avec plusieurs produits et avec des marques individuelles qui peuvent croître plus que la marque de la société mère, je me suis rendu compte qu’il était temps de diviser la configuration technique réelle de la façon dont les choses sont.

Plus précisément, il est préférable de séparer les données client de la partie front-end (les listes de thèmes ainsi que les auteurs et leur contenu ainsi que tous les efforts de marketing). De cette façon, la vitesse du site Web ne sera pas affectée par des plugins comme EDD ou tout ce qui se passe en arrière-plan pour faire fonctionner l’entreprise..

L’équipe marketing aurait également plus de contrôle sur le site, et nous serions en mesure d’établir des sites / marques distincts pour les produits tout en conservant un espace client unifié sur store.themeisle.com.

4. Pages de destination et mobile

Lorsque nous avons lancé le site d’origine, le mobile n’était pas vraiment une chose. Plus précisément dans notre créneau, où presque personne n’achetait de thèmes sur son téléphone. Même en ce moment, nous avons encore très peu de clients mobiles.

Cependant, le mobile a gagné en importance et la tendance devrait se poursuivre. Après tout, Google utilise maintenant son robot d’exploration mobile sur celui du bureau.

Pour faire court, nous avons décidé de créer des pages de destination personnalisées pour nos meilleurs produits et de travailler à améliorer les conversions sur ces derniers. Le mobile est essentiel ici, car nous avons non seulement décidé de rendre les pages adaptées aux mobiles, mais également compatibles avec AMP..

Le nouveau design ThemeIsle arrive ��

D’accord, alors avec la mise en scène et mon raisonnement expliqué, voyons maintenant comment tout cela s’est déroulé.

1. Design et esthétique

Vous pouvez en juger par vous-même, mais pour moi, cela a été un succès absolu!

Voici l’ancien design:

Thème: Ancien design

Et voici le nouveau:

ThèmeIsle nouveau design

Le site Web semble beaucoup plus cohérent et agréable à l’œil. John Fraskos de AnalogWP conçu le design. João Santos, qui travaille habituellement pour nous sur des bandes dessinées, a créé des illustrations personnalisées. et enfin, Catalin Vasile, le concepteur original de ThemeIsle, a travaillé sur le nouveau logo.

À elle seule, cette partie a fini par coûter entre 10 000 et 15 000 $. Bien que la conception elle-même soit presque impossible de suivre le retour sur investissement, je pense que cela vaut l’investissement. Franchement, considérant qu’il nous a fallu cinq ans avant de décider de refaire le site, le coût ne représente que moins de 0,5% des revenus. Donc, si cela entraîne un quelconque avantage, cela rendra le projet en vaut la peine!

2. Nouvelle structure du site Web

L’introduction d’une nouvelle structure a un peu augmenté la complexité, mais elle a également entraîné une augmentation du trafic vers nos meilleurs produits, ce qui est toujours une bonne chose. À la baisse, le trafic vers nos catégories thématiques a diminué. Mais ça va.

L’essentiel ici est que nous ne voulons pas que ThemeIsle soit un "place des thèmes," mais être connu comme le "créateurs de Neve et Hestia."

Pour ce faire, nous avons décidé de présenter ces produits sur la page d’accueil, la page des thèmes et de supprimer complètement la page de tarification générique (cela n’avait aucun sens). Nous avons également décidé de créer des logos individuels pour les produits, puis des pages de destination originales pour les meilleurs produits (avec leur propre marque et tout). De plus, nous avons fait quelques ajustements ici et là pour souligner les marques individuelles.

hestia avant et après

3. Dette technique résolue

Encore une fois, deux choses:

a) Vitesse du site Web

Nos temps de chargement sont désormais 50% plus rapides. Mais nous avons eu des ennuis dans le processus.

Afin de nous forcer à utiliser nos propres produits et à utiliser le nouvel éditeur de blocs (que notre développeur ne connaissait pas), nous avons complètement gâché l’expérience de création de site Web..

Gutenberg n’est pas encore là, ou du moins la façon dont nous l’utilisons n’aide pas. Ce n’est toujours pas le meilleur choix pour les pages de destination, et si vous voulez de la vitesse, vous feriez mieux de vous fier à quelque chose comme ACF avec des structures faites à la main. Si vous préférez la flexibilité avant tout, vous pouvez opter pour Beaver Builder ou Elementor, comme nous l’avons fait pour la page d’accueil.

Quand il s’agit de créer des sites Web avec des performances à l’esprit, la tâche n’est toujours pas facile. Vous ne pouvez pas vraiment dépendre des plugins pour résoudre tous les problèmes pour vous, et vous devez faire beaucoup de choses par vous-même. Voici un commentaire de Cosmin Serbanescu, le développeur principal du projet de refonte:

cosmin

Ce fut un réel plaisir de travailler sur la refonte du site Web ThemeIsle et c’est certainement l’un des projets les plus complexes et les plus difficiles sur lesquels j’ai jamais travaillé.

La partie la plus délicate était probablement qu’en raison de l’approche orientée vers la vitesse que nous avions depuis le début, j’ai dû réfléchir au moins deux fois avant de mettre en œuvre une fonctionnalité ou une section de site Web, sans plugins tiers ni bibliothèques inutiles et en gardant le code aussi propre que possible.

b) Nouvelle structure de panier

Cette partie s’est plutôt bien déroulée, car nous avons maintenant tout configuré sur store.themeisle.com.

Bien sûr, comme d’habitude avec ces choses, nous avons rencontré des problèmes le jour du lancement, mais nous avons réussi à le comprendre juste à temps.

Dans cette configuration, comme je l’ai mentionné précédemment, toutes les données client / utilisateur sont stockées dans une instance distincte du front-end, qui contient les listes de thèmes, le blog, les pages marketing.

4. De meilleures pages de destination et mobiles

Dans le cadre de la refonte, nous avons créé de nouvelles pages de destination pour tous nos produits clés comme Neve, Hestia, ShopIsle, Zelle, Feedzy, Visualiseur, et Examen des produits WP.

De tous, la page de destination pour Hestia – où nous mettons la plupart de nos efforts – semble obtenir les meilleurs résultats. Le taux de conversion est actuellement d’environ 10% supérieur. Nous examinons actuellement environ un mois de données, ce qui me rend optimiste.

hestia nouveau

Dans l’ensemble, pour l’ensemble du site, il semble que nous ayons perdu des ventes. Mais il y a eu tellement de changements, y compris l’élimination de plus de 10 produits (qui ont tous contribué à un petit nombre de ventes) qu’il est difficile d’attribuer quoi que ce soit au design lui-même.

Cela se rapporte à un autre objectif que je me suis fixé pour cette année. Même si nous ne conservons que 90% des revenus antérieurs aux modifications, mais en même temps que nous gérons une entreprise 50% plus simple, cela en vaudra la peine. Par entreprise plus simple, je veux dire moins de produits, ce qui se traduit par moins de pages à gérer, moins de choses à documenter et à prendre en charge, et donc plus de temps pour améliorer les produits existants.

L’optimisation du nouveau site pour mobile s’est globalement bien passée, mais pas à 100% sans problème. Choisir Gutenberg comme base sur laquelle nous avons construit les nouvelles pages n’a pas été facile et n’a finalement pas beaucoup amélioré nos performances mobiles.

Nous n’avons pas réussi à obtenir l’implémentation en dessous de la marque de 50 Ko pour les pages de destination des produits, nous n’avons donc pas pu les diffuser dans AMP (il existe une restriction sur la taille du CSS pour AMP). Nous avons cependant AMP sur les pages de catégorie.

Dans l’ensemble, il a été difficile de s’assurer que la conception puisse fonctionner avec Gutenberg, Elementor et d’autres constructeurs. Et il ne s’agit pas seulement de s’assurer que ces constructeurs peuvent produire leur structure, mais également de s’assurer que le résultat à l’écran est ce que vous attendez. Après tout, nous voulons pouvoir modifier les pages plus tard, et ne pas avoir à refaire des choses au niveau du code pour le rendre possible. C’est pourquoi la conception doit travailler avec les constructeurs.

Voici ce que le concepteur principal, John Fraskos, a dit à propos de ce défi:

fraskos

Le plus grand défi était de créer une conception cohérente et évolutive qui serait "constructeur-agnostique" car certaines parties du projet sont exécutées à l’aide de différentes technologies de création de mise en page. Nous avons réussi à affiner et à maintenir un langage visuel de base pour tous les composants, qui serait facile à reproduire avec n’importe quel constructeur de mise en page, nous donnant une tranquillité d’esprit à l’épreuve du temps.

Les pages sont beaucoup plus faciles à naviguer sur mobile maintenant, et ce n’est pas par pur hasard. Nous avons déployé beaucoup d’efforts pour concevoir l’expérience mobile et réfléchir à ce qui est important pour les visiteurs mobiles par rapport aux visiteurs sur ordinateur. Allez-y, consultez certaines de nos pages de produits sur mobile et sur ordinateur et voyez ce qui est différent (celui-là, par exemple).

L’ensemble de l’implémentation, ainsi que le travail de marketing autour de la copie et des textes, des pages de destination et d’autres campagnes ont pris beaucoup de temps; 1500 heures de travail, pour être exact. Nous en avons fait l’un des objectifs de faire un suivi du temps sérieux et de faire le bilan de chaque minute passée sur le projet.

Si vous le multipliez par le taux horaire que vous souhaitez calculer, cela nous place probablement entre 50 000 $ et 100 000 $. Ou, en d’autres termes, si nous voulions créer un site similaire pour un tiers, nous devions facturer plus de 100 000 $ pour le rendre rentable.

Dans l’ensemble, le plus grand défi pour nous a été le fait qu’il s’agissait d’un projet unique et unique. Ce que je veux dire, c’est que nous ne construisons généralement pas de sites de commerce électronique, nous n’avons donc pas de processus en place, et l’équipe et leurs compétences ne sont pas structurées pour les projets de création de sites Web..

Nous avons eu du mal à organiser notre travail et nous ne savions pas comment diriger ou structurer tout cela. Nous n’avions pas non plus (nous n’avons toujours pas) d’équipe dédiée qui s’occuperait de tous les projets et sites frontaux. Construire des thèmes et des plugins pour les utilisateurs est juste un genre de chose complètement différent. En fin de compte, grâce à John Fraskos, qui nous a guidés sur la bonne voie, nous avons décidé d’utiliser Sketch pour la conception d’interface utilisateur, Invision pour la collaboration et les commentaires de conception, et Slack pour les discussions quotidiennes. Et nous avons traversé beaucoup d’itérations, donc chacun de ces outils était certainement nécessaire.

itérations de conception

Ainsi, la question principale serait probablement; dois-je considérer le projet comme un succès?

Ça dépend.

Nous ne constatons aucune augmentation à court terme des ventes résultant de la refonte. Nous avons encore des problèmes avec l’expérience d’édition et le peaufinage du site. Le projet aurait également pu être plus fluide. Cependant, à la fin de la journée, je ne vois toujours pas un meilleur investissement qui nous préparerait à des résultats à long terme.

L’année prochaine dira si le projet est un succès ou non. Je suis curieux de voir comment les choses se passent.

De plus, avec le Lancement de Neve Pro et notre parrainage WCEU, cela marque le début d’une sorte de nouvelle ère pour nous. Une ère pour essayer de devenir une entreprise plus établie que juste un magasin avec quelques thèmes.

Je n’étais pas non plus le seul à diriger l’émission ici. Ce fut un bon effort d’équipe et un changement majeur dans notre direction commerciale – se rapprocher du client et répondre davantage à ses besoins en se concentrant sur des produits moins nombreux et de meilleure qualité..

Merci encore à tous ceux qui ont participé à cette refonte!

N’oubliez pas d’aller vérifier le nouveau ThemeIsle!

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map