Contactez-nous
Une question ? N’hésitez pas à nous écrire !
Problématiques
Comment concevoir une architecture claire pour une association aux missions multiples, qui s'adresse simultanément à des personnes vulnérables, des donateurs, des bénévoles et des partenaires institutionnels ?
Comment intégrer des entités distinctes (Femmes Debout, crèche) dans un site unifié tout en préservant leur identité propre et leur usage spécifique, dont un bouton de sortie rapide pour les victimes de violence ?
Comment livrer un site accessible, autonome et évolutif pour une association disposant de ressources limitées et d'équipes non techniques ?
Contexte
Coop'Agir est une association ancrée dans le territoire jurassien depuis de nombreuses années. Elle coordonne un ensemble de dispositifs d'insertion et d'accompagnement social : hébergement d'urgence, insertion par le logement et l'emploi, accompagnement des femmes victimes de violences conjugales via Femmes Debout, et bientôt une micro-crèche innovante. L'association s'adresse à des publics très hétérogènes : personnes en recherche d'aide, bénévoles, partenaires institutionnels, donateurs, candidats à l'emploi et médias. Le site existant, vieillissant et difficile à administrer, ne reflétait plus ni la richesse des missions de l'association, ni la diversité de ses publics. L'interface d'administration complexe freinait les mises à jour, rendant le site peu vivant et peu consulté. Coop'Agir a fait appel à Wolfox pour tout repenser, de l'architecture à l'intégration, en un temps record.
Une mission complète : de la recherche UX à la mise en ligne en quelques semaines
Ce projet illustre la capacité de Wolfox à s'adapter aux contraintes réelles de ses clients. Avec un budget serré et une deadline ferme, Wolfox a structuré la mission en sprints courts et itératifs, avec des jalons de validation réguliers pour maintenir le rythme sans sacrifier la qualité.
La particularité de ce projet en agence : Wolfox n'a pas seulement designé le site. Elle l'a aussi intégré sur Webflow et formé les équipes à son administration, une approche de bout en bout parfaitement adaptée aux besoins d'une structure associative avec des ressources internes limitées.
Un autre élément distinctif : Wolfox pratique le mécénat de compétences pour les associations. Une remise de 20% a été appliquée sur la prestation, permettant à Coop'Agir d'accéder à une agence UX/UI de qualité dans le respect de son budget.
Phase 1 : Recherche UX, comprendre une association aux multiples visages
La phase de recherche UX a démarré par des ateliers de cadrage avec le comité de pilotage de Coop'Agir, réunissant la direction générale et les coordinatrices des différents dispositifs.
L'enjeu central de cette phase : cartographier les 6 publics cibles et leurs besoins radicalement différents sur un même site.
6 profils, 6 parcours
Wolfox a défini et documenté six personas distincts : la personne en recherche d'aide (hébergement, insertion, accompagnement), le bénévole potentiel, le partenaire institutionnel ou financeur, le donateur, le candidat à l'emploi ou à l'insertion, et le journaliste ou représentant des médias. Pour chacun, un parcours cible a été défini avec l'objectif que chaque utilisateur accède à l'information recherchée en 3 clics maximum.
Un audit révélateur
L'audit UX-UI du site existant a confirmé les intuitions de l'équipe : navigation peu intuitive, contenu peu hiérarchisé, absence totale d'appels à l'action, et une interface d'administration si complexe qu'elle décourageait les mises à jour régulières. Un benchmark d'associations comparables a également été réalisé pour identifier les bonnes pratiques du secteur et positionner Coop'Agir efficacement par rapport à ses homologues.
Phase 2 : Conception UX, une architecture qui parle à tous
La conception UX a produit une arborescence entièrement repensée, structurée autour de 5 familles de services, chacune associée à une couleur, une icône et une page hub. Ce système de codes couleurs garantit que chaque utilisateur, quel que soit son profil, identifie immédiatement le service qui le concerne.
Des parcours guidés dès la homepage
La homepage a été repensée autour de 5 entrées principales guidées par profil, accessibles dès le premier écran : "j'ai besoin d'aide", "je veux m'engager", "je suis partenaire", "je veux soutenir", "je cherche un emploi". Chaque entrée conduit l'utilisateur vers un parcours dédié, sans qu'il ait à naviguer dans une arborescence complexe.
Femmes Debout : une intégration délicate
L'un des défis architecturaux les plus complexes du projet : intégrer le contenu du site Femmes Debout, dédié aux femmes victimes de violence, dans l'architecture globale de Coop'Agir, tout en préservant son identité propre. Un bouton de sortie rapide discret mais accessible sur toutes les pages concernées a été conçu : il permet aux utilisatrices de quitter le site en un clic sans laisser de trace, une exigence non négociable de sécurité. Des redirections automatiques depuis l'ancien site Femmes Debout ont également été planifiées pour assurer la continuité du trafic.
Phase 3 : Direction artistique, dynamique, chaleureux, pas institutionnel
La direction artistique a été définie en atelier avec le comité de pilotage. Le positionnement validé : un site dynamique et peps, moderne et chaleureux, sobre mais pas austère, à mille lieues du registre institutionnel froid souvent associé au secteur associatif.
Sur la palette de couleurs, Wolfox a proposé d'enrichir l'identité existante de Coop'Agir, rouge et gris, vers des violets et mauves, avec des touches de bordeaux et terracotta pour assurer la continuité. Le système de codes couleurs par famille de services a ensuite été décliné sur l'ensemble des composants UI.
Phase 4 : Conception UI et intégration NoCode
La conception UI a produit les maquettes desktop et mobile de toutes les pages, accompagnées d'un design system complet avec composants réutilisables, états interactifs et règles d'espacement. L'accessibilité a été intégrée dès la conception : contrastes WCAG AA, navigation clavier, textes alternatifs, structure sémantique, et une attention particulière portée au FALC (Facile à Lire et à Comprendre) pour les publics les plus vulnérables.
L'intégration NoCode sur Webflow a suivi directement les maquettes validées. Wolfox a développé un thème sur-mesure intégrant toutes les fonctionnalités clés : formulaires de contact avec menus déroulants par service, carte interactive avec filtres par type de service, intégration HelloAsso pour les dons en ligne et la billetterie événements, bibliothèque de documents téléchargeables, et une section actualités dynamique pour maintenir le site vivant et améliorer son référencement naturel.
Le choix de Webflow n'était pas anodin : la plateforme offre un mode éditeur ultra-simple permettant aux équipes de Coop'Agir de modifier et publier du contenu directement, sans aucune compétence technique. Les performances SEO sont également intégrées nativement : chargement rapide, responsive, balises méta, plan du site XML.
Une formation pour rendre l'autonomie possible
La livraison du site ne marque pas la fin de la mission chez Wolfox. Une session de formation a été organisée pour les équipes de Coop'Agir pour leur permettre de mettre à jour le site en toute autonomie via l'interface Webflow. Un guide d'utilisation back-office a également été remis à l'issue du projet.
Ce que cette mission illustre
Coop'Agir est un exemple de ce que Wolfox sait faire pour les structures à ressources limitées : un accompagnement complet et efficace, du cadrage à la mise en ligne, alliant recherche UX, design UX, UI design, accessibilité numérique et intégration NoCode. C'est ça, une agence UX/UI qui s'engage vraiment.
