Refonte de site

Refaire son site e-commerce n’est pas toujours une chose aisée. Les projets de migrations de CMS ou de changement de charte graphique ou d’UX peuvent fortement impacter le business de votre boutique et sont des sujets hautement stratégiques. Comment faire pour optimiser le projet de refonte de site marchand et en faire un succès ? 

Si vous cherchez un guide ou des informations pour effectuer la migration ou la refonte de votre site e-commerce alors lisez notre guide complet et gratuit ci-dessous spécialement dédié à ce sujet !

Pourquoi un projet de refonte est souvent plus compliqué ? 

La refonte d’un site e-commerce est un exercice difficile pour de nombreux marchands et agences. Ce sont généralement des projets beaucoup plus compliqués que de la création “pure “ de site e-commerce car il faut prendre en compte l’existant. Mais alors combien la réussir ? Quels éléments peuvent faire le succès d’une refonte de site et quels sont les pièges à éviter ? voyons ensemble dans ce guide.

Pourquoi refondre un site marchand ? 

Avant de s’engager dans un projet de migration technique ou de refonte graphique, il faut bien analyser l'intérêt réel du projet. 

C’est un projet qui va demander du temps, du budget et si il n’est pas indispensable alors autant investir cet argent ailleurs.

Mais une refonte de site web, c’est aussi un enjeu majeur pour assurer la pérennité et le développement de votre activité ! 

Voyons ensemble les raisons communes de changer de site e-commerce pour un nouveau projet.

Refondre un site pour changer de technologie

C’est peut être le cas le plus commun : changer de technologie e-commerce (de cms e-commerce) pour , par exemple, passer de Prestashop à Shopify, est le cas qui se présente le plus. Les raisons sont nombreuses derrière mais l'obsolescence des solutions, généralement open source, est un argument de poids.

Personne n'imaginerait lancer un site e-commerce sur OS Commerce ou Magento 1.9 en 2022. Pourquoi ? Car ils ne tiennent pas techniquement la route, ne bénéficient plus de mises à jour de sécurité et ne sont globalement pas au niveau de ce qu’il est attendu en termes de fonctionnalité pour un site e-commerce aujourd’hui.

L'obsolescence technique est donc une des raisons tout à fait valable pour organiser la refonte d’un site e-commerce. 

Si vos coûts de maintenance s’envolent, qu’il devient de plus en plus compliqué de faire évoluer le site ou tout simplement que l’éditeur de ne propose même plus de mise à jour de maintenance et de sécurité, alors il est largement de temps de changer de solution e-commerce. 

Refaire son site pour changer de design

Changer le design d’un site peut arriver plus régulièrement qu’on ne le pense : évolution de l’image de marque, améliorations ergonomiques, design daté, nouveaux objectifs commerciaux etc…

Un site, e-commerce ou non, représente l’image de marque de l’entreprise. En quelques années , c’est même devenu la vitrine principale de toutes les entreprises. Il est donc normal que le design suive les évolutions de l’entreprise et reflète fidèlement son image.

La refonte graphique est donc très souvent un passage obligé tous les deux ou trois ans pour moderniser et actualiser l’image du site.

Une refonte de site pour ajouter des fonctionnalités

Parfois, il n’y a pas d'autres choix que de refaire une migration ou une refonte pour ajouter des fonctionnalités importantes. Certaines versions des cms deviennent obsolètes, ne sont plus supportées par des plugins ou ne sont même pas disponibles sur votre plateforme actuelle. 

Même si le site continue de marcher correctement et qu’il n’est pas encore obsolète, la migration peut s'avérer nécessaire pour continuer à investir et à développer le site.

Un réorganisation complète pour plus d’efficacité 

Une autre bonne raison de migrer ou de refaire son site est de réorganiser les éléments accumulés années après années.

Faire évoluer son site est une bonne chose mais au bout de quelques années, cela peut donner un empilement de fonctions les unes sur les autres qui à perdu du sens. 

Réorganiser tout cela avec un travail de fond sur l’ergonomie et l’UX est essentiel.

Et cela tombe bien car ce sont parmi les deux points à travailler le plus lors de la refonte !

Mais au fait, c'est quoi une refonte de site ?

Avant de continuer à parler de refonte dans tous les sens, mettons nous d’accord sur le vocabulaire : une refonte de site ici est envisagée au sens large : changement de plateforme technique , changement de design (de thème), changement d’identité et/ ou de business modèle etc…

Bref,on remet tout à plat ! 

On ne parle donc pas d’une phase de “run” ou l’on ajoute des fonctionnalités au fur et à mesure sur le site mais plutôt d’une “remise à zéro” des besoins pour partir sur une nouvelle base saine.

Une refonte est souvent initiée lorsque la dette technique de la plateforme e-commerce est trop importante ou quand l’ux ne va plus. 

Une refonte de site c’est un peu un déménagement. On garde de nombreuses choses déjà existantes dans un nouveau contenant mais on en profite aussi pour planifier l’avenir et préparer la croissance future.

Quelles sont les différentes étapes pour faire une refonte de site ?

La roadmap de refonte de site peut évidemment varier d’un projet à l’autre mais globalement on retrouve toujour plus ou moins la même scénario. N’oubliez pas que chacune de ces taches peut etre réalisé avec l’aide d’un consultant ou d’une agence si besoin.

1)Se rendre compte du problème

Un jour on se dit que le site ne correspond plus à ses besoins, un collaborateur se plaint un peu trop de la perte de temps causé par des processus archaïque, on reçoit un mail de la plateforme e-commerce pour dire qu’il ne sera plus mis à jour, votre agence fait faillite, le big boss veut changer le site …

Les raisons sont très variées pour se rendre compte que le site ne convient plus et qu’il est temps d’engager une refonte. Il n’est, à mon avis, pas nécessaire de juger la raison de la refonte car une fois l’idée en place au sein de l’entreprise, on a tendance à voir de plus en plus les défauts du site actuel. 

2) Analyser ses besoins 

La phase d’analyse des besoins se calque idéalement sur l’existant, voir plus bas, pour garder ce qui fonctionne et apporter une solution aux problèmes non résolus aujourd’hui. 

Nouvelles connexions ERP, WMS, PIM, Compta, nouvelle ergonomie plus moderne, nouvelle charte graphique, nouvelles gammes de produits ou segmentation, amélioration de la productivité de votre site e-commerce… Tout est bon à ajouter à cette étape. Tout ne sera peut être pas réalisable, cela dépend souvent du budget, mais savoir analyser ce qui vous manque pour progresser sera un vrai plus pour la suite. Bien sûr cette étape peut se faire avec un consultant e-commerce externe, en freelance ou en agence de conseil pour ne rien laisser au hasard et avoir l’avis et les conseils d’un professionnel qui pourra par exemple réaliser un audit e-commerce.

3) Créer un cahier des charges / backlog

Une fois l’audit initial réalisé et les besoins définis, il va falloir écrire le cahier des charges. Alors il y a cahier des charges et cahier des charges. Chez Pikka, on reçoit parfois des documents très légers , une ou deux pages) et parfois des listes de centaines de fonctionnalités sous Excel sans aucun contexte. On pourrait écrire un article complet sur le cahier des charges mais c’est un exercice compliqué pour beaucoup de marchands. 

L'essentiel est, à mon sens, de préciser le contexte du projet, les raisons de la migration ou de la refonte et les évolutions attendues.

Une évolution en cahier des charges techniques peut être nécessaire dans certains cas comme un ecommerce headless ou connecté à de nombreux systèmes externes du système d’information de l’entreprise.

4) Analyser les solutions du marché

Alors oui, chez Pikka, on adore Shopify mais de votre côté, il faut peut-être évaluer plusieurs solutions ? Le sur mesure, le headless, l’open source, le Saas, une combinaison de plusieurs éléments … Il y a peut être matière à trouver des solutions à vos problèmes e-commerce en allant regarder un peu ce qui se fait sur le marché.

Et c’est clairement l’objectif de ce point lors de la refonte : actualiser vos connaissances du marché des cms en focntio nde vos besoins. Les logiciels évoluent rapidement et certains peuvent proposer des solutions inovantes qui vous aideront dans vos taches quotidienne.

Cette étape est loin d'être indispensable lors de la refonte mais si vous connectez uniquement le même type d’agence, vous risquez de ne pas pouvoir élargir les possibilités de votre site et de retrouver les mêmes soucis. 

Une refonte de site ecommerce, c’est une des rares occasions de changer de CMS E-commerce.

5) Créer les nouveaux parcours clients 

Bien sûr, toutes ces étapes de refonte dépendent de la taille de votre projet. Plus vous allez avoir un gros projet et plus chaque étape sera détaillée. Cella là en l'occurrence se réalise très souvent en collaboration avec une agence UX ou une agence de design maîtrisant l’ergonomie. Attention, on ne parle pas de charte graphique mais de parcours utilisateurs. 

Vous pouvez en avoir un seul : chaque utilisateur achète un ou plusieurs produits. Mais vous pouvez aussi en avoir plusieurs : certains utilisateurs bénéficient de conditions particulières ou de mode de paiement particulier. On peut citer par exemple  :

• récupération d’un cadeau
• parcours B2B avec des modes de paiements différents
• des abonnements et des produits achetés à l’unité

Bien entendu, une étude préalable des parcours clients existants sur votre site est indispensable pour conserver ceux qui fonctionnent déjà !

6)Créer le design 

Une fois les nouveaux  parcours clients créés on peut enfin se concentrer sur le design. Là encore on peut faire appel à un directeur artistique freelance, une agence de design, une agence créa ou à des directeurs artistiques en interne. 

Pour un projet de refont, le mieux reste quand même de faire appel à des compétences pointues.

Le design ce n’est pas d'appliquer quelques couleurs les unes à côté des autres pour “faire joli”. 

l’idée est de réaliser des maquettes pour chaque page ou template . A minima on va souvent retrouver  :

• La page d'accueil
• La page collections / Catégories
• La page produit 
• Le panier
• Et le tunnel de commande

On peut avoir en plus des maquettes de la page FAQ, Qui sommes nous, marque, espace pro, espace client … Bref, toutes les pages statiques. Il est rarement nécessaire de créer des maquettes pour les pages comme les pages mentions légales ou autre. 

7) Intégrer le design ( création des templates)

Une fois le design validé, on peut passer à l’intégration technique. L’intégration, c’est tout simplement une étape cruciale de la refonte et pourtant mal maîtrisée par de nombreuses agences et par les marchands. 

L’intégration technique, c’est lorsque le développeur front-end va créer le site d’un point de vue technique. Il va transformer les maquettes Figma ou Adobe XD en code Html Css et JS . Voir même en Liquid dans le cas de Shopify. 

C’est une étape importante, surtout dans les gros projets de refonte, ou même de création de site Shopify, car l’intégration peut être longue et minutieuse. Il faut bien évidemment avoir un site e-commerce responsive à la fin et donc que le design fonctionne aussi bien sur mobile que sur ordinateur. 

C’est aussi à cette étape que l’on peut identifier et corriger les éventuelles erreurs d’ergonomie non visibles aux étapes précédentes. 

Par exemple des points d'opacité des bulles d'informations ou des boutons d’actions moins visibles que prévu en condition réelle.

Bref, c’est la confrontation du rêve, le design et l’ergonomie, à la réalité technique : device et navigateurs. 

Car oui, malgré leur apparente évolution, les navigateurs et devices ne sont pas du tout tous au même niveau pour gérer des pages web et l'intégrateur doit le prendre en compte pour obtenir les meilleurs résultats.

8) Coder les nouvelles fonctionnalités 

En plus du de la création du thème, il y a souvent une phase de développement plus orienté “back office” et fonctionnel. Cela peut être via l’ajout d'applications déjà existantes dans un thème store ou via le développement “pur” code ou nocode de fonctionnalités complémentaires. 

Cette phase est plus ou moins longue en fonction de vos besoins. Plus on peut utiliser de code ou d’applications déjà existantes et plus le budget et le temps de projet seront réduits d’autant. C’est au chef de projet et à vous , le client, de voir quelle combinaison correspond le mieux 

9) Importer les données de l’ancien site 

Une fois le design implémenté, une fois les développements spécifiques réalisés, il est temps d’importer les données pour réaliser la migration du site et conserver autant de choses que possible.

Là encore, cette étape varie beaucoup d’un projet à l’autre car la quantité de données influence les choses mais aussi la solution e-commerce de départ et d’arrivée. 

Chez Pikka nous réalisons de nombreuses migrations Magento vers Shopify ou Prestashop vers Shopify, dans les deux cas, nous pouvons récupérer l’ensemble des commandes , des clients et des produits . Parfois, pour certaines solutions de ecommerce “exotiques” ou tout simplement moins diffusées, cela peut être plus compliqué. 

Dans le cas où des données sont stockées en dehors du cms, par exemple les données de ventes dans un ERP, il est nécessaire de réaliser la liaison informatique entre l’ERP et le nouveau CMS E-commerce mais l’import n’est pas requis puisque les données ne changent pas de place.

10) La formation 

Nous sommes presque à la fin du projet de refonte de site ! Il est temps de former les équipes, ou vous même si vous êtes tout seul. Souvent sous-estimé, le sujet de la formation est pourtant crucial pour garder une bonne vélocité dans la production et prendre un bon départ, surtout dans le cadre d’une migration de CMS. 

Dans le cas d’une “simple” refonte, il y a tout de même souvent une évolution des fonctionnalités de chaque CMS, par exemple, migrer d’un Prestashop 1.4 vers un Prestashop 1.7 peut nécessiter une formation. Pourquoi ? Car de mauvaises habitudes ont peut etre été prises par les opérationnels. 

Il n’est pas rare de trouver des équipes ayant trouvé une solution par elle-même, faute d'accompagnement adapté . Une formation pour repartir sur de bonnes bases et toujours un vrai plus pour profiter au mieux de son nouveau site marchand .

11) Préparer le SEO (en cas de changement de CMS) 

Si la refonte de site correspond également à une migration vers un nouveau CMS E-commerce, il est nécessaire de prévoir une étape en plus : La migration des urls pour conserver votre SEO.

En effet, chaque logiciel e-commerce gère les urls de sa propre façon. Certains ne jurent que par l’urls rewriting, d’autres identifient le produit via un numéro dans l’url , d’autres ont un système de collections / sous collections dans l’url et certains, comme Shopify, ne propose qu’un seul format possible .

Le but des redirections, 301, est de faire pointer les anciennes adresses vers les nouvelles. Plus votre site à de page, plus cette étape va être longue mais nécessaire. 

Si cette étape n’est pas roposée par votre agence web lors de la réalisation du devis, vérifiez que cette prestation sera prise en charge par votre agence SEO. 

Si personne ne s’en occupe, ce sera une catastrophe pour le référencement naturel de votre site. 

12) La bascule du site 

Une fois les équipes opérationnelles et le site prêt, il est temps de faire la bascule. C’est là ou l’on va passer de l’ancien site au nouveau. La refonte va être poussée en production, en live, pour accueillir tout votre trafic. 

Selon la stratégie et la solution choisie, cela peut représenter plus ou moins de problèmes ou de stress. Dans le cas d’une migration vers Shopify, si les urls ont été bien redirigées, il n’y a pas de problème de montée en charge ou de limite de nombre de visiteurs. 

Dans le cadre d’une migration vers un outil open source comme Magento ou Prestashop, il peut être nécessaire de prévoir des stress tests pour vos serveurs pour vérifier s' ils tiennent la charge avant la mise en production. 

Que vérifier avant de faire une refonte E-commerce ? 

Donc une refonte ca ne s’improvise pas. L’idée est de garder ce qui est important, ou de le transposer et de changer ce qui doit l'être tout en étant adapté à votre budget. Analyser ce qui marche aujourd’hui et qui fait le succès de votre site est donc primordial pour assurer le succès du projet de refonte.

Analyser ce qui marche bien sur votre site aujourd’hui

Le plus important est donc de noter tout ce qui fonctionne bien aujourd’hui et qui ne nécessite pas de changement . Cela peut passer par un audit UX complet, un audit analytics, des sondages auprès de clients, des cartes de chaleur, heatmap comme avec crazy egg … votre propre point de vue de responsable e-commerce … bref, les moyens sont nombreux mais il est nécessaire de collecter les points forts de votre site pour ne pas obtenir un site moins performant lors de la refonte. 

A noter qu’il est important également de faire ça en interne. Un site marchand est certes un outil pour les clients pour passer commande mais c’est aussi un outil industriel de production interne (factures, comptabilité, logistique etc…) On ne compte plus les migrations et changements de plateforme e-commerce qui ont livré des sites plus beaux mais moins connectés au sein de l’entreprise. 

Si vous devez embaucher 50% de personnel en plus pour garder le même chiffre d’affaires, je doute qu’on puisse appeler une migration un succès. Le but est aussi d’améliorer la productivité interne lors de la migration . Analyser les flux initiaux pré refonte est donc fondamental .

Ces éléments de contexte ont toute leur place dans votre cahier des charges pour expliquer le contexte initial et donner des informations pertinentes à votre future agence.

Vous voilà opérationnel pour préparer votre refonte de site en toute sécurité et réaliser une migration ou une évolution pour profiter de nouvelles fonctionnalités et préparer le futur de votre site e-commerce !