Un site communautaire bilingue, itéré sur le retour client
Conception et développement d'un site vitrine pour un organisme communautaire de l'Ontario — banque alimentaire, friperie et centre de dépôts. Quatre directions de design complètes ont été produites, la dernière synthétisant un sondage réalisé auprès des décideurs de l'organisme.
Rôle : conception de l'interface, développement front-end complet et intégration du retour client à chaque itération.
Servir une communauté bilingue, sans friction
L'organisme dessert une population francophone et anglophone de Clarence-Rockland. Le site devait permettre à une personne en difficulté de trouver de l'aide rapidement — heures d'ouverture, accès à la banque alimentaire — tout en donnant aux donateurs et bénévoles un chemin clair pour contribuer. Le défi : chaleur humaine et efficacité, dans deux langues, sur tous les écrans.
Trois publics, trois intentions
Personnes ayant besoin d'aide
Accès immédiat à la banque alimentaire : admissibilité, horaires, itinéraire. Aucun jugement, aucun obstacle.
Donateurs et clients de la friperie
Comprendre quoi donner, où déposer, et comment un don financier est utilisé.
Bénévoles
Découvrir les rôles disponibles et poser sa candidature en quelques minutes.
Quatre directions, une synthèse pilotée par le client
Plutôt qu'une seule maquette, quatre directions complètes ont été conçues et développées — chacune navigable de bout en bout. Un sondage auprès de l'organisme a ensuite guidé la synthèse finale : la chaleur éditoriale d'une direction, l'accès rapide d'une autre, la palette du nouveau logo, les heures d'ouverture visibles dès l'accueil.
Terracotta & Sauge — chaleur communautaire
Forêt & Sable — approche éditoriale
Utilitaire civique — tâches d'abord
Synthèse — guidée par le sondage client
Quatre approches distinctes, explorables en ligne
Chaque direction est un site complet et navigable, avec sa propre palette, sa typographie et sa logique de navigation. Le client a pu comparer et choisir sur pièces.
01Terracotta & Sauge
Chaleur communautaire, accès rapide aux services, structure claire et rassurante.
Ouvrir la démo
02Éditorial Forêt & Sable
Approche magazine : sérif imposant, grilles asymétriques, récit visuel.
Ouvrir la démo
03Utilitaire civique
Tâches d'abord : contraste élevé, typo mono, grille dense, statut en direct.
Ouvrir la démo
04Synthèse client
Synthèse guidée par le sondage : chaleur de la 2, accès rapide de la 1, palette du nouveau logo.
Ouvrir la démoQuatre écrans réels du projet
Heures d'ouverture et actions rapides visibles sans défilement, palette issue du nouveau logo.
Admissibilité, horaires et itinéraire regroupés pour la banque alimentaire.
Chemin clair pour les dons financiers et matériels, avec transparence sur leur usage.
Collectes, événements et nouvelles promus dans la navigation, comme demandé au sondage.
De l'accueil à l'action en quelques secondes
- 1Accueil — heures d'ouverture et actions rapides visibles immédiatement
- 2Choix du besoin : banque alimentaire, friperie, don ou bénévolat
- 3Page dédiée — détails pratiques, conditions, formulaire ou coordonnées
- 4Contact — téléphone, courriel et adresse pour finaliser
Ce qui est réellement implémenté
Bascule FR/EN complète via un dictionnaire bilingue partagé
Routage par fichiers — chaque section est une route propre, indexable et partageable
Composants partagés entre les démos (en-tête, pied de page, sections, bannières d'appel à l'action)
Thèmes par variables CSS — chaque démo change de palette sans dupliquer le code
Métadonnées SEO par route (titres, descriptions, Open Graph)
Barre d'avis de fermeture et pages événements / nouvelles
Une base technique moderne et maintenable
- React 19 + TanStack Start — rendu côté serveur et fonctions serveur typées
- Tailwind CSS v4 — jetons sémantiques (couleurs, rayons) plutôt que valeurs codées en dur
- Typographie éditoriale — Fraunces / DM Serif pour les titres, Inter / Fira Sans pour le texte
- Icônes Lucide et composants d'interface réutilisables
Des choix assumés et explicables
Prototyper en vrai code
Chaque direction de design est une version fonctionnelle du site, pas une image. Le client a pu cliquer, scroller et comparer — ce qui a rendu le sondage beaucoup plus fiable.
Un dictionnaire bilingue unique
Tous les textes vivent dans un dictionnaire FR/EN central. Ajouter une phrase dans les deux langues est trivial, et rien ne peut être oublié dans une seule langue.
Des routes plutôt que des ancres
Aide, friperie, dons, bénévolat : chaque section est une vraie page avec ses propres métadonnées — meilleur référencement, liens partageables, statistiques exploitables.
Itérer sans casser
Les quatre démos cohabitent dans le même projet sans interférer, grâce à des thèmes scopés par variables CSS. La synthèse finale réutilise les composants des directions précédentes.
Conception, développement et résolution de problèmes
Un livrable concret, pas une maquette jetable
L'organisme dispose d'un site bilingue complet, structuré pour le référencement, dont la direction finale repose sur les retours réels de ses décideurs. Le code est prêt à évoluer : nouvelles pages, contenus ou langues s'ajoutent sans refonte.
Voir la version finale du site