BOUCHONS 276 : l’avant/après d’une refonte complète

Étude de cas

BOUCHONS 276, c’est une association normande qui collecte vos bouchons en plastique depuis 2003 pour financer du matériel et des aides aux personnes en situation de handicap. 75 bénévoles, aucun salarié, près d’un million d’euros reversés. Une asso qui me tient à cœur. Son site, lui, n’était plus du tout à la hauteur. Voici l’histoire de sa refonte.

Le point de départ : vingt ans d’ajouts successifs

Le site de BOUCHONS 276 n’était pas « mauvais ». Il avait juste vécu. Chaque année, quelqu’un ajoutait une page, une bannière, un widget. Le résultat ressemblait à un grenier : tout y était, mais il fallait chercher.

Quand je l’ai ouvert pour la première fois côté administration, j’ai trouvé trois constructeurs de pages différents empilés les uns sur les autres (Elementor, SiteOrigin et Beaver Builder), un menu à douze entrées en majuscules, une colonne latérale remplie de fils Facebook, Twitter et Bluesky, et des compteurs animés qui affichaient… zéro, à cause d’un bug, alors que les chiffres étaient bien saisis. Sans parler de petites incohérences, comme l’adresse d’un dépôt qui changeait d’une page à l’autre.

Le plus gênant, c’est qu’un visiteur qui arrivait avec une question simple (« où est-ce que je dépose mes bouchons ? ») devait fouiller pour trouver la réponse.

Avant de toucher au site, j’ai posé des questions

Je n’ai pas commencé par tout casser. Les premières semaines, j’ai fait des retouches sur le site existant, notamment pour mettre en avant la nouvelle boutique en ligne de l’association. Ça m’a permis de comprendre comment l’asso fonctionnait, ce que Dab, son président-fondateur, attendait vraiment, et ce qui comptait pour lui. Les vidéos, par exemple : il y tenait beaucoup, elles sont restées.

J’ai ensuite travaillé la nouvelle page d’accueil sous forme de maquettes interactives, cliquables, que Dab pouvait tester tranquillement et commenter. On a fait beaucoup d’allers-retours, parfois sur des détails (un espacement, un point d’exclamation mal placé), parfois sur le fond. Une de ses demandes m’a marqué : il voulait qu’on comprenne bien que BOUCHONS 276 est une association régionale, pas une grosse structure nationale. On lui a donc consacré une section et une citation dédiées.

Une refonte complète, page par page

Une fois la page d’accueil validée, on a pris une décision importante : repartir sur des bases saines plutôt que de rafistoler. Les 13 pages du site ont été entièrement reconstruites avec le thème Ollie et l’éditeur natif de WordPress (Gutenberg). Les anciens constructeurs de pages et les extensions inutiles sont partis. Le site est plus léger, plus rapide, et surtout bien plus simple à maintenir.

La charte graphique reprend le rose et le violet du logo, mais en plus moderne et plus lisible. Quelques animations donnent un peu de vie sans en faire trop : des bouchons qui tombent, des compteurs qui défilent, un halo sur la bannière de la boutique. J’ai aussi fait attention aux détails qui ne se voient pas mais qui comptent, comme l’accessibilité, les contrastes ou les espaces insécables devant la ponctuation.

Une navigation pensée pour les vraies questions

J’ai réorganisé le site autour de ce que les visiteurs viennent chercher. Il y a ceux qui veulent déposer leurs bouchons, ceux qui ont besoin d’une aide, ceux qui veulent s’impliquer ou acheter un goodies pour soutenir l’action. Chacun a maintenant son chemin, dès la page d’accueil.

• Un menu ramené à sept rubriques : L’association, Collecter, Les aides, Agenda, Boutique, Actus, Contact.
• Un bouton toujours visible « Où déposer mes bouchons ? », parce que c’est de loin la question la plus fréquente.
• Un en-tête fixe et un vrai menu mobile, la majorité des visiteurs arrivant depuis leur téléphone.
• Deux appels à l’action dès l’accueil : « Je dépose mes bouchons » et « Demander une aide ».

Dans les coulisses : un site que l’asso peut faire vivre

C’est la partie dont je suis le plus fier, et pourtant c’est celle qu’on ne voit pas. Avant, les aides versées et les événements étaient tapés à la main dans de longues pages. Une erreur de mise en forme, et tout se décalait.

Aujourd’hui, chaque aide et chaque événement a sa propre fiche dans l’administration, avec un formulaire simple à remplir. Le site se charge ensuite de tout : tri par date, filtres, mise en page. J’ai importé les 566 aides historiques de l’association, et je les ai recoupées avec les totaux officiels pour m’assurer que les chiffres affichés collent à la réalité. Les bénévoles peuvent maintenant mettre le site à jour sans craindre de tout casser.

SEO, statistiques et RGPD : les fondations

Un beau site que personne ne trouve ne sert pas à grand-chose. J’ai donc installé et configuré Yoast SEO, et mis en place des redirections 301 pour que les anciennes adresses mènent aux nouvelles pages. Les liens déjà partagés sur Facebook ou dans la presse continuent ainsi de fonctionner, et le référencement acquis au fil des années n’est pas perdu.

Côté statistiques, Google Analytics est en place, mais il ne se déclenche qu’après l’accord du visiteur. Ça paraît évident, et pourtant ça m’a demandé un vrai travail d’enquête : l’extension de cookies laissait passer Google par défaut. C’est typiquement le genre de détail qu’on ne voit jamais sur une maquette, mais qui fait la différence entre un site conforme et un site qui ne l’est qu’en apparence. J’en parle plus en détail sur ma page tracking et analytics.

Une mise en ligne sans stress

Avant la bascule, j’ai créé une page de recette pour que Dab puisse tout vérifier à son rythme. Ses retours arrivaient par mail, avec ses corrections de fond : l’adresse exacte du dépôt du Havre, deux points de collecte fermés à retirer, le statut d’Alexis Hanquinquant à préciser (champion paralympique, pas olympique), une seule adresse mail pour recevoir les messages du formulaire. Personne ne connaît mieux l’asso que lui, et ces corrections-là, aucun outil ne les aurait trouvées.

La mise en ligne s’est faite d’un coup, avec une sauvegarde automatique prête à prendre le relais en cas de problème. Elle n’a pas servi, tant mieux.

Ce que je retiens de ce projet

Ce projet résume assez bien ma façon de voir le web. Le nouveau visuel, c’est ce qu’on remarque en premier. Mais ce qui change vraiment la vie de l’association, c’est une structure claire, des contenus faciles à mettre à jour, un site qui respecte ses visiteurs et qui peut être trouvé.

Et puis il y a quelque chose de particulier à travailler pour une asso comme celle-ci. Derrière chaque chiffre affiché en grand sur la page d’accueil, il y a des fauteuils, des équipements adaptés, des personnes qui gagnent un peu d’autonomie. Si le site aide ne serait-ce qu’à collecter quelques tonnes de bouchons de plus, il aura rempli sa mission. Alors n’hésitez pas : allez voir le nouveau site, et gardez vos bouchons !