Introduction
2011
En 2011, le nouveau site internet de Neuchâtel Xamax (www.xamax.ch) a été créé après neuf mois de travail acharné. Le directeur de Pro’Imax (responsable du marketing de Neuchâtel Xamax), Alexandre Rey, a confié le défi à la société Option-Web.ch au milieu de l’année 2010.
Le site internet a permis au club de la Maladière de disposer enfin d’un outil à même de répondre aux attentes de ses supporters. Les deux concepteurs, moi-même et Noël Jobé, avons travaillé entre 800 et 1000 heures pour réaliser le site et son CMS sur-mesure. Les nouveautés incluaient notamment un commentaire en direct pour chaque match (live-ticker), des statistiques des joueurs mises à jour dès le coup de sifflet final de chaque match, une section archives, un historique du club détaillé, une rubrique « légendes » où l’on peut visionner des images de joueurs emblématiques, une fanzone, une newsletter, un concours de pronostic pour chaque match et une élection du joueur du mois.
Le site était plus accessible et complet que le précédent, tout en étant tourné vers l’avenir avec l’ouverture de pages Facebook et Twitter.
2021
Dix ans plus tard, en novembre 2021, Neuchâtel Xamax a présenté son nouveau site Internet, créé en collaboration avec ses partenaires, sous ma direction en tant que chef de projet web. L’accent a été mis sur l’utilisation mobile, qui représente aujourd’hui près de 70% de l’audience.
Le design épuré et moderne a été pensé pour offrir aux internautes et mobinautes un accès plus facile à l’actualité quotidienne du club.
Le nouveau site internet reflète la vision et la stratégie de Neuchâtel Xamax pour l’avenir.
Evolution des sites de Neuchâtel Xamax
2006 - 2011
2011 - 2021
2021 - aujourd'hui
Déroulement du projet
Audit
Tout d’abord, nous avons rassemblé les commentaires et feedbacks des utilisateurs pour déterminer leurs besoins et problèmes avec le site. Des éléments que vous avez mentionnés, tels que le faible pourcentage d’articles achetés sur l’e-shop (24%), les canaux les plus utilisés pour s’informer de l’actualité du club et la nécessité de varier le contenu pour chaque plateforme, ont retenu notre attention.
Ensuite, nous avons effectué une analyse complète du site, y compris son design, sa navigation, ses fonctionnalités et ses performances.
Enfin, nous avons recommandé des solutions pour améliorer le site en fonction des résultats de notre analyse et des besoins des utilisateurs.
En résumé, pour auditer le site de 2011 pour Neuchâtel Xamax, nous avons rassemblé les commentaires et feedbacks des utilisateurs, effectué une analyse complète du site, étudié les statistiques et recommandé des solutions pour améliorer le site en fonction des besoins des utilisateurs.
Problèmatique
La problématique principale du site web de 2011 était son obsolescence, notamment en matière de responsivité. En effet, le développement sur mesure du CMS ne permettait pas de le faire évoluer facilement sans risquer des incompatibilités et des bugs. De plus, après dix ans d’ajouts de fonctions, le site était devenu lourd et complexe à gérer en termes de styles, de CSS et de jQuery. De plus, la programmation PHP sur mesure rendait la mise à jour et la modification du site difficiles, voire impossibles.
Aussi, Le manque de modernité dans le design, une page « splash » en page d’accueil et la présentation des contenus, qui pouvait donner une image vieillotte du club et ne pas attirer les nouveaux supporters.
De plus, nous n’avions pas la possibilité de créer de landing page pour notre campagne de vente d’abonnement de saison. En effet, le site actuel était compliqué à modifier pour obtenir une landing page efficace. Cette difficulté entravait notre capacité à atteindre notre objectif d’augmenter le nombre d’abonnés pour la saison à venir.
Objectifs
- Augmenter la part de visiteurs Mobile
Taux actuel : 58.51 % (source Google Analytics) - Diminuer leur taux de rebond des visiteurs Mobile
Taux actuel : 52.11 % )(source Google Analytics
- Augmenter le pourcentage de ventes de billets en ligne
Taux actuel : 25 %(source Ticketcorner) - Augmenter la visibilité de nos produits
Taux actuel : 30% de vente en ligne
Cahier des charges
Le cahier des charges du site web de Neuchâtel Xamax destinait à guider la rénovation et la modernisation du site web, pour en faire la plateforme principale conduisant vers toutes les plateformes d’achat du club. Le site devait devenir le média de référence pour les fans et les sponsors, et fidéliser davantage les fans en offrant de nouveaux produits et visibilités à nos sponsors.
Le nouveau site devait respecter la charte graphique de Xamax, être personnalisable, avoir des emplacements pour les bannières publicitaires, afficher les logos des sponsors de manière fixe, être disponible en au moins deux langues (FR / ALL) et être accessible à tous, y compris les handicapés et les malvoyants.
Il devait également être rapide, léger, intuitif, attractif, respecter les us et coutumes en termes de navigation et d’emplacement, avec un menu « always on top » ou accessible en tout temps, des liens vers les réseaux sociaux accessibles depuis n’importe quelle page, et ne pas charger les pages avec trop d’informations ou d’éléments.
Les prestations attendues comprenaient le design, le développement, l’intégration, la migration du site sur un nouveau serveur, ainsi que la maintenance et les mises à jour, qui étaient effectuées par le partenaire développeur. Le plan marketing, SEO et SEA était à réaliser par Xamax.
Le planning prévoyait une charte graphique et un design pour le micro-site pour avril 2019 à l’adresse abo.xamax.ch.
Ensuite, la validation de l’UI/UX du site complet pour décembre 2020. Le démarrage de l’intégration/programmation pour mars 2020, et la présentation des premières maquettes pour septembre 2020.
Design
Le design du nouveau site devait respecter la charte graphique de Xamax (rouge, noir et blanc), être customisable en tout temps, avoir des emplacements pour les bannières publicitaires, les logos des sponsors en bas de page de manière fixe, au moins deux langues (FR / ALL) et la possibilité d’en ajouter, pas de splash page comme le site actuel.
Wireframe du microsite abonnement
Le premier wireframe conçu sur Adobe XD par notre partenaire en collaboration avec nos inputs est un design prometteur qui répond parfaitement à nos besoins en termes de fonctionnalités et d’esthétique.
Wireframe du site web
Puis, les wireframes basés sur nos inputs offrent une structure claire et intuitive pour le site complet, en accord avec nos objectifs et notre image de marque. Quelques changement notoires feront toutefois l’objet d’une dizaine d’itérations et d’échanges avec l’agence.
Maquettes
Après avoir réalisé les wireframes, le partenaire a créé les maquettes sur Adobe XD pour le nouveau site internet de Neuchâtel Xamax. Cette étape a été cruciale pour la réalisation du projet, car elle nous a permis de visualiser le design du site dans son ensemble avant sa mise en production.
J’ai été impliqué dans le processus de création des maquettes dès le début, ce qui m’a permis de donner mon avis sur le design et de proposer des modifications ou des corrections directement sur le fichier. Cette collaboration étroite entre le partenaire et moi-même a permis d’optimiser le temps de production et d’assurer que le design final était conforme aux besoins et aux objectifs de Neuchâtel Xamax.
Grâce aux maquettes, nous avons pu avoir une idée précise de l’apparence et de la convivialité du site avant même qu’il soit codé. Nous avons pu également nous concentrer sur les détails du design pour garantir que le site reflète l’image de marque de Neuchâtel Xamax de manière cohérente.
Grâce à notre collaboration étroite, nous avons pu garantir que le design final était optimal et en accord avec les objectifs du club.
Gestion de projet
J’ai donc eu la responsabilité de gérer et coordonner les équipes de développement et de design du nouveau site internet. Après avoir travaillé avec le partenaire pour la partie graphique et c’est un autre partenaire qui s’est occupé du développement, en utilisant WordPress pour l’intégration du design et en travaillant sur l’implémentation de l’API de la SFL (Swiss Football League) pour récupérer les informations des joueurs, des matches et du classement, entre autres.
Malgré les défis causés par la pandémie de COVID-19, nous avons travaillé pendant plus d’une année pour finaliser le site xamax.ch. Nous avons également dû adapter l’application du club, car celle-ci était basée sur des fichiers XML qu’il a fallu remplacer. Nous sommes constamment en train d’adapter et d’améliorer le site en fonction des retours des utilisateurs. Par exemple, nous avons découvert qu’il était nécessaire de mieux indiquer lorsqu’un match était en cours sur la page d’accueil, ou encore que certaines parties de la navigation pouvaient être simplifiées.
Mon rôle a été de coordonner les différentes ressources, de créer le cahier des charges et de suivre continuellement les retours et les feedbacks pour faire évoluer le site de manière continue. Nous avons travaillé en étroite collaboration avec les partenaires pour garantir que tous les aspects du site étaient en accord avec les besoins et les objectifs de Neuchâtel Xamax.
Budget
Pour le suivi du budget de la réalisation du site web, plusieurs éléments ont été pris en compte. Tout d’abord, il est important de souligner que le budget a été élaboré en fonction du temps et des ressources allouées plutôt que des dépenses financières directes. Ainsi, le partenaire développement a été rémunéré en fonction du nombre de jours/homme (JH) par an.
Le suivi du budget a été effectué tout au long du projet en veillant à ce que les ressources allouées soient utilisées efficacement et de manière efficiente. Il comprenait également des discussions régulières entre l’équipe de projet et les partenaires impliqués afin de garantir que les coûts restent dans les limites établies et que le projet reste dans les délais impartis. Tout écart par rapport au budget prévu a été examiné en détail et des mesures correctives ont été prises si nécessaire.
En fin de compte, la réalisation du site web a été considérée comme un succès sur le plan budgétaire pour Neuchâtel Xamax, car elle n’a pratiquement rien coûté. Le renouvellement du contrat avec les partenaires en juillet 2022 témoigne du succès de la collaboration avec toutes les parties impliquées.
Fonctions principales du site
Actualités
La fonction « Actualités » du site xamax.ch permet de rester informé des dernières nouvelles et mises à jour sur le club, les joueurs, les matchs à venir, etc. Les actualités sont régulièrement mises à jour.
Matchcenter
Le Matchcenter est une fonctionnalité essentielle du site. Il se compose de plusieurs sous-fonctions :
- Commentaire en direct (live ticker)
- Informations sur les matches
- Statistiques de la rencontre et des rencontres précédentes
- Formations des équipes
- Calendrier et résultats des matches
- Billetterie
Membres de l’équipe et du staff
La section « Membres de l’équipe et du staff » vous permet de connaître les joueurs et les membres du personnel de Neuchâtel Xamax. Vous pouvez y trouver des informations sur les joueurs, leurs statistiques, leurs performances passées, ainsi que des photos et des profils détaillés. Vous pouvez également y trouver des informations sur les membres du personnel, y compris les entraîneurs, les responsables du marketing, etc.
Classement
La fonctionnalité de classement vous permet de voir où se situe
Neuchâtel Xamax dans le classement de la ligue. Vous pouvez y trouver des informations sur les autres équipes, leurs scores, leur position dans le classement, etc. Cette fonctionnalité permet de suivre la progression de Neuchâtel Xamax tout au long de la saison.
Multiples layout de pages informatives, formulaires, etc
Le site xamax.ch offre également une variété de mises en page pour les pages d’informations, les formulaires, etc. Cela permet une présentation claire et concise de l’information pour les visiteurs du site. Les formulaires peuvent être utilisés pour la soumission de demandes spécifiques, l’inscription pour les événements, la prise de contact avec le club, etc.
KPI
Voici les différents KPI entre le site xamax.ch de 2011 et celui de 2021, en se basant sur les données de la période du 1er janvier 2022 au 30 juin 2022 pour le nouveau site de 2021 et du 1er janvier 2021 au 30 juin 2021 pour l’ancien site de 2011 :
Pour toutes les plateformes :
- Utilisateurs : en baisse de 5,09%
- Nouveaux utilisateurs : en baisse de 2,99%
- Sessions : en hausse de 1,04%
- Nombre de sessions par utilisateur : en hausse de 6,45%
- Pages vues : en hausse de 8,5%
- Pages par session : en hausse de 7,38%
- Durée moyenne des sessions : en baisse de 23,2%
- Taux de rebond : en baisse de 3,74%
En ce qui concerne la recherche naturelle, il y a eu une augmentation de 3,89% de nouveaux utilisateurs.
Pour les utilisateurs mobiles :
- Utilisateurs : en hausse de 3,22%
- Nouveaux utilisateurs : en hausse de 4,8%
- Sessions : en hausse de 14,51%
- Pages par session : en hausse de 20,5%
- Durée moyenne des sessions : en baisse de 32,51%
- Taux de rebond : en baisse de 17,3%
Ces chiffres montrent une amélioration globale du nouveau site web de Neuchâtel Xamax, en particulier pour les utilisateurs mobiles qui ont enregistré une augmentation significative dans tous les domaines mesurés. Cependant, il y a eu une baisse des utilisateurs et des nouveaux utilisateurs sur toutes les plateformes, certainement due aux résultats mitigés du club.
La durée moyenne des sessions a également diminué, mais cela peut s’expliquer par une meilleure navigation sur le site. Enfin, le taux de rebond a diminué, ce qui est une bonne nouvelle car cela signifie que les utilisateurs restent plus longtemps sur le site.
Résultats
- Augmenter la part de visiteurs Mobile
70,92 % au lieu de 58.51 % = + 12.41% - Diminuer leur taux de rebond des visiteurs Mobile
43,34% au lieu de 52.11 % = -8.77%
- Augmenter le pourcentage de ventes de billets en ligne
50% au lieu de 25 % = +25% - Augmenter la visibilité de nos produits
50% au lieu de 25 % = +30%
A propos de cette expérience professionnelle
Mon rôle
Structure
Je suis chef de projet web pour la création du dernier site web de Neuchâtel Xamax et pour sa maintenance actuelle. Durant le développement du site mon rôle était de superviser la collaboration entre les agences de communication et le développeur informatique afin de créer un site moderne et responsive qui reflète la vision et la stratégie de Neuchâtel Xamax pour l’avenir.
Missions
Mes missions comprenaient :
- la gestion du projet,
- la définition des objectifs et des besoins des utilisateurs, ainsi que
- la recommandation de solutions pour améliorer le site en fonction des résultats de notre analyse.
Organisation interne
Mon organisation interne se composait d’une équipe incluant le responsable Presse, notre Archiviste et nos collaborateurs du département Marketing, avec moi-même en tant que chef de projet web, en charge de la supervision et de la coordination de toutes les activités liées au projet. Les agences de communication étaient responsables de la conception du site, tandis que le partenaire programmeur était chargé du développement informatique. Nous avons travaillé ensemble en étroite collaboration pour assurer le succès du projet.
Environnement économique
En ce qui concerne l’environnement économique et institutionnel, Neuchâtel Xamax a travaillé en ses partenaires pour la création du site web. Nous avons également travaillé en étroite collaboration avec des sponsors et des supporters du club pour garantir que le nouveau site reflète l’image et les valeurs de Neuchâtel Xamax.
Position dans la structure
En tant que chef de projet web, j’étais responsable de la stratégie, de la coordination et de la supervision de toutes les activités liées à la création du site. Mes principales fonctions comprenaient la gestion du projet, la définition des objectifs et des besoins des utilisateurs, la coordination avec les agences de communication et les développeurs informatiques, ainsi que la recommandation de solutions pour améliorer le site en fonction des résultats de notre analyse.
Depuis le début en 2012 années, mes fonctions incluent la responsabilité de la définition de la stratégie de marketing digital de Neuchâtel Xamax, ainsi que la gestion de projets liés à la présence en ligne du club. J’exerce également des fonctions d’encadrement pour l’équipe de marketing numérique et de la stratégie du club de Neuchâtel Xamax. Je suis aussi impliqué dans la gestion des budgets et la validation des dépenses.
Principaux interlocuteurs
Mes principaux interlocuteurs au sein de la structure sont les agences de communication et les développeurs informatiques avec lesquels nous avons travaillé pour la création du site, ainsi que l’équipe de marketing de Neuchâtel Xamax. J’entretiens des relations étroites avec tous ces interlocuteurs pour garantir que les projets sont achevés dans les délais et selon les spécifications requises.
Responsables
Enfin, en tant que ancien Vice-Président et actionnaire principal du club jusqu’en 2020, puis membre du conseil d’administration, j’ai officié en tant que chef de projet web, dont je suis responsable de la définition, du contrôle et de l’évaluation de mon activité. J’ai donc une grande marge d’initiative et d’autonomie pour mener à bien les projets que j’exécute.
Méthodologie
La méthode et l’organisation choisie :
- Rassembler les commentaires et feedbacks des utilisateurs
- Effectuer une analyse complète du site, tant sur sa performance que sur sa technologie
- Étudier les statistiques
- Recommander des solutions pour améliorer le site en fonction des besoins des utilisateurs
Les moyens et les ressources mobilisées :
- Les agences de communication et le développeur informatique
- Implication de mes collègues Archivistes, Spécialiste, Assistant Marketing et Chef de Presse pour la création de contenu
- Implication du Président et des responsables administratifs pour la validation
Les relations internes et externes établies :
- Collaboration avec les agences de communication et le développeur informatique
- Implication de mes collègues Archivistes, Spécialiste, Assistant Marketing, Chef de Presse et moi-même pour la création de contenu
- Implication du Président et des responsables administratifs pour la validation
Les contraintes prises en compte :
- L’obsolescence du site web de 2011, notamment en matière de responsivité
- Le développement sur mesure du CMS ne permettait pas de le faire évoluer facilement sans risquer des incompatibilités et des bugs
- Le site était devenu lourd et complexe à gérer en termes de styles, de CSS et de jQuery
- La programmation PHP sur mesure rendait la mise à jour et la modification du site difficiles, voire impossibles
- La difficulté de créer une landing page efficace pour la campagne de vente d’abonnement de saison
Les objectifs poursuivis et les résultats obtenus :
- Améliorer le site en fonction des besoins des utilisateurs
- Moderniser le site web de Neuchâtel Xamax
- Augmenter le nombre d’abonnés pour la saison à venir
- Fidéliser davantage les fans en offrant de nouveaux produits et visibilités à nos sponsors
- Le nouveau site internet reflète la vision et la stratégie de Neuchâtel Xamax pour l’avenir.
Les activités ou tâches réalisées :
- Auditer le site de 2011 pour Neuchâtel Xamax
- Élaborer un cahier des charges pour la rénovation et la modernisation du site web
- Suivi du design, développement, intégration, migration du site sur un nouveau serveur
- Maintenance et mises à jour du site web
Les réalisations :
- Nouveau site Internet de Neuchâtel Xamax
- Landing page abonnement
Les difficultés rencontrées et les solutions apportées :
1. Obsolescence du site web de 2011, complexité de la gestion, difficulté de créer une landing page efficace
Solutions apportées : modernisation du site, respect des besoins des utilisateurs, respect de la charte graphique de Xamax, disponibilité en deux langues, accès aux handicapés et aux malvoyants, rapidité, légèreté, attractivité, respect des us et coutumes en termes de navigation et d’emplacement
2. Epidémie de COVID-19 et retards liés aux absences et aux différentes périodes de confinement
Solutions apportées : mise en place de suivi réguliers via Microsoft Teams ou Google Meet. Réajustement du planning sur Monday.com
