Octobre Rose : 100 panneaux, un site qui compte tout seul
Pour l'opération Octobre Rose de Paca Renovation Extension, on a conçu et codé de A à Z un site qui reçoit les demandes des habitants, affiche chaque panneau posé sur une carte, et calcule en direct les dons reversés à SOS Cancer du Sein. Genèse, conception, front, backoffice, mises à jour : on vous raconte tout.
01 · LA GENÈSEUne idée simple : un panneau, cinq euros
Paca Renovation Extension rénove des maisons toute l'année à Villeneuve-Loubet : toitures, façades, agrandissements. En octobre, l'entreprise a voulu utiliser ce qu'elle sait faire, poser, fixer, installer, pour une autre cause.
Le principe tient en une ligne : l'équipe installe gratuitement un panneau rose sur le balcon, le portail ou la clôture des habitants qui le demandent, et reverse 5 € par panneau posé à SOS Cancer du Sein, une association niçoise qui accompagne les femmes touchées par la maladie.
Sur l'affiche, un QR code. Il fallait un endroit où l'envoyer.
02 · LE BRIEFLe vrai défi, ce n'est pas la page, c'est la logistique
Une page qui dit « demandez votre panneau », n'importe quel outil sait la faire. Ce que demandait l'opération était autre chose :
📥Recevoir les demandes
Par le formulaire, mais aussi par téléphone, sans rien perdre.
🗺️Organiser les poses
Savoir qui attend, où, et ce qui est déjà fait.
📸Prouver chaque panneau
Une photo par pose, visible de tous.
💗Tenir les comptes
Un montant de dons juste, au panneau près, à tout moment.
Le tout pour une équipe de terrain qui n'a ni le temps ni l'envie d'apprendre un logiciel. D'où notre choix : un site sur mesure, pensé autour de ces quatre gestes, plutôt qu'un thème générique à rafistoler avec des extensions.
03 · LE CŒUR DU SITELa règle d'or : aucun chiffre n'est saisi à la main
C'est la décision qui structure tout le projet. Le compteur, la barre de progression, le montant reversé, le nombre de quartiers : personne ne les remplit. Ils sont tous calculés à partir des photos publiées.
Une demande, elle, n'incrémente rien : elle entre dans la file d'attente. Seule la photo du panneau en place compte. Et si on décoche une photo, tout se retire d'un coup, compteur, don, point sur la carte. Le total affiché est donc toujours la preuve de ce qui a été posé : rien de plus, rien de moins.
// la source unique des compteurs posés = nombre de photos publiées dons = posés × don par panneau quartiers = quartiers distincts des photos publiées restants = objectif − max(demandes reçues, posés)
Le détail de la dernière ligne a son histoire, on y revient dans les mises à jour.
04 · LE FRONTLe site public : une seule page, qui va droit au but
Le visiteur arrive le plus souvent depuis son téléphone, en scannant l'affiche dans la rue. On a donc tout construit pour le mobile d'abord, sur une seule page qui se lit de haut en bas :
- le message et le bouton « Je veux mon panneau »,
- le compteur en direct,
- « Comment ça marche » en trois étapes,
- l'association bénéficiaire, et l'entreprise derrière l'opération,
- le mur des panneaux déjà accrochés,
- la carte, puis un dernier appel : « il reste N panneaux à poser ».
L'univers graphique reprend celui de l'affiche : trait noir, rose aquarelle, écriture manuscrite. Les polices sont hébergées sur le site lui-même.
Une carte et un mur de photos
Chaque panneau apparaît sur une carte interactive, regroupé par quartier ou par commune, avec le nombre de panneaux posés. L'opération ne s'est pas arrêtée à Villeneuve-Loubet : les communes voisines s'ajoutent depuis le backoffice, par leur simple nom, et la carte les place toute seule.
Juste au-dessus, le mur montre les panneaux en place chez les habitants. Les photos gardent leur format d'origine : les habitants envoient du portrait comme du paysage, et recadrer coupait le panneau, qui est justement le sujet. Six photos sont visibles, les suivantes s'ouvrent d'un bouton.
05 · LE FORMULAIREUne demande en 30 secondes, sans captcha
Nom, adresse, un moyen de contact. Particulier ou entreprise, les deux cas sont prévus. À l'envoi, l'équipe reçoit aussitôt un e-mail et peut répondre directement à l'habitant.
Pas de captcha à déchiffrer : un formulaire caritatif doit rester simple à remplir. Les robots sont filtrés par trois protections invisibles : un champ piège que seuls les robots remplissent, un envoi trop rapide refusé, et un nombre d'envois limité par connexion.
Et si l'e-mail de notification n'arrive pas, la demande, elle, est quand même enregistrée.
06 · LE BACKOFFICEUn backoffice pensé pour le terrain
C'est la partie que le public ne voit jamais, et celle qui fait gagner le plus de temps. En haut, les chiffres clés ; dessous, quatre onglets : les demandes, les photos, les lieux de la carte, les réglages.
Les demandes
Toutes les demandes dans un seul tableau, de la plus récente à la plus ancienne. Une case « Posé » suit l'avancée, et un lien ajoute directement la photo du panneau correspondant. Une demande reçue par téléphone s'ajoute à la main, avec juste un nom et une adresse.
Les photos, et la case qui fait tout
Chaque photo reçue arrive en carte, affichée en entier : pour décider de publier, l'équipe doit voir tout le cadre, pas un recadrage. On choisit le quartier, on coche « Publier sur la page »… et la règle d'or fait le reste.
- Les photos se glissent-déposent, avec aperçu avant envoi.
- Un lieu manque ? « Autre ville ou quartier… » le crée au vol, coordonnées comprises.
- Toutes les photos se téléchargent d'un coup, en zip, rangées par date, nom et lieu.
- L'objectif, le don par panneau, le téléphone affiché : tout se change dans les réglages, et le site suit.
07 · LE LANCEMENTUne page d'attente qui bascule toute seule
Avant l'ouverture, le site affiche une page d'attente avec un compte à rebours. À la date choisie, il bascule de lui-même sur le site complet, sans que personne n'ait à intervenir.
Dans les réglages, trois positions : automatique, forcer la page d'attente, forcer le site complet. De quoi tester en conditions réelles, puis lancer à l'heure dite.
Compte à rebours de démonstration, comme celui de la page d'attente.
08 · LA CONFIANCESécurité et vie privée, sans compromis
Un site qui collecte des adresses et des photos de domiciles se doit d'être irréprochable. Ce qu'on a mis en place :
📍GPS effacé
Chaque photo est ré-encodée à l'arrivée : ses données cachées, dont la position GPS du domicile, sont supprimées.
🔒Photos sous clé
Une photo non publiée n'est accessible à personne, pas même par son adresse directe.
🔑Backoffice protégé
Mot de passe jamais stocké en clair, aucun mot de passe par défaut, tentatives limitées, déconnexion après inactivité.
🍪Zéro bandeau cookies
Pas de publicité, pas de traceur : la mesure d'audience fonctionne sans cookie.
Polices et carte sont servies depuis le site lui-même : seule l'imagerie OpenStreetMap sort du domaine. La page reste légère.
09 · LA VIE DU SITELes mises à jour, au fil de l'opération
Un site d'opération vit au rythme du terrain. Chaque retour de l'équipe est devenu une amélioration, sans jamais toucher aux données déjà reçues :
Mise en ligne. Page d'attente, formulaire, compteur, carte, mur et backoffice.
Notification e-mail à chaque demande, code postal et ville dans le formulaire, entreprises en plus des particuliers, et dépôt des photos par glisser-déposer.
Photos au format d'origine : plus aucun panneau coupé, et des dimensions enregistrées pour que la page ne sursaute plus au chargement. Les photos déjà reçues sont mesurées automatiquement.
Téléchargement groupé de toutes les photos, rangées par date, nom et lieu.
« Panneaux restants » corrigé. Le compteur affichait encore des panneaux disponibles alors que des habitants les avaient déjà demandés. Désormais, un panneau est réservé dès la demande.
La campagne prend le relais : publicité vidéo et visuels pour les réseaux sociaux.
10 · AU-DELÀ DU SITELa campagne : une pub vidéo et des visuels
Pour aller chercher les derniers panneaux, on a monté une publicité vidéo verticale de 26 secondes pour Facebook et Instagram. Elle s'ouvre sur le compteur qui s'emballe, sur une mosaïque des vraies photos de panneaux, avant de rappeler le principe : pose gratuite, 5 € reversés.
Pensée pour être regardée sans le son, comme la plupart des vidéos sur les réseaux : tout passe par le texte à l'écran. Et l'ordre des scènes a été revu pour accrocher dès la première seconde.
En parallèle, des visuels quotidiens mettent à l'honneur les habitants et les commerces qui ont accroché leur panneau.
11 · LE BILANCe qu'on retient
Un site caritatif n'a pas besoin d'être compliqué pour celui qui le visite. Mais derrière, il doit faire le travail.
Compter juste, prouver chaque don, et laisser l'équipe se concentrer sur l'essentiel : poser des panneaux. À quelques jours de la fin d'octobre, 95 panneaux sur 100 sont posés, dans 52 quartiers et communes, et 475 € sont déjà débloqués pour SOS Cancer du Sein.
Côté technique, le site est volontairement sobre : pas de CMS, pas de framework, pas d'extension. Un code écrit pour ce besoin précis, facile à mettre à jour, et des données qui ne se perdent jamais d'une version à l'autre.
Une opération, un événement, une cause à porter ?
On conçoit l'outil qui va avec : simple pour vos visiteurs, efficace pour votre équipe.
Parlons de votre projet