Le Guide clé en main pour réussir la
refonte de votre site internet en 10 étapes

Votre site web c'est votre vitrine. Cette phrase peut paraître un peu bateau, mais comme, tout comme un magasin physique, votre site internet nécessite périodiquement une remise à neuf et un réaménagement pour rester attractif et continuer à attirer les visiteurs.

En effet, les tendances de design évoluent et le comportement utilisateur aussi. Faire une refonte, c'est rafraîchir l'expérience utilisateur (UX), améliorer le taux de conversion, revaloriser son image de marque et surtout résoudre tous les problèmes techniques et structurels pour améliorer le référencement naturel SEO.

Table des matières

Étape 1 : Le Cahier des Charges

Pourquoi faire une Refonte ?

Comme vous le savez sûrement, un site vieillissant peut nuire à votre image de marque et à la crédibilité de votre entreprise. Motivé par des facteurs tels que l'évolution rapide et constante des nouvelles technologies et des comportements des utilisateurs, la “refonte” est une étape essentielle dans la vie d'un site web et peut également accompagner des changements dans la stratégie commerciale de votre société comme l'introduction de nouveaux produits / services par exemple.


En changeant de logo, en effectuant une refonte du site web avec une interface plus intuitive, une amélioration de la recherche, une mise en avant des photos avec une qualité supérieure et un design responsive et plus fluide sur mobile, ainsi qu'une nouvelle stratégie de contenu. Airbnb a vu ses réservations augmenter à hauteur de 260% sur mobile renforcer son image de marque et le nombre d'hôtes est passé de 550 000 en 2013 à plus de 1 million en 2014.


Si vous voulez l'exemple d'une refonte réussie, prenons l'exemple d'Airbnb qui, dans un désir de développer la plateforme, a entrepris une refonte en 2013. Voici les changements qui ont été apportés.

  • Changement de logo
  • Refonte du site web avec une interface plus intuitive
  • Amélioration de la recherche
  • Mise en avant des photos avec une qualité supérieure
  • Design responsive et plus fluide sur mobile
  • Nouvelle stratégie de contenu

Résultats :

  • Augmentation des réservations de 260% sur mobile
  • Renforcement de l'image de marque
  • Nombre d'hôtes passé de 550 000 en 2013 à plus de 1 million en 2014

ℹ️ Résultats : Suite à cette refonte stratégique, Airbnb a littéralement explosé. Les réservations sur mobile ont connu une hausse de 260%, l'image de marque s'est considérablement renforcée et l'application a vu son nombre d'utilisateurs presque doubler en seulement un an.

Le Cahier des charges d’une Refonte

Le cahier des charges est le pilier  d'une refonte réussie. C'est votre feuille de route, celle qui va définir de manière détaillée les objectifs, les besoins et toutes les caractéristiques techniques de votre projet. Il est votre guide pour que vous puissiez définir les étapes et vous projeter dans le temps et surtout définir un budget.

Nous vous dévoilerons un peu plus d'informations liées au cahier des charges d’une refonte dans un article  dédié, mais voici un condensé des points essentiels :

Définir les objectifs de sa Refonte

La partie la plus importante du cahier des charges est définir ses objectifs. Voici une version simplifiée d'exemples d'objectifs pour la refonte de son site web.

  • Améliorer l'expérience utilisateur : Navigation plus fluide et intuitive.
  • Moderniser le design : Adapter aux tendances actuelles et assurer la compatibilité mobile.
  • Optimiser le référencement (SEO) : Meilleure visibilité sur les moteurs de recherche.
  • Augmenter les conversions : Optimiser les CTA et simplifier le parcours client.
  • Intégrer de nouvelles technologies : Ajouter des plugins et améliorer la sécurité.
  • Résoudre les problèmes techniques : Corriger les bugs et améliorer les performances.

Les Fonctionnalités / Technologies à ajouter  ?

Il est important de spécifier dans son cahier des charges les fonctionnalités technologies à ajouter pour pouvoir planifier cette dite intégration avec le prestataire / l’agence

Modèle de cahier des charges La Refonte

Si vous avez des besoins précis et souhaitez aller beaucoup plus en profondeur dans la rédaction de votre cahier de charge, nous en avons conçu un modèle. Cliquez sur le bouton “Télécharger le modèle cahier de charge La Refonte” pour l’obtenir !

Combien de temps prend une refonte ?

Avec tous ces éléments, vous vous dites que cela va vous prendre beaucoup de temps, mais vous, vous êtes pressé et vous souhaitez bien faire !

Durée d’une refonte en partenariat avec une agence ou un freelance :
En faisant appel à une agence classique voire à un freelance, la refonte de votre site internet prendra 3 à 6 mois.

Par contre, si vous faites appel à une agence spécialisée dans les refontes de site internet, comme “La Refonte” par exemple (je suis certain que vous vous y attendiez), cela prendra environ 1 mois et demi !

Vous souhaitez réaliser la refonte vous même :
Cela dépendra forcément de vos compétences actuelles, de votre investissement et de vos partenaires.

En résumé :
Si vous êtes pressé, mieux vaut entreprendre la refonte vous-même si vous avez du temps à y consacrez, soit confiez la mission à une agence spécialisée dans les refontes de site internet !

Enfin, tout dépend du type de refonte, ici nous parlions d’une refonte totale. Dans le cadre d’une refonte uniquement visuelle et sans travail de fond, cela prendra évidemment moins de temps.

Quand faire une refonte ?

Il y a deux moments propices pour réaliser la refonte de son site internet.

- Une refonte tous les deux ans :
Selon les experts, il est conseillé de faire une refonte à peu près tous les deux ans. Si vous êtes dans un secteur ultra concurrentiel, réduisez ce "laps de temps" à un an.

- Lors d’une restructuration de l’activité :
Réaliser une refonte peut également être judicieux lorsque vous avez besoin de “mettre à jour” votre site internet. Par exemple, lorsque votre société a supprimé ou développé certaines activité.

Ainsi, mettre votre site à jour va pouvoir vous permettre de

  • Mettre en exergue la nouvelle activité sur le site
  • Supprimer les activités obsolètes pour se concentrer sur les activités restants et travailler sur leur référencement naturel

Quel est le prix d’une refonte ?

Comme nous l'avons dit précédemment, tout dépend du type de refonte. Cela peut aller de 400 euros à 1500 euros pour une refonte uniquement du menu de navigation ou visuelle à plus de 50 000 euros pour des gros sites sur une refonte totale avec restructuration. Il n'y a pas de prix fixe et tout dépend également du type de site. Si c'est un site e-commerce, un blog, un site de prestation de service,… .

Blog
Taille du site - Petit (1-10 pages)
Volume de trafic - Faible
Refonte visuelle
400 - 800 €
Refonte navigation
400 - 800 €
Refonte totale
2 000 - 5 000 €
Taille du site - Moyen (10-50 pages)
Volume de trafic - Moyen
Refonte visuelle
800 - 1 500 €
Refonte navigation
800 - 1 500 €
Refonte totale
5 000 - 10 000 €
Site Vitrine
Taille du site - Petit (1-10 pages)
Volume de trafic - Faible
Refonte visuelle
400 - 1 000 €
Refonte navigation
400 - 1 000 €
Refonte totale
3 000 - 8 000 €
Taille du site - Moyen (10-50 pages)
Volume de trafic - Moyen
Refonte visuelle
1 000 - 2 000 €
Refonte navigation
1 000 - 2 000 €
Refonte totale
8 000 - 15 000 €
Site E-commerce
Taille du site - Petit (1-50 produits)
Volume de trafic - Faible
Refonte visuelle
800 - 2 000 €
Refonte navigation
800 - 2 000 €
Refonte totale
10 000 - 20 000 €
Taille du site - Grand (50-500 produits)
Volume de trafic - Moyen
Refonte visuelle
2 000 - 5 000 €
Refonte navigation
2 000 - 5 000 €
Refonte totale
20 000 - 40 000 €
Site de Service
Taille du site - Petit (1-10 pages)
Volume de trafic - Faible
Refonte visuelle
500 - 1 000 €
Refonte navigation
500 - 1 000 €
Refonte totale
3 000 - 8 000 €
Taille du site - Moyen (10-50 pages)
Volume de trafic - Moyen
Refonte visuelle
1 000 - 2 500 €
Refonte navigation
1 000 - 2 500 €
Refonte totale
8 000 - 15 000 €
Grand Site/Portail
Taille du site - Large (> 100 pages)
Volume de trafic - Élevé
Refonte visuelle
5 000 - 10 000 €
Refonte navigation
5 000 - 10 000 €
Refonte totale
30 000 - 50 000 €
Taille du site - Très grand (> 500 pages)
Volume de trafic - Très élevé
Refonte visuelle
10 000 - 20 000 €
Refonte navigation
10 000 - 20 000 €
Refonte totale
50 000 € et plus
Type de Site
Taille du Site
Volume de Trafic
Type de Refonte
Prix Estimatif
Blog
  • Petit (1-10 pages)

Faible

Refonte visuelle

Refonte navigation

Refonte totale

400 - 800 €

400 - 800 €

2 000 - 5 000 €

  • Moyen (10-50 pages)

Moyen

Refonte visuelle

Refonte navigation

Refonte totale

800 - 1 500 €

800 - 1 500 €

5 000 - 10 000 €

Site Vitrine
  • Petit (1-10 pages)

Faible

Refonte visuelle

Refonte navigation

Refonte totale

400 - 1 000 €

400 - 1 000 €

3 000 - 8 000 €

  • Moyen (10-50 pages)

Moyen

Refonte visuelle

Refonte navigation

Refonte totale

1 000 - 2 000 €

1 000 - 2 000 €

8 000 - 15 000 €

Site E-commerce
  • Petit (1-50 produits)

Faible

Refonte visuelle

Refonte navigation

Refonte totale

800 - 2 000 €

800 - 2 000 €

10 000 - 20 000 €

  • Grand (50-500 produits)

Moyen

Refonte visuelle

Refonte navigation

Refonte totale

2 000 - 5 000 €

2 000 - 5 000 €

20 000 - 40 000 €

Site de Service
  • Petit (1-10 pages)

Faible

Refonte visuelle

Refonte navigation

Refonte totale

500 - 1 000 €

500 - 1 000 €

3 000 - 8 000 €

  • Moyen (10-50 pages)

Moyen

Refonte visuelle

Refonte navigation

Refonte totale

1 000 - 2 500 €

1 000 - 2 500 €

8 000 - 15 000 €

Grand Site/Portail
  • Large (> 100 pages)

Élevé

Refonte visuelle

Refonte navigation

Refonte totale

5 000 - 10 000 €

5 000 - 10 000 €

30 000 - 50 000 €

  • Très grand (> 500 pages)

Très élevé

Refonte visuelle

Refonte navigation

Refonte totale

10 000 - 20 000 €

10 000 - 20 000 €

50 000 € et plus

Disclaimer : Ceci est uniquement un tableau avec des prix indicatifs tout dépend du projet de la structure qui effectue la prestation (agence / freelance) et du taux journalier moyen de celle-ci

Calculer la rentabilité de sa refonte

Rien ne vaut des chiffres pour prendre une décision éclairée. Lorsqu'on décide de faire une refonte, on attend derrière un retour sur investissement ou valoriser son image de marque.

Pour ce qui est du retour sur investissement, nous avons créé un calculateur qui permet d'estimer l'impact financier d'une refonte sur votre société et de comparer les coûts que vous allez engager pour celle-ci et les bénéfices attendus. Sous celui-ci se trouve une explication simple de tous les champs du calculateur et pourquoi ils sont pertinents.

Calculer la rentabilité de sa Refonte


  • Trafic mensuel actuel : Le nombre moyen de visiteurs sur votre site chaque mois. Connaître ce chiffre est crucial car plus votre trafic est élevé, plus le potentiel de conversion augmente.
  • Taux de conversion actuel (%) : Le pourcentage de visiteurs qui effectuent une action souhaitée comme l’achat d’un produit sur votre site. C'est une mesure de l'efficacité de votre site actuel à convertir les visiteurs en clients.
  • Valeur moyenne d'une conversion (€) : Le revenu moyen généré par une conversion. Cela vous aide à comprendre combien chaque conversion vaut pour votre entreprise.
  • Coût estimé de la refonte (€) : Le budget que vous envisageriez pour la refonte de votre site. Cet investissement est comparé aux bénéfices potentiels pour calculer le ROI.
  • Augmentation estimée du trafic (%) : L'augmentation prévue du nombre de visiteurs après la refonte. Une refonte bien faite peut attirer plus de visiteurs, augmentant ainsi vos opportunités de conversion.
  • Amélioration estimée du taux de conversion (%) : L'augmentation attendue du taux de conversion après la refonte. Une meilleure conception et une meilleure expérience utilisateur peuvent encourager plus de visiteurs à devenir des clients.

En remplissant tous ces champs, le calculateur de ROI permet d'estimer :

  • Le ROI estimé en pourcentage : c'est-à-dire le pourcentage de retour sur investissement qu'on peut attendre après refonte. Un ROI positif signifie que les bénéfices de la refonte surpassent les coûts.
  • Le temps nécessaire pour récupérer l'investissement de départ : grâce aux bénéfices supplémentaires générés.
  • Augmentation estimée du bénéfice mensuel : permet de se projeter mensuellement, financièrement après la refonte.

Les types de refonte

Chez la refonte, nous proposons trois options pour la refonte d'un site web :

1. La refonte visuelle (axée taux de conversion)

La refonte visuelle, on s'occupe uniquement de l'univers visuel du site, de l'identité et du web design. Aucun travail n'est fait sur l'arborescence, la structure du site ou le SEO.

2. La refonte SEO

La Refonte SEO est  uniquement centrée sur la structure du site et le contenu textuel pour améliorer le référencement SEO

3. La refonte complète

La refonte complète quant à elle comporte une refonte visuelle, évoquée ci-dessus, couplée à un travail en profondeur au niveau de la structure / arborescence du site pour améliorer le parcours de l'utilisateur, corriger toutes les erreurs structurelles que l'on peut trouver en SEO (pourquoi ne pas créer des cocons sémantiques et corriger toutes les erreurs techniques également)

Les points les plus importants
Établir un cahier des charges avec les objectifs à atteindre et les nouvelles fonctionnalités
Définir le laps de temps dont vous avez besoin, le bon moment
Utiliser le calculateur pour s’assurer de la rentabilité de la refonte

Étape 2 : Audit du site web

Analyse des données actuelles

Analyse des données actuelles pour comprendre les différents problèmes existants.

La tendance du trafic

Une métrique importante pour savoir si notre site web est en bonne santé ou non. Souvent, si le trafic est décroissant c'est qu'il y a des problèmes en termes de SEO et que Google nous déclasse. Il faut donc intervenir soit pour une refonte, soit pour entreprendre des actions pour optimiser le référencement naturel du site.

Le taux de conversion

Comparer le taux de conversion d'il y a deux ans avec le taux de conversion actuel sur des outils tels que Google Analytics est un très bon moyen également de savoir si vous êtes toujours dans les normes ou s'il y a des choses à renouveler.

Les retours clients

Demandez à vos clients en physique ou faites des campagnes de feedback. Trouvez un moyen d'avoir un retour de leur expérience sur votre site et vous aurez également des nouvelles métriques pour votre refonte.

Un Audit dit “de bon sens / de bonnes pratiques

C’est l’audit du “premier coup d’œil”. Quand on se rend sur le site : est-ce qu’il y a quelque chose qui nous choque comme des bugs, une charte graphique ou un design obsolète, les images,…

Audit UX/UI - CRO

L'audit de l'expérience utilisateur et de l'optimisation du taux de conversion est composée de plusieurs éléments clés :

  • Être sûr que l’expérience utilisateur sur le site est toujours d’actualité et adaptée au produit/service.
  • Analyser comment se comporte l’utilisateur avec un outil de heatmap.
  • Faire naviguer une personne extérieure sur son site et lui faire noter toutes ses remarques.

Remarque : Vous pouvez également utiliser des outils comme Hotjar pour avoir des métriques réelles sur le comportement utilisateur.

Audit SEO

Un peu de pratique :

Un audit SEO est nécessaire Pour repérer toutes les erreurs techniques et structurelles


Pour structurer votre travail, utilisez un outil de Mindmap (exemples : Mindmeister, XMind, Coggle).

Ainsi, vous pouvez créer un système de branches en fonction des domaines que vous souhaitez auditer. Pour notre “branche SEO” nous avons choisi le découpage suivant :

  • On site
  • Off site
  • Contenu
  • Résultat ⇒ qui nous permet d’établir une conclusion à partir des 3 points précédents.

Il ne vous reste plus qu’à dupliquer ce modèle pour chacun des domaines que vous souhaitez auditer.


Vous pouvez utiliser ce processus pour tout revoir. Le fait de faire un travail de brainstorming sur un outil de carte mentale vous aide à vous projeter afin d’avoir une vision plus claire sur votre refonte.

Étape 3 : Arborescence du site web

Structure du site web

Repenser la structure de votre site web est une étape primordiale pour aller de l'avant. Dans la plupart des cas, les sites web ont été créés sur le vif par vous, une personne qui n'avait pas tous les tenants et aboutissants de comment fonctionne et se structure un site web. Il est temps lors de votre fonte de repenser votre structure et votre contenu avec une approche plus orientée des moteurs de recherche et de l'expérience utilisateur.


Comme vous pouvez le voir ici, on repense un site web avec les pages par thématique grâce au logiciel Miro. On crée également les relations entre les pages via des flèches.

Plan de redirection des urls

Lorsque le site change de structure ou que vous refaites l'arborescence, les adresses URLs changent. Il est important de créer une nouvelle passerelle entre l'ancienne page et la nouvelle page. Car si on oublie de mettre en place une redirection, la page supprimée ou déplacée affichera un message d'erreur lorsque les utilisateurs iront dessus.

A quoi ressemble un plan de redirection des URL ?


Le plan de redirection URL ressemble souvent à un fichier CSV avec une colonne A source pour identifier l'ancienne URL et une colonne B destination pour identifier la nouvelle URL.

Les points les plus importants
Redéfinir la structure de votre site web pour qu’elle soit plus efficace
Établir le plan de redirection des URLs

Étape 4 : Design du site web

Définir votre charte visuelle / Design System

Charte graphique :


Une refonte implique souvent un changement de nuances et de couleurs, un changement de logo, de la typographie et tout autre élément graphique. Il est important de tout définir.


Le Design System, également connu sous les noms d'UI Kit ou de StyleGuide, est illustré ici par l'un de nos modèles créés pour nos clients, une version matérialisée de la charte graphique. Cette dernière se restreint vraiment au ton et aux couleurs, tandis que le design system est plus axé sur la forme et l'application sur un site web réel.

Création de maquettes

La création d'une maquette est une étape cruciale dans la refonte de votre site web !

  • 1. Ce que la maquette permet :
  • Matérialise visuellement les changements prévus pour le site
  • Coordonne le travail entre graphiste et intégrateur
  • Permet la validation du web design par tous avant l'intégration
  • 2. Processus de création :
  • Incorporation du design system et de la charte graphique dans un logiciel de prototypage
  • Possibilité de réalisation par soi-même ou par un prestataire, mais vous gardez la main
  • 3. Avantages :
  • Offre une représentation visuelle concrète du projet final
  • Un gain de temps considérable
  • 3. Outils et compétences requis :
  • Accessible à tous avec du temps et de la persévérance
  • Utilisation d'outils professionnels pour un rendu plus élaboré

Voici un tableau qui vous permettra de vous positionner sur un outil et de débuter la création de votre maquette : (si jamais besoin de plus d'informations voir notre contenu sur la refonte graphique et comment mous pouvons vous aider).

Adobe XD
Niveau
Avancé
Collaboration
En temps réel
Accès
Application de bureau
Facilité d'utilisation
Modérée
Coût
Abonnement payant
Figma
Niveau
Avancé
Collaboration
En temps réel
Accès
Navigateur web
Facilité d'utilisation
Modérée
Coût
Abonnement payant
Canva
Niveau
Débutant
Collaboration
Limitée
Accès
Navigateur web
Facilité d'utilisation
Très simple
Coût
Gratuit (options payantes)
Pen & Paper
Niveau
Débutant
Collaboration
Non applicable
Accès
Papier et crayon
Facilité d'utilisation
Très simple
Coût
Coût du matériel

Critères / Outils

Adobe XD

Figma

Canva

Pen & Paper

Niveau

Avancé

Avancé

Débutant

Débutant

Collaboration

En temps réel

En temps réel

Limitée

Non applicable

Accès

Application de bureau

Navigateur web

Navigateur web

Papier et crayon

Facilité d'utilisation

Modérée

Modérée

Très simple

Très simple

Coût

Abonnement payant

Abonnement payant

Gratuit (options payantes)

Coût du matériel

Les points les plus importants
Définir votre charte graphique définitive
Création des maquettes

Étape 5 : Création d’une préproduction

Environnement en local vs staging :

Quand il s'agit de travailler sur site web de test, il existe deux écoles: soit créer un environnement de staging via les hébergeurs, (solution que nous conseillons vivement), ou la deuxième consiste à recréer un environnement de travail en local.

Avantages et inconvénients de travailler en local vs Stagging

💡 L’Avis de La Refonte :
Si vous êtes dans une démarche d'apprentissage, vous pouvez vous permettre de créer le site en local mais cela vous prendra plus de temps, il y aura plus de problèmes au niveau des intégrations avec des API ou d'autres parties du site. C'est pourquoi nous recommandons d'utiliser les services de staging proposés par les hébergeurs pour un développement plus fluide et moins contraignant.


Créer un
environnement de staging

La plupart des hébergeurs modernes et performants proposent des domaines de staging pour créer une préproduction.

Voici un mini tutoriel sur comment créer une pré-production sur les plus gros hébergeurs français

Votre hébergeur :

Hébergeur
Service d'installation
Création d'environnement de pré-production
Comment créer une pré-production
  • Hostinger

Softaculous, Installatron

Création de sous-domaines ou sous-répertoires

  1. Accéder au cPanel
  2. Utiliser Softaculous pour installer WordPress/PrestaShop
  3. Créer un sous-domaine pour le site de pré-production
  4. Cloner le site en production vers le sous-domaine à l'aide de WP Staging ou Duplicator (WordPress) / Copier manuellement les fichiers et la base de données (PrestaShop)
  • o2switch

Softaculous

Création de sous-domaines ou sous-répertoires

  1. Accéder au cPanel
  2. Utiliser Softaculous pour installer WordPress/PrestaShop
  3. Créer un sous-domaine pour le site de pré-production
  4. Cloner le site en production vers le sous-domaine à l'aide de WP Staging ou Duplicator (WordPress) / Copier manuellement les fichiers et la base de données (PrestaShop)
  • OVH

Softaculous, Installatron

Création de sous-domaines ou sous-répertoires

  1. Accéder au tableau de bord OVH
  2. Utiliser Softaculous pour installer WordPress/PrestaShop
  3. Créer un sous-domaine pour le site de pré-production
  4. Cloner le site en production vers le sous-domaine à l'aide de WP Staging ou Duplicator (WordPress) / Copier manuellement les fichiers et la base de données (PrestaShop)
  • Kinsta

Outil d'installation en un clic

Environnement de staging en un clic

  1. Accéder au tableau de bord MyKinsta
  2. Utiliser l'outil d'installation en un clic pour installer WordPress
  3. Créer un environnement de staging via l'option "Staging" dans MyKinsta
  4. Cloner le site en production vers l'environnement de staging en un clic via MyKinsta

Création d'un environnement local

Service d’installation

Il est possible d'utiliser Softaculous, Installatron ou des outils d'installation en un seul clic (en fonction de l'hébergeur).

Création d’un environnement local

Exportation des fichiers et de la base de données depuis l'hébergeur

Importation des fichiers et de la base de données sur le serveur local

Configuration des fichiers hosts pour accéder au site local

Outils conseillés

Désindexer la copie du site web

⚠️ Attention : Si on utilise une pré-production sur un domaine donné par l’hébergeur, on n'oublie surtout pas de le désindexer pour éviter que les pages de la pré-production n’apparaissent sur les moteurs de recherche et créent du contenu dupliqué.

Les points les plus importants
Choisir son environnement (local ou staging)
Création du site de pré-production
Désindexation totale de ce site de pré-production

Étape 6 : Structure SEO & Redirections

Restructuration technique SEO

Une restructuration du site web est cruciale pour améliorer le SEO. En organisant le contenu en une structure hiérarchique (Cocon/Siloing), avec une page d'accueil principale, des sections majeures et des sous-catégories, on aide les moteurs de recherche à comprendre la thématique du site et on facilite la navigation pour les utilisateurs.

Les points clés à retenir :

Corriger toutes les erreurs techniques SEO :


Une fois qu'on a fait notre grand ménage au niveau de la structure, il faut maintenant corriger toutes les erreurs techniques. Ce qui va être, par exemple, vérifier que la vitesse du site est toujours optimale, mettre en place toutes les redirection, vu que certaines pages ou répertoires ont été déplacés / supprimés, et d'autres petites erreurs que l’on peut observer lorsqu’on refait les fondations de son site web. Si jamais vous avez besoin de plus d'informations, n'hésitez pas à checker notre guide spécialisé sur la refonte SEO.

Les points les plus importants
Opérer la restructuration SEO pour proposer du contenu ciblé et pertinent
Correction des erreurs techniques SEO

Étape 7 : Intégration de la maquette


Une fois que tous les changements au niveau de la partie back-end technique et structure “l'arrière boutique” ont été réalisés,  nous pouvons attaquer à la partie visuelle et intégrer la maquette réalisée sur le logiciel de prototypage.

⚠️ Il est très important de tout valider sur la maquette pour éviter de nombreux allers-retours à faire sur le site web (évitez les pertes d’énergie inutiles). La maquette doit être visuellement finalisée à 100%.

Les points les plus importants
S’assurer que la maquette ait été entièrement validée
Intégrer la maquette de la refonte à votre site internet

Étape 8 : Tests de préproduction

Analyse des webperfs

Les webperfs, autrement dit, les performances web sont des métriques très importantes pour votre site internet puisqu’elles agissent sur deux aspects :

⚠️Ces deux aspects sont liés ⚠️

En effet, la vitesse de chargement globale de votre site va être prise en compte, à la fois par les utilisateurs lambdas mais aussi par les algorithmes des moteurs de recherche.

Si vous avez un site trop lent, les utilisateurs perdront patience et iront visiter un autre site internet, ce que vous ne voulez pas. Vous voulez qu’ils puissent naviguer sur votre site internet, demander un devis ou acheter vos produits ! Les moteurs de recherche comme Google prennent eux aussi la vitesse de votre site en compte, ainsi que le taux de rebond de votre site internet ainsi que le temps moyen passés par les utilisateurs sur votre site pour déterminer s’il est pertinent de vous placer en haut des résultats de recherche suite aux requêtes des utilisateurs

C’est pourquoi il est très important de :

Suivre vos redirections

Vérifier que toutes les redirections fonctionnent correctement après la mise en ligne.


Pour cela, on reprend le tableau construit lors de l’étape 3 et on teste une à une les URLs pour être sûr que le site est parfaitement fonctionnel et qu’aucune perte de trafic soit observée.

Suivre vos redirections

Nous adorons la théorie, avec nos mindmap, nos tableaux, nos calculateurs et nos articles de blog, mais nous aimons également la pratique !

C’est pourquoi, vous devez réaliser des tests d’immersion sur votre site par des utilisateurs de confiance pour que les résultats de la refonte soient bien tangibles et concordent avec vos expectations.

Ainsi, chacun des utilisateurs réalisera un feedback du nouveau site en répondant à diverses questions, par exemple :

Nous voulons savoir si grâce à la refonte du site, il répond désormais aux attentes des utilisateurs actuels : un site rapide, sans bug, doté d’une direction artistique particulière et qui énonce clairement quels services / produits l’entreprise propose et dans quel but.

⚠️ Enfin, un point très important à prendre en compte, c’est de tester les intégrations des services tiers qui sont présents sur votre site et primordiaux comme par exemple Google Analytics, que les scripts de suivi fonctionnent, que les formulaires de contact soient fonctionnels. Assurez-vous que les services tiers soient bien compatibles mais aussi en conformité avec l’ensemble du site internet.

Étape 9 : Suivi des KPIS et analyse de la performance

Suivi de performance

Le suivi des indicateurs clés de performance (KPIs) et l'analyse de la performance sont les clés du succès post-refonte.

C'est fait. Votre refonte a été effectuée. Le design est épuré, l'expérience utilisateur optimisée, et le contenu soigneusement retravaillé, tout-est-bon !

Ne pensez pas que ce soit le cas.. L’étape cruciale qui suit la mise en production est le suivi des KPIs et l'analyse minutieuse de la performance de votre nouveau site.

⚠️ Ce travail en aval est en réalité la phase déterminante pour garantir le succès à long terme de votre refonte.

Mise en place du suivi de la performance

Pour le mettre en place, commencez par identifier les métriques qui comptent vraiment pour votre activité. Il ne faut pas se limiter au trafic global, même si c’est un indicateur important. Penchez-vous sur le taux de conversion, le temps passé sur le site, ou encore le taux de rebond (dont on vous a déjà parlé lors du paragraphe sur les performances web).


Ce suivi n’est pas une simple formalité, il doit être réalisé de manière rigoureuse car c’est un processus continu qui vous permet d'évaluer l'impact réel de vos changements et d'identifier rapidement les derniers axes d'amélioration. Pour ce faire, il est essentiel de mettre en place un système de suivi robuste dès le départ.

Suivi des KPI et analyse de la performance

Dès lors que vos KPIs sont définis, vous aurez besoin des outils adéquats pour les mesurer de la manière la plus optimisée possible.

Google Analytics reste évidemment un must-have, mais n'hésitez pas à le compléter avec des solutions plus spécialisées, notamment pour le suivi SEO (Semrush, Ahrefs,…) ou l'analyse du comportement utilisateur (Hotjar par exemple).

Ainsi, vous pourrez avoir une vue d’ensemble. N’hésitez pas à réaliser des tableaux de suivi grâce à Excel ou Google Sheet afin de pouvoir interpréter vos résultats plus facilement.

Comparez vos chiffres avec vos performances pré-refonte pour mesurer l'impact réel de vos changements ainsi qu’au fur et à mesure des mois succédant la refonte. Cherchez des tendances, des corrélations entre les différentes métriques.

⚠️ C’est souvent dans ces analysées croisées que se cachent les insights les plus précieux et qui vous permettront d’optimiser encore plus votre site internet si besoin !

Les spécificités d’une Refonte par rapport à son CMS

Il existe une multitude de CMS sur le marché, parfois totalement open source et gratuit, quelques fois fortement onéreux. De notre côté nous allons nous pencher sur deux solutions qui sont fortement plébiscités : Wordpress & Prestashop qui ont eux aussi chacun leur spécificité en termes de suivi et de performance.

Refonte de site Wordpress

Si votre site a été construit avec WordPress, vous avez à disposition pléthore de plugins dédiés à l'analyse et à l'optimisation.

En voici quelques-uns qui pourraient vous aider :

  • Yoast SEO Analytics : Suivi des performances SEO et des mots-clés.
  • Query Monitor : Analyse des requêtes SQL et des hooks WordPress pour identifier les problèmes de performance.
  • Hotjar : Visualisation de l'interaction des utilisateurs avec votre nouveau design.

Il existe une multitude d’autres plugins qui vous aideront dans cette tâche ardue qu’est le suivi des KPIs, allez donc les dénicher et les essayer. Autrement, rendez-vous sur notre article dédié à WordPress

Refonte de site Prestashop

PrestaShop, en tant que plateforme e-commerce, nécessite une approche centrée sur les métriques de vente et de conversion !

Voici ceux que nous trouvons être les plus pertinents :

Grâce à cette liste (presque exhaustive !), nous espérons que vous puissiez suivre vos KPIs sur PrestaShop d’une main de maître ! Pour plus d'infos, Nous avons conçu pour vous une page dédiée à la refonte Pretashop.

Ajustements post-refonte

Nous nous devons de vous prévenir !

⚠️ Le suivi de performance est crucial pour identifier les éléments sous-performants de votre site : pages, fonctionnalités et parcours utilisateurs. Cependant, l'interprétation des données est complexe. L'optimisation post-refonte est un processus subtil qui nécessite une analyse approfondie avant d'effectuer des changements précipités.

Vous devez donc donner le temps à vos utilisateurs de s’habituer à votre nouveau site internet. Soyez patients et observez les tendances sur plusieurs semaines pour ne pas tirer de conclusions hâtives qui pourraient vous desservir !

Étape 10 (optionnelle) : Pourquoi faire appel à une agence experte pour votre refonte ?

Félicitations, vous êtes arrivé à la fin de notre guide : "Le Guide clé en main pour réussir votre refonte de site web avec nos outils".

Maintenant que vous avez tous les éléments en main, pourquoi devriez-vous faire appel à une agence spécialisée dans la refonte de site internet plutôt que de réaliser votre refonte vous-même ?
Tout simplement car comme vous l'avez compris en lisant ce magnifique article : c'est compliqué. Et pas seulement. Cela prend aussi du temps, beaucoup de temps.

C'est pour cela que chez La Refonte, en plus de vous offrir ce super guide détaillé, étape par étape de comment effectuer une refonte, on vous offre aussi la possibilité d'entamer une collaboration avec nous ! Que ce soit pour ressusciter (tel un Phoenix) votre site internet ou bien pour optimiser votre site web déjà existant afin d'exploser tous les records ! Alors obtenez gratuitement le rendez-vous d’audit en cliquant ici.

Les points les plus importants
Étape 1
Établir un cahier des charges avec les objectifs à atteindre et les nouvelles fonctionnalités
Définir le laps de temps dont vous avez besoin, le bon moment
Utiliser le calculateur pour s’assurer de la rentabilité de la refonte
Étape 2
Réaliser une première analyse des données
Réaliser les audits (bon sens, UX/UI, SEO)
Étape 3
Redéfinir la structure de votre site web pour qu’elle soit plus efficace
Établir le plan de redirection des URLs
Étape 4
Définir votre charte graphique définitive
Création des maquettes
Étape 5
Choisir son environnement (local ou staging)
Création du site de pré-production
Désindexation totale de ce site de pré-production
Étape 6
Opérer la restructuration SEO pour proposer du contenu ciblé et pertinent
Correction des erreurs techniques SEO
Étape 7
S’assurer que la maquette ait été entièrement validée
Intégrer la maquette de la refonte à votre site internet

Prêt à Élever Votre Présence E-Commerce?

Discutons de la manière dont nous pouvons transformer votre boutique en ligne.

Réservez votre entretien stratégique