Un site Web constitue une passerelle cruciale vers de nouvelles opportunités commerciales. Construire un nouveau site Web ou en repenser un peut être un parcours difficile. Après avoir piloté la refonte du site internet de mon entreprise, j'ai décidé de partager un peu de notre parcours. Si vous envisagez de créer un nouveau site Web ou de repenser votre site actuel, nous espérons que cela vous aidera à rendre votre parcours plus fluide.

Évaluation

Notre site Web est pour nous une porte d’entrée importante pour de nouvelles affaires. En tant que boutique de développement Web, la façon dont nous nous présentons en ligne en dit long sur notre travail et sur ce que les clients peuvent attendre lorsqu'ils travaillent avec nous.

Une fois que nous avons décidé de créer un nouveau site Web correspondant à notre nouvelle marque, il était clair pour nous que nous devions prêcher par l'exemple et montrer à nos clients et à notre public un site Web de bonne qualité. Notre équipe a consacré beaucoup de réflexion et d’efforts à la phase de préparation avant de commencer à travailler.

• Nous avons commencé avec une question simple : pourquoi avons-nous besoin d’un site Web ou d’une refonte ? C’est un excellent moyen de rester concentré sur vos objectifs et d’éviter de vous laisser distraire.
• Une fois que nous avons compris pourquoi, nous avons ensuite suivi le processus d'identification de notre public cible. À qui nous construisions ce site Web. Il est essentiel de comprendre clairement qui vous essayez d'atteindre et ce que vous voulez qu'ils sachent sur votre marque et votre travail.
• Nous avons alors commencé à réfléchir au message que nous voulions transmettre à ce public, à la manière dont nous voulions être vus et, surtout, à la manière dont nous pourrions prouver que nous étions bons dans ce que nous faisons. Une grande partie de ce message a été réfléchie lors de la création de la marque (Vérifiez comment nous avons créé notre nouvelle marque ), et nous avons dû le transmettre dans le nouveau site Internet.
• Comme nous avions déjà une présence en ligne, nous avons pris le temps d'évaluer notre ancien site Web et de répertorier les fonctionnalités et les aspects qui, selon nous, fonctionnaient bien et ce qui, selon nous, manquait.
• Il était également très important, dans tout ce processus, de faire un suivi avec une analyse comparative des concurrents pour essayer de comprendre ce que faisaient les entreprises de notre secteur. Nous consultons également d’autres types de sites Web pour obtenir des références et de l’inspiration. Cela nous a donné des informations précieuses et nous a aidé à éviter de répéter des erreurs ou de manquer des fonctionnalités essentielles.
• La dernière étape de cette phase de préparation a été la liste des caractéristiques et fonctionnalités que nous souhaitions avoir sur notre site Web. C’était comme créer une liste de souhaits, comme si nous pouvions faire tout ce que nous voulions. La liste a ensuite été hiérarchisée et nous avons sélectionné les fonctionnalités qui étaient un MUST et celles qui étaient un BON À AVOIR qui pourraient être mises en œuvre plus tard. Il est important de se concentrer d’abord sur les éléments les plus critiques.

Certaines de ces étapes ont été réalisées en collaboration avec toute l’équipe. Étant une petite équipe, nous voulions que tout le monde soit impliqué dans une certaine mesure dans ce processus. Après cette première évaluation, nous avons commencé à diviser pour régner et avons eu des membres d’équipe dévoués chargés de transformer notre nouveau site Web en réalité.

Conception

Nous étions ravis de nous plonger dans le processus de conception de notre projet Web. La conception UI/UX est un aspect essentiel de tout projet Web. Nous avions une équipe multidisciplinaire impliquée, mais le designer était la star du spectacle, chargé de créer la représentation visuelle du message que nous voulions transmettre à notre public.

Il était essentiel pour le concepteur de bien comprendre les besoins et les attentes du projet afin de transmettre visuellement notre message et de structurer le contenu en conséquence. Nous visions un design concis et attrayant avec le bon ton.

Au cours de cette phase du projet, nous avons suivi ces étapes :

• Nous avons adopté dès le départ une approche centrée sur l’utilisateur. Nous nous sommes concentrés sur la manière dont notre public cible nous percevrait et interagirait avec nous. C'est pourquoi nous avons commencé par travailler sur l'architecture de l'information, en décidant des pages, des sections et des composants nécessaires et en créant une première ébauche de la copie.
• Ensuite, nous avons créé des wireframes low-fi pour fournir une représentation approximative et basse fidélité de la mise en page et des fonctionnalités. Cela nous a permis de tester et d’expérimenter des idées avant d’investir trop de temps et d’efforts dans la conception. Nous avons également pris en compte le flux général des utilisateurs à ce stade.
• Cette phase a été cruciale car elle a jeté les bases de l’ensemble des composants à utiliser : la création d’un système de conception. Nous avons construit une bibliothèque à l'aide de Figma qui comprenait des modèles de conception, des directives et des exemples. Cette bibliothèque était une source unique de vérité, assurant la cohérence entre tous les éléments de l'interface utilisateur et jetant les bases de l'évolutivité lors de l'introduction de nouveaux composants.
• Une fois le système de conception défini, nous avons construit les mises en page en Haute Fidélité. Nous avons appliqué l'interface utilisateur aux wireframes lo-fi créés jusque-là. À ce stade, la conception a été entièrement testée pour vérifier sa conformité aux exigences d'accessibilité et nous avons tiré des conclusions plus précises concernant l'affichage du contenu.

Nous avons utilisé Figma tout au long du processus, ce qui a facilité la collaboration avec l'équipe et la réalisation d'itérations. Après quelques itérations, nous disposions d’une version optimale sur laquelle nos développeurs pouvaient travailler.

Développement

Nous nous sommes concentrés sur la sélection de la pile technologique et sur la mise en œuvre des conceptions lors de la phase de développement du projet. Nous avons travaillé en sprints basés sur un backlog produit avec des user stories créées par notre chef de projet.

Choisir la pile technologique

Au fur et à mesure de la phase de conception, nous avons recherché quelles technologies correspondaient le mieux au site Web que nous souhaitions créer. Nos développeurs ont pu le déterminer sur la base des résultats des phases précédentes.

Choisir la bonne pile technologique est devenu plus important que jamais dans le monde d’aujourd’hui, car de nombreuses options sont disponibles. Nous avons pris en compte différents critères, tels que les exigences du projet, l'expertise de l'équipe, la disponibilité des ressources, les coûts, les performances, la sécurité et l'évolutivité.

Nous voulions un site Web simple, rapide et beau pour ce projet.

Nous avons adopté une approche modulaire, décomposant les composants, caractéristiques et fonctionnalités du site Web en composants plus petits et réutilisables. Cette approche nous a permis de réutiliser des composants dans différentes parties du site Web, facilitant ainsi la collaboration entre les développeurs et les concepteurs, facilitant le test et la maintenance de ce qui a été développé et permettant finalement d'améliorer les performances et de réduire les temps de chargement des pages.

Nos développeurs ont préconisé Astro , un framework Web tout-en-un pour des sites Web rapides et axés sur le contenu. Ils étaient impatients d’essayer le framework axé sur le contenu le plus rapide du marché. Trois éléments ont retenu l'attention de notre équipe : le rendu côté serveur, les résultats en termes de performances et la flexibilité.

Avec le site Web simple que nous recherchions, nous n'avions pas besoin d'un système de gestion de contenu (CMS) à part entière, mais nous voulions permettre aux membres de l'équipe non techniques de travailler sur le site Web. Nous avons étudié de manière approfondie différentes options de CMS et avons finalement choisi Sanity en raison de ses fonctionnalités robustes et de sa facilité d'utilisation. Sanity disposait également d'une excellente documentation et d'un niveau gratuit très généreux.

En plus d'Astro et Sanity, nous avons également décidé d'utiliser Netlify pour notre projet. Eh bien, nous le faisons toujours. Les capacités de déploiement et d'hébergement transparentes de Netlify constituent généralement notre réseau de diffusion de contenu (CDN) incontournable. Nous avons également utilisé diverses bibliothèques pour les animations, dont nous avons discuté plus en profondeur dans un autre article de blog (à venir).

Un aspect à améliorer était le formulaire que nous avons créé pour que les clients potentiels puissent nous contacter. Nous avons utilisé le formulaire de Netlify, qui s'est avéré n'être pas la meilleure option en raison des problèmes des formulaires avec Astro. Nous avons trouvé une solution (hot-fix) et créé une seule page pour notre formulaire de contact. Nous réfléchissons toujours à la manière de changer cela pour l’avenir.

Processus de développement

Avant de commencer la phase de développement, le chef de projet a créé un backlog produit avec des détails sur toutes les caractéristiques et fonctionnalités à construire par l'équipe. Ces témoignages d'utilisateurs ont rendu le processus de développement fluide et transparent. Avant de créer le site Web, l'équipe a dû prioriser les fonctionnalités qui feraient partie de la première livraison du site Web.

Pour le référentiel de code, nous avons utilisé GitHub (GH) et utilisé ses tableaux de gestion de projet et ses fonctionnalités de planification de sprint. GH est généralement notre choix pour le système de contrôle de version, mais nous avons commencé à utiliser Notion Projects et nous l'adorons pour la gestion de projet.

Nous avons commencé à mettre en œuvre les conceptions. Nous avons suivi la méthodologie agile et travaillé par sprints pour nous assurer que nous étions sur la bonne voie et que nous obtenions des résultats dans les délais fixés. Une petite remarque : il s'agissait d'un projet interne, et notre principale priorité était les projets de nos clients. Cela signifie que les sprints auraient lieu peu de temps après que notre équipe ait pris une pause dans d'autres projets. Ce n’est généralement pas ainsi que nous travaillons, mais c’est ainsi que nous avons géré cela et nous avons appris à ne pas répéter cette situation.

Un autre point critique pour rendre l’ensemble du processus de développement transparent et agile était d’avoir un lien de préparation dès le début du projet. Toutes les personnes impliquées dans le projet y avaient accès et nous pouvions voir les progrès réalisés, donner leur avis et apporter des changements et de petites adaptations lorsque nous le jugeions nécessaire.

Durant la phase de développement, l’équipe marketing a pu commencer à insérer du contenu. Cela les a aidés à s’habituer à la santé mentale et a contribué à des cycles de feedback plus réalistes. Dans l'ensemble, la phase de développement a été un effort de collaboration qui a impliqué toute l'équipe travaillant ensemble pour atteindre les objectifs du projet.

Assurance qualité

Pendant le développement, un ou deux développeurs ont testé chaque fonctionnalité et fonctionnalité. Tout le code a été révisé et, à la fin, nous avons effectué un sprint final pour tester et garantir que le site Web fonctionnait comme il se doit.

Les tests d'utilisabilité et d'accessibilité ont déjà été effectués lors de la phase de conception, comme décrit ci-dessus. Pour les tests généraux, nous avons utilisé les user stories et les critères d'acceptation créés par notre chef de projet pour nous guider.

• Tests fonctionnels : confirmez que toutes les fonctionnalités fonctionnent comme prévu.
• Test de performance : vérifiez la charge de vitesse et d’autres scores à l’aide de Lighthouse.
• Tests multi-navigateurs et multi-appareils : testez le site Web sur différents navigateurs Web (par exemple, Chrome, Firefox, Safari, Edge) et appareils (ordinateur de bureau, mobile, tablette) pour garantir la compatibilité et une expérience utilisateur cohérente. Pour cela, nous avons utilisé BrowserStack . Leur produit est très intuitif à utiliser et permet de nombreux tests.

Préparation de la mise en service

Nous étions tous prêts à rendre le site Web actif sur le lien intermédiaire, mais avant de procéder, deux éléments cruciaux devaient être soigneusement pris en compte : la redirection vers le nouveau domaine et le référencement. Puisque nous prévoyions de changer de domaine, il était crucial de s'assurer que notre classement SEO n'en pâtisse pas.

Par conséquent, nous avons décidé d’utiliser des redirections 301 pour informer les moteurs de recherche et les navigateurs que l’URL d’origine avait été remplacée définitivement par une nouvelle. Voici ce que nous avons fait :

• Liste de toutes les pages du site actuel :
• Si la structure de l'URL d'une page est restée la même, confirmez que la redirection 301 fonctionnait.
• Lorsque l'URL de l'ancienne page ne figure pas sur le nouveau site Web, créez une redirection vers la page la plus appropriée.
• Répertoriez les pages indexées dans Google pour vous assurer que nous avions des redirections en place pour chacune d'elles.
• Utilisez Netlify pour tout rediriger, en suivant les étapes de leur Documentation Netlify .
• Informer Google du changement sur la console Changement d'adresse outil.
• Demandez à Google de réindexer le nouveau domaine afin que les anciennes pages n'apparaissent pas. Cela a été fait directement dans la console Google, en suivant les étapes disponibles dans le Documentation de la console Google.

Enfin et surtout, nous avons pris le temps de nous assurer que nous avions pris en compte les meilleures pratiques pour un meilleur classement SEO et identifié ce qui devait être amélioré. L'équipe marketing s'est assurée de passer par les points suivants :

• Pour optimiser le nouveau site Web pour les mots-clés pertinents cherchant à se classer plus haut dans les résultats des moteurs de recherche et à attirer du trafic organique, nous effectuons ensuite une recherche par mot-clé à l'aide d'outils tels que Google Keyword Planner ou SEMrush pour découvrir des mots-clés populaires et moins compétitifs.
• Nous avons essayé autant que possible d'optimiser les balises méta-titre et les méta-descriptions sur chaque page Web, en incorporant des mots-clés pertinents et des appels à l'action convaincants pour inciter les utilisateurs à cliquer sur les pages de résultats des moteurs de recherche (SERP).
• S'assurer que les URL étaient claires, concises et incluaient des mots-clés ciblés
• Texte alternatif : fournissez un texte alternatif descriptif pour les images, en utilisant des mots-clés le cas échéant
• Confirmez l'optimisation de la vitesse de la page (avec la pile que nous avons utilisée, il était difficile de ne pas avoir un excellent résultat ici).

Résultat

Eh bien, ce fut un long voyage jusqu'à ce que notre site Web soit opérationnel. Mais devinez quoi ? Les travaux se sont poursuivis au-delà du lancement.

La première phase constituait une base solide pour ce que nous souhaitions réaliser. Le construire selon une approche modulaire nous a également donné la flexibilité nécessaire pour itérer, modifier et adapter le site Web aux nouvelles tendances et besoins. Nous sommes satisfaits du résultat et fiers de la façon dont nous sommes arrivés ici. Nous espérons qu'en partageant notre parcours, vous saurez à quoi vous attendre lors de la création ou de la refonte d'un nouveau site Web.

Pour résumer tout ce que nous avons partagé ici, nous avons préparé une petite aide-mémoire afin que vous puissiez l'utiliser sur votre projet.