Comment effectuer la refonte de son (large) site e-commerce?

 

 

Quand la volonté est de faire peau neuve!

Voilà maintenant un peu plus d’une année que l’on m’a confié la refonte d’un site e-commerce. Et pas n’importe quelle plateforme, un large site e-commerce autant du point de vue inventaire et nombre de visiteurs qu’en termes de fonctionnalités et intégrations gérées par l’équipe opérationnelle. Il s’agit d’un grand milestone pour un site qui fonctionne bien depuis plus de 10 ans, il ne faut donc pas se tromper! On pourrait prendre le premier système open source qui nous tombe sous la main, le déployer et c’est parti! Mais ce n’est pas tout à fait cela car lorsqu’un site e-commerce fonctionne et qu’il est en place depuis quelques années, un bon nombre de règles métier se retrouvent dans notre code et il faut pouvoir les reporter sur le nouveau site. Vous pourrez trouver un glossaire des termes spécifiques utilisés en fin d’article.

Remodeler, oui. Mais avant?

Avant de procéder à la refonte de notre site e-commerce, nous avons dû consolider le site actuel. Cela consistait à supprimer les problèmes de sécurité et améliorer le processus général de développement, le tout à moindre frais. Il fallait garder en tête que nous allions passer à une nouvelle architecture tout en évitant les problèmes sur le site existant. Voici les étapes que nous avons suivies en amont de la refonte du site:

– Corriger tout d’abord les problèmes de sécurité qui concernent les mises à jour du langage de programmation PHP ainsi que du serveur web.

– Mettre en place une infrastructure sur le Cloud qui permet à l’application d’être déplacée dans un système de stockage en ligne et sécurisé.

– Mettre en place une intégration continue du code qui permet à une fonctionnalité codée, validée et testée d’être automatiquement mise en ligne.

Suite à ces ajustements, nous avons pu travailler sur la refonte du code du site e-commerce à proprement parler. Trois solutions se sont ainsi offertes à nous:

– Recommencer en partant de rien (from scratch), à l’exception des données du site e-commerce (clients, commandes, produits, etc…)

– Opter pour une solution déjà existante, un CMS avec différents templates pré-intégrés comme Magento ou Shopify.

– Construire le nouveau site en ajoutant de nouvelles fonctionnalités au fur et à mesure de la refonte, tout en laissant certaines briques en place. 

Dans notre cas, nous avons choisi la dernière option en préservant les éléments suivants : la base de données du site (les données qui forment la mémoire de notre site web), le serveur (le hardware, machine qui exécute le site) et le Back Office (la partie “admin” utilisée par les collaborateurs).

Refonte d’un site e-commerce : l’analyse

Pourquoi on change? 

Car on ne veut pas réitérer les mêmes erreurs que l’ancienne application ! Maintenir et faire évoluer la plateforme devenaient des tâches compliquées, par conséquent, il était nécessaire de donner du sang neuf à plusieurs niveaux. Il s’agissait aussi d’éliminer la dette technologique (problèmes de sécurité, ancienne version du langage de programmation et de la plateforme e-commerce,…), autrement dit, nos solutions technologiques étaient peu adaptées et plus assez agiles par rapport au fonctionnement de notre plateforme. Cela peut engendrer des surcoûts, davantage de problèmes ainsi que des failles de sécurité. Un refresh au niveau du design devenait également indispensable afin d’améliorer les aspects visuel et interactif de notre site web. Et surtout, passer sur un nouveau système permet au site e-commerce d’être aligné avec les objectifs globaux fixés par le groupe Audacia.

Qu’est-ce qu’on garde?

Dans un premier temps, nous gardons tout le système en place, ce qui nous permet de développer la base du futur site e-commerce. Ensuite, nous préservons la base de données, le serveur ainsi que le Back Office. Le but étant d’impacter le moins possible le site existant et de pouvoir poursuivre sans interruption l’activité e-commerce tout en développant le nouveau site en parallèle. Ce faisant, nous pouvons ainsi développer de nouveaux éléments séparément et les faire tester aux consommateurs sans interrompre le fonctionnement du site actuel. La migration est alors effectuée par étape de l’ancienne version vers la nouvelle.

Quelles technologies choisir?

React (node.js) : pour la partie Frontend et UI. L’interface utilisateur avec laquelle interagit le consommateur de l’e-commerce ou le collaborateur ayant accès au Back Office. Il s’agit d’un des frameworks les plus utilisés dans le développement web. Il est stable et dispose d’une grande communauté. De plus, l’équipe de développement d’Audacia ayant l’habitude de travailler avec cette technologie, la collaboration et le partage d’expériences sont possibles.

Express.js (node.js) : pour la partie backend. Celle qui traite les demandes reçues par l’interface utilisateur (navigation sur le site, ajout de nouveaux produits, commandes effectuées…). Ce framework est très rapide et dispose du même langage (JavaScript) entre la partie frontend et backend.

MySQL : pour le système de gestion de données de notre site e-commerce. Nous avons utilisé le système déjà en place afin d’éviter des coûts et un investissement en temps considérables. 

AWS (Amazon) : pour la partie Cloud/serveur, la machine (hardware) sur laquelle notre application fonctionne. Amazon Web Services est l’un des poids lourds au niveau du cloud computing, son prix et le nombre d’outils mis à disposition en sont ses principaux avantages.

Les axes à prendre en compte

Les audits effectués pour l’User Experience (UX) et l’User Interface (UI) aident beaucoup au développement informatique. Ils sont aux développeurs ce que sont les plans pour construire une maison à un constructeur. Le gros challenge est de fidéliser les nouveaux consommateurs sans pour autant perdre les clients habitués et de maintenir/améliorer le taux de conversion via une expérience et une interface utilisateur optimales. Afin de tester ces aspects, nous mettons en place un A/B Testing destiné à un petit pourcentage des utilisateurs de la plateforme.

Au niveau du contenu, le SEO/référencement est un aspect à ne pas négliger. En effectuant la refonte d’un site e-commerce, il est important de tenir compte du référencement global ainsi que des éléments SEO déjà en place sur le site actuel. Google étant le point d’entrée principal de notre site, l’une des étapes-clés consiste en l’établissement de nouvelles URLs dotées d’un bon référencement mais aussi en la redirection correcte des anciennes URLs vers les nouvelles pages.

La refonte d’un site e-commerce permet également l’ajout de nouvelles fonctionnalités (wishlist, check-out, etc…) sur la nouvelle plateforme. Ces éléments symbolisent en partie le renouveau de votre site e-commerce.

En fin de compte, il faut surtout s’assurer que la performance et les résultats généraux du site ne soient pas affectés. Ainsi, le temps de réponse, le revenu et la conversion sont des indicateurs qu’il faut surveiller de près.

Plus d’avantages que de risques ?

Procéder à la refonte d’un site e-commerce peut évidemment comporter plusieurs risques. En voici quelques-un :

– Le nouveau site peut impacter négativement le taux de conversion. En d’autres termes, est-ce que la nouvelle version va pousser les visiteurs à effectuer un achat?

– Les clients habitués peuvent, au début, être frustrés des changements opérés sur la plateforme

– À l’interne, les différents secteurs peuvent rencontrer des soucis de synchronisation. La logistique peut être impactée par des problèmes dans la transmission des commandes et le département marketing peut voir ses campagnes d’emails mal redirigées

– La performance générale du nouveau site e-commerce (rapidité, revenus, trafic, visites, etc.) peut être entravée

Mais effectuer la refonte d’un site e-commerce présente de nombreux avantages. Cette tâche permet entre autres de :

– Tester et intégrer de nouvelles fonctionnalités 

– Supprimer la dette technologique

– Moderniser l’architecture informatique

– Une meilleure maîtrise des environnements

– Plus de métriques sur la plateforme, et donc plus de données, dans le but de mesurer les indicateurs de performance et de permettre aux managers de prendre des décisions efficaces

– Entreprendre des changements évolutifs selon les besoins business/du manager

– La pérennisation du site sur le long terme, en tout cas pour les 5-7 ans

– L’ouverture de nouveaux marchés ou stores grâce à l’architecture créée

– La fluidification des processus (les retours des commandes, les emails marketing liés aux données du site, la gestion des stocks, etc)

– Les changements de code sont moins importants par rapport à l’ancien site

Comme vous pouvez le voir, les avantages sont plus nombreux que les risques. La refonte étant devenue une tâche indispensable au bon fonctionnement de notre site e-commerce, à sa pérennité et à son renouvellement, il s’agissait d’une étape cruciale mais nécessaire pour notre business. Maintenant, il faut pouvoir s’assurer d’entretenir, voire améliorer, le bon fonctionnement de la plateforme.

Et l’après-refonte ?

Suite à la refonte d’un site e-commerce, un suivi précis sera nécessaire afin de mesurer l’efficacité des opérations effectuées. Il s’agit en effet de mesurer le progrès, identifier les éventuels problèmes ou dysfonctionnements qui seraient intervenus et de mettre en place rapidement des actions correctives. Grâce à l’amélioration de certains processus de développement, l’ajout de nouvelles fonctionnalités et la gestion de correctifs seront très rapidement déployés. Le but d’un site e-commerce est de constamment évoluer par rapport au besoin et à la demande du marché.  

Mais le grand challenge reste de continuer à faire fonctionner son e-shop : il est nécessaire de maintenir voire augmenter le taux de conversion, garder les clients habituels tout en en acquérant de nouveaux et ne pas faire chuter le trafic et les revenus. En somme, la refonte ne doit en aucun cas entraver le bon fonctionnement d’un site e-commerce performant comme le nôtre.

Conclusion

La refonte d’un site e-commerce, processus très enrichissant pour une équipe de développement, englobe une multitude d’aspects différents et demande un important investissement en termes de temps. En ce qui concerne le choix des technologies, pas le droit à l’erreur! Les technologies choisies doivent être stables, disposer d’une grande communauté et fonctionner au plus vite. 

Effectuer la refonte d’un site e-commerce présente beaucoup d’avantages mais comporte également des risques qu’il faut connaître au préalable afin d’aborder au mieux les processus de développement et de refonte. Comme mentionné plus haut, le nerf de la guerre reste la conversion. Le but ultime étant de maintenir voire augmenter le taux de conversion de sa plateforme sans entraver sa performance et ses chiffres. Selon moi, la refonte générale des plateformes des entités Audacia est un challenge de taille et je suis certain que le groupe a fait un choix fort en suivant cette voie afin que toutes ses enseignes puissent franchir un palier. 

 

Backend : partie non visible des utilisateurs qui gère les requêtes effectuées sur le Front-End.

Back Office : partie “invisible” d’un site internet utilisé pour la conception, la gestion et l’administration.

Framework : un ensemble d’outils à disposition permettant de construire un logiciel avec des composants prédéfinis.

Front Office : partie ou interface visible par les utilisateurs d’un site internet.

Frontend : l’interface utilisateur avec laquelle les utilisateurs peuvent directement interagir sur un site internet.

Langage de programmation : langage informatique permettant à un humain de créer des programmes exécutés par un ordinateur.

UI : User Interface (l’interface utilisateur d’un site internet), concerne la conception d’une interface optimale et agréable via laquelle l’utilisateur entre en contact avec le site web. Cette partie est davantage centrée sur le côté graphique, visuel et créatif.

UX : User Experience (l’expérience utilisateur d’un site internet), concerne la conception d’une interface et des fonctionnalités qui répondent pleinement aux besoins en utilisabilité de chaque utilisateur.

---

---