Etude de cas : refonte du site web d’un organisme de stages de récupération de points

Cette étude de cas porte sur la refonte d’un site web existant d’une société spécialisée dans la récupération des points de permis de conduire.

Nous verrons ensemble les points clés : les enjeux de la refonte, les étapes qui ont été menées pour la réussite du projet, et les principaux résultats.

Client

Le client est le dirigeant d’une structure qui propose des stages de récupération de points de permis de conduire, en Isère.

Le site web est https://adpoints.fr.

Attentes, besoin

Un site web existait déjà depuis plusieurs années et permettait au client de générer des visites sur le site, et de permettre aux utilisateurs de réserver un créneau de stage.

Cependant le site était vieillissant, le thème avait été développé sur-mesure par une personne qui n’intervenait plus sur le site, et le formulaire de réservation (canal de réservation) manquait de fluidité.

Enjeux

Les stages de récupération de points de permis constituent un secteur très concurrentiel. Avoir un site web en ligne, bien référencé, attractif, proposant une ergonomie optimale, était l’enjeu principal pour le client.

Conserver la fonctionnalité de réserver un stage en ligne était également un besoin primordial afin que ses propres clients puissent facilement faire des demandes de réservations.

Le site existant était en http (protocole non sécurisé) et bien que ce ne soit pas une boutique en ligne, cela impacte négativement l’expérience client.

Les différentes phases

1^ère étape : aide à la définition du besoin

Bien que le client avait une idée assez bien rôdée de ce qu’il souhaitait apporter au nouveau site web, il était important de l’accompagner sur cette partie en amont afin de :

• Le conseiller sur la faisabilité ou non des solutions qu’il avait au préalable imaginées,
• L’éclairer sur des solutions alternatives,
• Apporter un conseil sur les techniques actuelles et les différents éléments connexes et importants (référencement naturel, aspect réglementaire d’un site web, suivi du trafic, etc.)

2^ème étape : l’état des lieux de la concurrence (sur les moteurs de recherche), analyse des opportunités

Cette étape préliminaire nous a permis de connaître la concurrence du site web en termes de positionnement sur les moteurs de recherche.

Cela a permis d’acquérir de la connaissance à cet instant avant refonte, constituant une donnée précieuse ré-exploitable en tant que de besoin lors de la refonte ou pendant la durée de vie du site.

Dans cette étape, il y a eu l’analyse des mots-clés pertinents en regard de l’activité de l’entreprise, leur volume de recherche estimé (combien de personnes font cette recherche chaque mois), leur niveau de difficulté (permet d’estimer le niveau de la concurrence associé aux mots-clés).

Une analyse du trafic estimé sur les sites web concurrent a également été menée car cela nous a permis d’avoir des données importantes en terme de veille sur la concurrence.

3^ème étape : l’élaboration de l’arborescence et de l’ossature du site

C’est une phase très importante car c’est le première maquette visuelle pour le client et le concepteur. Elle nous a permis de projeter les différentes idées de thématiques, de sections, et d’idées de contenus que nous souhaitions mettre en avant sur les différentes pages du site web.

En itérant avec le client, il m’a été possible de valider exactement ce qu’il voulait voir apparaître sur le site.

Cette maquette est également une donnée précieuse pour le client car elle lui a permis de préparer tous les contenus de type texte qui allaient venir intégrer sur le site dans les différentes sections réservées.

Figure 1 : vue globale de la maquette wireframe contenant toutes les pages du site

4^ème étape : la conception de la maquette graphique pour le rendu final du site

Après l’étape de wireframing, l’étape logique est la conception de la maquette graphique. C’est une étape importante aussi bien pour le client que pour le concepteur puisqu’on vient intégrer tout l’univers graphique, les couleurs, le logo, la typographie, (bref l’identité visuelle) et le « projeter » sur l’ossature précédemment conçue.

Par ailleurs, les contenus (textes, images, illustrations) sont également intégrés pour être certain que le rendu est à la fois consistant, ergonomique et correspond bien aux attentes du client.

La maquette en version responsive (smartphone essentiellement) a également été conçue à cette étape.

Figure 2: maquette graphique intermédiaire de toutes les pages du site

5^ème étape : le développement du site web

C’est l’étape principale du projet puisque qu’elle consiste à donner vie au site web en respectant toutes les étapes précédentes.

J’ai intégré la maquette du site sur WordPress sur l’hébergeur du client (sur un environnement de test au préalable, afin que le site existant soit toujours accessible durant le développement).

Le site est également enrichi de toutes les fonctionnalités demandées comme le système de réservation à un stage.

6^ème étape : les optimisations diverses

Les optimisations qui n’ont pas pu être faites (pour des raisons techniques, ou des raisons liées au déroulement du projet) sont réalisées après la livraison du site : notamment sur l’optimisation des performances, la finalisation de différentes tâches SEO (balises, fichier robots.txt, le fichier sitemap.xml).

La livraison du site

Tests

De nombreux tests ont été menés avant de mettre en ligne le site pour s’assurer que le site réponde bien au cahier des charges.

Mise en ligne du site

Le site a enfin vu le jour le 28 juin 2022. Il a remplacé intégralement l’ancienne version en écrasant tout simplement tout ce qui existait auparavant sur la précédente installation.

Plan de redirection

Une étape cruciale (qui est parfois malheureusement négligée à tort dans des refontes de site), c’est de s’assurer que les anciennes urls du site mènent vers le nouveau contenu du site le plus pertinent.

Cela consiste donc pour le développeur à créer un plan de redirection et à le mettre en place depuis le fichier .htaccess installé à la racine. C’est important de passer par cette étape notamment pour ne pas frustrer des utilisateurs qui tomberaient sur une page d’erreur (la fameuse page d’erreur 404), et cela permet aussi d’éviter une baisse du positionnement du site sur les moteurs de recherche (Google « n’aime pas » les erreurs 404).

Formation

Le client a été formé en visio-conférence pour qu’il puisse être autonome dans la gestion de son site et gérer les demandes de réservations entrantes.

Après la mise en ligne

Comparaison Avant/après

Voici quelques captures d’écran montrant quelques pages du site avant, et après la refonte.

Figure 3 : page d’accueil avant refonte	Figure 4 : page d’accueil après refonte
Figure 5 : page présentant les dates de stages avant refonte	Figure 6 : page présentant les dates de stages après refonte

Analyse du trafic

L’outil gratuit Google Search Console met à disposition des données indispensables pour analyser la performance (en termes de positionnement) d’un site web.

L’analyse comparative sur les deux périodes d’intérêt (avant et après mise en place de la refonte) montre des statistiques avec une progression sur toutes les métriques importantes.

On notera que le nombre de clics a plus que doublé, et que le nombre d’impressions (nombre de fois où le site est montré dans un résultat de recherche) a également doublé. Le CTR (ratio nombre de clics/nombre d’impressions) progresse de près de 10%. Le nombre de mots-clés a augmenté de près de 15%.

On notera néanmoins une légère baisse sur la position moyenne du site sur l’ensemble des mots-clés. Ces résultats sont globalement très satisfaisants, d’autant plus qu’aucune action profonde et sur la durée en SEO (création de contenu, acquisition de liens) n’a été menée à la suite.

Dans le tableau suivant, les valeurs des deux premières lignes sont volontairement masquées pour des raisons de confidentialité. Les écarts relatifs (en %) uniquement sont affichés.

	Nombre de clics	Nombre d’impressions	CTR	Nombre de mots-clés	Position moyenne
Avant refonte Sept-nov 2021	—	—	2.2 %	—	—
Après refonte Sept-Nov 2022	—	—	2.4 %	—	—
Ecart	+119%	+103%	+9%	+15%	+14%

Tableau 2: comparaison des statistiques avant / après refonte

Taux de conversion

Il est effectivement indispensable de générer du trafic sur le site web, néanmoins cela n’est pas suffisant en soi. Il est important que le taux de conversion soit au plus haut. Le taux de conversion est une des métriques principales mesurant l’efficacité d’un site web en ce qui concerne l’acquisition de clientèle. Il peut se calculer selon la manière suivante en faisant le rapport nombre de ventes / nombre d’utilisateurs.

Ce taux reste sous le couvert de la confidentialité des données client. Néanmoins le nombre de visiteurs a augmenté et les réservations également ce qui est révélateur de très bonnes performances !

Conclusion

Ce projet a été une valeur ajoutée véritable pour mon client. Les statistiques le montrent (x2 sur les clics Google), entre autres.

Le parcours utilisateur et son expérience sont selon moi améliorés car plus fluides, compréhensibles et ergonomiques.

La refonte d’un site web est stratégique (en fonction des cas) car permet à la lumière d’un constat effectué à un instant t, de prévoir et d’amener toutes les modifications qui apporteront davantage de trafic et de conversion via le site web.

Cette étude de cas montre les principales étapes majeures dans le projet de refonte du site web. Chaque cas de refonte nécessitera une phase de pré-conception (amont) adaptée et sur-mesure.

Cet écrit n’est pas exhaustif, il y a d’autres lots qui ont été traités pendant le projet pour s’assurer de sa réussite.

Selon moi, la clé de la réussite c’est de placer le client au centre du processus et de bien l’intégrer au projet (communication, rendez-vous en visio en tant que de besoin).