ASDD28
L’ASDD28 est une association sportive à but non lucratif dont l’objectif est de développer la pratique des sports tout en suscitant des liens d'amitié avec ses membres.
Sujet du projet
En tant qu'UX/UI Designer, j'ai travaillé sur la refonte complète du site internet.
Lors de la phase d’exploration, j'ai identifié et adressé des besoins cruciaux en digitalisation, menant ainsi l'association à intégrer des solutions numériques stratégiques.
Analyse de l’association
Comprendre le fonctionnement de l’association commençait par mener une interview du vice-président pour avoir une lecture du modèle de l’association.
🤝 Partenaires clés
Régionaux : conseil régional, mairie,
Issus du commerce local : artisans, entreprises du sport, autres commerçants,
Financiers : banques et assurances.
⚡️ Activités clés
8 activités sportives, 1 jardin partagé,
3 événements annuels,
Événements occasionnels réservés aux adhérents,
Participation à des événements organisés par d’autres associations françaises.
💧 Ressources clés
Le staff composé de 12 membres
Les bénévoles,
Les coachs pour animer les activités sportives,
Les locaux et de matériels par la Mairie,
Fonds financiers,
Site internet, Page facebook,
🎁 Proposition de valeur
Développer la pratique des sports tout en suscitant des liens d'amitié avec ses membres.
💚 Soutien et adhésion
Organisation d’événements annuels ouverts au public,
Participation à des regroupements associatifs,
Soutien aux activités de la commune.
🚗 Déploiement
Partage d’informations via des posts de la page facebook de l’association,
Gestion des inscriptions du trail annuel par un site spécialisé dans les inscriptions.
🏃 Bénéficiaires
Membres de l’association,
Communauté locale,
Partenaires,
Le sport en général.
Évaluation du site web actuel
La refonte d’un site internet, commence par l’évaluation de la performance, de la conception et de son contenu.
C’est aussi l’occasion d’identifier si le chargement des pages est lent, s’il y a des liens brisés ou des contenus obsolètes.
Audit de performance
Conventionnellement cela débuterait par un audit de performance et une étude poussée de mots-clés.
Pour le site de l’ASDD28 cela ne s’y prêtait pas car il n’y avait pas de stratégie mise en place sur cet aspect.
Néanmoins, j’ai quand même souhaité réaliser quelques tests avec le moteur de recherche Google.
En saisissant les mots-clés tels que “ASDD”, “ASDD28”, “AS Droue-sur-drouette” ou “Association Droue-sur-Drouette”, le site “asdroue-drouette.fr” apparaissait rapidement dans les résultats.
Cela s’explique par le fait que la commune est un village de 1500 habitants et que l’activité du village n’engendre pas de concurrence directe, puisque l’association est la seule à proposer des activités sportives au sein du village.
Par ailleurs le site ne validait pas les protocoles SSL/TLS de sécurité mais cela n’impactait visiblement pas son référencement pour les raisons évoquées précédemment.
👉 Opportunités de performance
Mettre en place une stratégie SEO,
Assurer la conformité du certificat SSL/TSL.
Audit UX/UI
Ici je cherchais à évaluer le parcours utilisateur et l’interface utilisateur.
En arrivant sur la page d’accueil, on devine le header et le corps de la page en revanche le footer est inexistant.
Sur une évaluation approfondie de l’interface à partir des 10 principes généraux de conception d'interaction d'Akob Nielsen j’ai identifié les problèmes suivants :
Il n'y a pas d'indicateur clair des actions en cours ou de leur état (hover, bouton activé, bouton désactivé).
Le site utilise un assortiment de couleurs et de polices qui ne suit pas une convention standard.
Le site ne reflète pas une esthétique moderne.
Il n’y a pas de contrôle sur les informations qui sont affichées.
Le style des liens, des boutons et des sections est incohérent, ce qui peut prêter à confusion quant à ce qui est cliquable ou non.
L'agencement des éléments est aléatoire et peut conduire à des clics accidentels.
Les informations sont dispersées et il semble y avoir une surcharge d'informations, ce qui oblige les utilisateurs à retenir où se trouve chaque élément.
Il n'y a pas de raccourcis ou de personnalisation apparente pour les utilisateurs expérimentés.
Le site contient de nombreux éléments visuels et textuels qui sont non nécessaires et surchargent visuellement la page.
Il n’y a pas d'indications claires en cas d'erreur.
ll n'y a pas de raccourcis, section d'aide ou de documentation facilement accessible pour aider les utilisateurs à utiliser le site.
👉 Opportunités d’UX/UI
Améliorer la structure de l’information,
Créer un design attrayant en phase avec l’identité visuelle,
Créer une interface ergonomique qui répond aux besoins des utilisateurs,
Identifier les fonctionnalités essentielles à l’activité de l’association et aux besoins des utilisateurs.
Audit du contenu
L’association ne souhaitant pas mesurer le trafic, je me suis intéressé aux informations que je trouvais sur le site c’est-à-dire :
les activités : descriptif, horaires, actualités, photos,
l’histoire de l’association,
les membres du bureau,
les actualités de l’association,
les prochains événéments,
les informations de contact,
les partenaires,
le formulaire d’inscription à télécharger,
les mentions légales,
les comptes-rendus de réunion,
Quant à la fraîcheur des contenus, beaucoup n’étaient pas à jour.
👉 Opportunités de contenu
Affecter un responsable de la publication pour assurer d’avoir des contenus à jour,
Identifier toutes les informations relatives à la vie de l’association et aux exigences légales,
Hiérachiser les informations selon si elles sont essentielles ou secondaires,
Actualiser les informations si cela est nécessaire.
Recueil des retours utilisateurs
En identifiant puis interrogeant les utilisateurs, mon objectif était de les questionner sur leur expérience du site pour identifier leurs points de douleur.
Qui sont les utilisateurs ?
Dans le cadre de l’activité de l’association, les principaux utilisateurs sont les adhérents.
D’autres utilisateurs non représentatifs de la majorité ont été identifiés tels que les participants aux événements publics, les familles et amis des adhérents la communauté locale, les partenaires et sponsors, les autorités locales et organismes réglementaires, les fournisseurs et prestataires de services, les médias et les journalistes.
Qu’est-ce qui caractérise les adhérents ?
Au sein de l’ASDD28, il y en moyenne 120 adhérents chaque année, constitué à 56% d’hommes et 44% de femmes.
La tranche d’âge la plus représentative est celle de 40 à 59 ans.
Des interviews basées sur 8 thèmes
Pour faire être précis dans la démarche, j’ai choisi de réaliser 5 interviews basées sur 8 thèmes qui couvraient leurs expériences d’utilisateur, le design de l’interface, le contenu et leurs expériences sur d’autres sites web.
👉 Les points de douleurs
Difficulté dans l’accessibilité aux informations,
Un design de l’interface qui manque de modernité.
Le contenu n’est pas systématiquement mis à jour.
Diifficulté de mémoriser le nom du site web.
Problèmes
Utilisateurs
Les adhérents ont besoin d’un site web au design moderne contenant des informations à jour sur les activités sportives car l’accessibilité et la pertinence des informations sont cruciales pour une expérience utilisateur positive et engageante.
L’association
L’ASDD28 a besoin de refondre son site web pour améliorer la sécurité, la navigation et le design de l’interface car ces lacunes pénalisent son attractivité et son efficacité à communiquer.
Analyse de la concurrence
L’objectif de cette étape est d’identifier localement les associations qui proposent des activités sportives puis de s’intéresser à l’UX et l’UI de leur site web.
Qui est concerné ?
La seule association qui regroupe plusieurs activités sportives, est l’Association Sportive et Culturelle de Hanches, située à environ 7km de la commune de Droue-sur-Drouette.
Les deux associations, ASCH et ASDD8, proposent chacune 8 activités dont 2 identiques : la marche nordique et le renforcement musculaire. La concurrence sur les activités est donc très faible.
Qu’en est-il de l’interface de l’ASCH ?
le site indique aux utilisateurs où ils se trouvent,
le site utilise des termes familiers comme "Accueil", "Les actus", et “Sections” pour désigner les activités sportives sports, ce qui correspond aux standards de site web,
Les utilisateurs ont un contrôle sur la navigation avec des éléments de menu clairs,
Le site suit les conventions web standards avec un menu de navigation en haut. En revanche, les pages des sections ne sont pas toutes cohérentes dans la structure et leur design,
La structure simple de la navigation minimise les erreurs de l’utilisateur,
Le site facilite la reconnaissance avec des étiquettes et des menus clairs. Les utilisateurs n'ont pas besoin de se souvenir d'informations pour naviguer.
Le site est conçu davantage pour les utilisateurs novices avec une navigation simple, et manque de raccourcis ou de fonctionnalités avancées pour les utilisateurs experts.
Le design est minimaliste sans informations excessives,
Le site manque d'une section d'aide dédiée tels que “Liens utiles” “FAQ”. Les utilisateurs s'appuient principalement sur le menu de navigation pour obtenir des informations.
Dans l'ensemble, le site web de l'ASCH est simple et convivial, en particulier pour les nouveaux visiteurs. Il pourrait s'améliorer en ajoutant de la documentation d'aide, et en renforçant la cohérence et les standards sur différentes pages.
👉 Inspirations
Convivialité,
Design minimaliste.
Les choix technologiques
Comment j’ai accompagné l’association à choisir son CMS ?
En interrogeant les membres du bureau sur leur façon de communiquer aujourd’hui, leur objectif et les ressources disponibles, cela a permis de définir un outil adapté à leurs besoins.
Ci-dessous quelques exemples de questions :
Pourriez-vous me parler de vos outils de communication et des façons dont vous les utilisez ?
Pourriez-vous me parler des types de contenu que vous partagez ? Et leur fréquence de publication ?
Que cherchez-vous à obtenir à travers vos partages ?
Pourriez-vous m’en dire plus sur la personne qui sera chargée d’animer le site, son aisance dans un environnement numérique ? A-t-elle déjà utilisé un CMS ? Combien de temps envisage-t-elle accorder ?
👉 Pourquoi avoir retenu Squarespace ?
Un outil simple et facile d'utilisation pour des novices du web. Le site sera en effet animer par des intervenants n'étant pas à l'aise dans un environnement numérique.
L'association a besoin d'un site vitrine avec un espace dédié à des annonces brèves concernant : les dates d’inscriptions, leur participation à des forums associatifs et à des rassemblements sportifs locaux. Squarespace permettait de répondre simplement à cette demande.
De plus, Squarespace permet de gérer facilement une liste de diffusion à travers les blocs de Newsletter et de formulaire de contact sans frais supplémentaires à l’abonnement.
Pourquoi avoir choisi d’externaliser les inscriptions en ligne avec HelloAsso ?
La raison première, c’est le budget. Bien que Squarespace propose une fonctionnalité permettant de réaliser des transactions, des frais sont appliqués.
Ce qui n’est pas le cas d’Helloasso puisque sa mission est d’accompagner les associations à se développer en proposant un service gratuit de gestion d’adhésion, d’inscriptions, d’achat de billets, etc. Son fonctionnement est basé sur des contributions volontaires des associations ou des particuliers au moment des transactions.
Cette solution s’y prêtait parfaitement puisqu’elle minimise les coûts de développement d’une inscritpion en ligne tout en assurant des transactions sécurisées pour les utilisateurs.
Centralisation et sécurisation des données
Pour répondre aux besoins de l’association et aux exigences légales en matière de protection des données (RPGD), avoir un espace sécurisé pour centraliser les informations était devenu nécessaire.
Ainsi j’ai accompagné l’association dans la création et la configuration d’un espace de travail collaboratif "Google Workspace” pour y répondre :
Demande d’ouverture du compte associatif auprès de Google,
Définition des comptes utilisateurs,
Activation des boîtes aux lettres personnelles, collaboratives et des alias,
Définition de l'arborescence du Drive partagé et des niveaux d'accès,
Création de modèles : newsletters, lettre d'information,
Mise en place d'une API entre HelloAsso et Google pour la centralisation des données.
Vue d’ensemble de l’environnement applicatif de l’ASDD28
Conception du nouveau site
Site map
Conception des pages du site
Cela représente 13 pages dont 4 principales, 3 secondaires, 4 fonctionnelles et 2 de contenu.
Ci-dessous la structure de la page d’accueil.
Choix typographique, couleurs et accessibilité
Actualisation du logo
Intégration du site dans l’environnement applicatif
Tests et ajustements
Les tests portaient sur les 3 nouveaux outils mis en place : Squarespace, Helloasso et Google Workspace.
L’objectif était d’assurer que tous ces outils fonctionnent pour la nouvelle saison.
Qu’est-ce qui a été testé ?
Pour le site, plusieurs scénarios ont été réalisés selon :
si l’utilisateur connait ou non l’association,
si l’utilisateur connaît déjà les activités,
le device (desktop, mobile),
le navigateur (chrome, firefox, opera, safari).
Pour les utilisateurs qui envisageaient de s’inscrire en ligne, le formulaire Helloasso a été testé selon si l’utilisateur envisageait l’inscription à une ou plusieurs activités avec des modes de paiement différents.
Quant à l’espace de travail, j’avais réalisé des tests de paramétrage en amont avec un des membres du bureau notamment sur l’accès au compte personnel, les tests des adresses mails et les droits d’accès aux dossiers partagés.
👉 Résultats des tests
Retours positifs des adhérents sur le site,
Ajustements de l’interface du site pour la version mobile,
Finalisation du formulaire Helloasso en phase avec le processus d’inscription de l’association,
Ajustements des droits d’accès de l’espace de travail collaboratif
Livraison du site et accompagnement des membres du bureau
La dernière ligne droite avant l’ouverture du site au public était dédiée à la prise en main des outils par les membres du bureau.
Pour cela, j’ai organisé plusieurs séances de formation dont certaines plus spécifiques pour les membres chargés de la communication, de la trésorerie, et du secrétariat.
En complément, j’ai créé des guides détaillés pour que les membres puissent à tout moment s’appuyer dessus.
👉 En résumé
Formations de prise en main des nouveaux outils (Squarespace, Helloasso, GoogleWorkspace),
Création de guides complets,
Création de templates,
Préconisations sur le contenu du site,
Accompagnement de l’association sur la conformité du site (Mentions légales, CGU, Potlitique de confidentialité).
Suivi post-lancement
Les 3 premiers mois, je me suis assuré que la prise en main des outils se passait bien et j’accompagnais ponctuellement les membres du bureau sur certaines tâches.
C’était aussi l’occasion de recueillir d’autres retours d’utilisateurs qui étaient positifs.
Aujourd’hui l’association compte un peu plus de 10% d’inscrits à ses activités sportives par rapport à l’année passée.
Un bilan personnel enrichissant
Le principal challenge était dans les échanges avec les membres du bureau, en particulier sur la terminologie technique.
En effet, plus de la majorité des personnes n’est pas à l’aise dans un environnement numérique.
Un travail de vulgarisation était donc nécessaire pour avancer ensemble et minimiser les risques liés à l’adoption de nouveaux outils.
Au-délà de mon rôle principal qui était celui d’UX/UI Designer, cette expérience m’a permis d’apprendre beaucoup de choses notamment de :
M’initier à l’administration et la gestion de services informatiques avec Google Workspace,
Découvrir des outils low-code qui me serviront dans d’autres contextes,
Comprendre ce qu’est le SEO et d’être capable demain de converser avec des équipes marketing et produit sur le sujet.
Merci à l’ASDD28 de m’avoir fait confiance ! 🙌