ToitureDP.com
Un travail de redesign, d’intégration, d’optimisation et de maintenance m’attendait pour refaire le site web de Toiture DP. Un contrat qui a eu de beaux défis à relever, en compagnie d’une gang de pros avec qui j’ai adoré travailler!
Buts et défis
Ce projet présentait plusieurs enjeux et axes d’amélioration. Le plus critique : le client n’avait aucun accès à ses fichiers, que ce soit via FTP ou par l’interface d’administration de WordPress. De plus, aucun suivi des données n’était en place : ni le volume de trafic, ni la démographie des visiteurs, ni les mots-clés menant au site n’étaient analysés. Par ailleurs, le design était devenu obsolète et ne répondait plus aux standards actuels. Enfin, la performance du site et son accessibilité étaient nettement insuffisantes et nécessitaient des optimisations majeures.
Dans les sections qui suivent, je vous présenterai les solutions mises en place, ainsi que l’approche, la stratégie et le processus adoptés pour relever ces différents défis.
Recherche et stratégie
Après plusieurs échanges avec le client et une analyse approfondie des sites concurrents, les besoins et objectifs du projet se sont précisés. Voici les étapes que j’ai mises en place dans la réalisation de cette stratégie :
Choix de l’hébergement
Un plan d’hébergement a été acquis chez PlanetHoster, une entreprise offrant des serveurs situés au Canada, un service client réactif et, élément clé pour ce projet, des boîtes courriel de grande capacité (jusqu’à 10 Go) incluses dans le plan de base. Le domaine a également été transféré sur ce compte afin de centraliser tous les actifs numériques du client au même endroit.
Installation de WordPress
Étant donné qu’il s’agissait d’un site corporatif, j’ai privilégié un environnement simple et accessible pour le client, tout en restant sur une plateforme que je maîtrise. Un thème WordPress entièrement personnalisé a été développé from scratch pour répondre précisément aux besoins du projet. J’ai volontairement limité l’utilisation de plugins afin d’assurer des temps de chargement optimaux, sans pour autant négliger la sécurité, le SEO et la mise en cache pour garantir une performance maximale.
Mise en place de Google Analytics
Afin de suivre l’évolution des performances et d’évaluer les retombées des efforts investis, un compte Google Analytics a été configuré. L’objectif est de suivre les comportements utilisateurs et d’optimiser le SEO avec une approche rigoureuse. À ce jour, aucune stratégie SEM n’a été déployée ; le projet mise principalement sur un positionnement organique plutôt que sur des campagnes marketing payantes.
Conception des maquettes WordPress
La phase créative a débuté par la réalisation de wireframes dessinés à la main, qui ont été validés par le client. Ces maquettes ont ensuite été élaborées en détail dans Figma, avant d’être intégrées dans le thème personnalisé. Ce thème a été conçu de manière évolutive afin de pouvoir être ajusté et bonifié au fil du temps, en fonction des performances et des retours des utilisateurs. L’accessibilité a été une priorité dès le départ ; un soin particulier a été apporté pour que le site soit intuitif et accessible à tous.
Gestion des courriels et migration
Lors du transfert vers la nouvelle plateforme d’hébergement, toutes les boîtes courriels existantes ont été recréées, et une nouvelle boîte spécifique à la gestion du site web a été ajoutée. La migration des courriels et la mise à jour des DNS ont été effectuées de nuit, entraînant un temps d’arrêt minimal de seulement quelques heures. Dès lors, le site était pleinement opérationnel sur la nouvelle infrastructure.
Processus créatif
À l’exception des wireframes, réalisés sur papier – une vieille habitude de graphiste que je conserve avec plaisir – l’ensemble du processus créatif a été mené dans Figma. Cela inclut la recherche typographique, la création du design system ainsi que la conception des maquettes de pages. Le prototypage, quant à lui, a été directement réalisé en HTML afin d’optimiser le temps de production.
Pour le traitement d’images, j’ai utilisé la suite Affinity, tant pour les éléments vectoriels que pour les images matricielles. Ayant récemment effectué une transition de la suite Adobe vers Affinity, ce projet m’a offert une excellente occasion de perfectionner ma maîtrise de ces nouveaux outils.
Le site a été conçu selon une approche Mobile First, privilégiant une construction adaptée en priorité aux appareils mobiles, avec une adaptation progressive aux écrans de plus grande taille. Je considère qu’il est plus efficace de partir d’une structure optimisée pour les petits formats, ce qui offre davantage de flexibilité pour les écrans plus larges, plutôt que de devoir restreindre des éléments pour assurer une bonne expérience sur mobile.
Développement
Ce site a été entièrement développé sur la plateforme WordPress. Le thème personnalisé a été conçu en HTML et SCSS (CSS), avec une utilisation minimale de JavaScript. Une éventuelle mise à jour pourrait intégrer la librairie GSAP afin de dynamiser davantage la présentation du contenu.
Comme pour le processus créatif, une approche Mobile First a été privilégiée. L’intégration de Bootstrap a permis d’accélérer la création des pages et de simplifier la gestion du responsive design.
Pour l’optimisation SEO, le plugin Yoast SEO a été intégré afin d’améliorer la visibilité du site sur les moteurs de recherche.
Chaque page a fait l’objet d’une analyse de performance et seules celles atteignant un score global supérieur à 85 % ont été considérées comme satisfaisantes.
Enfin, l’accessibilité a été priorisée tout au long du projet afin d’assurer une expérience inclusive et accessible au plus grand nombre d’utilisateurs.
Résultats et impact
En l’absence de données antérieures aux changements majeurs apportés au site, il est difficile de mesurer avec précision l’impact sur les indicateurs de performance clés (KPI) tels que le taux de conversion, le temps passé sur le site ou le taux de rebond. Toutefois, les premières analyses démontrent déjà une amélioration notable des performances.
Un suivi des indicateurs liés à l’expérience utilisateur a été mis en place et des mises à jour périodiques seront effectuées afin de documenter l’évolution des résultats.
Pour consulter les résultats visuels de ce projet, veuillez vous référer à la section photo à la fin de ce texte.
Leçon acquise
Bien que la demande du client ait été claire, il n’est pas toujours évident de saisir d’emblée toutes les subtilités de ses attentes. Ce projet m’a permis de développer mes compétences en écoute active et m’a appris à poser les bonnes questions, tout en étant en mesure d’expliquer les limites techniques auxquelles nous pouvions faire face.
J’y ai également approfondi mes connaissances en gestion de serveurs, tant pour les sites web que pour les courriels. Par ailleurs, mes recherches pour ce mandat m’ont permis de mieux comprendre le marché de l’hébergement web au Canada.
Enfin, bien que ce projet se soit étalé sur une période plus longue que prévu, il s’est conclu avec une valeur ajoutée supérieure au mandat initial. Ce fut une réussite bénéfique pour toutes les parties impliquées.
Galerie de photos
Voici une galerie de photos du projet qui vous donnera une meilleure idée de l’ampleur et du produit au moment de la mise en ligne.
