Conception d'un annuaire associatif en marque blanche

La première étape consiste à réaliser un audit en deux temps :

• un audit expert du portail « annuaire des associations de Bordeaux Métropole » ;
• une analyse de la solution de plateforme proposée par le prestataire technique en charge du développement du futur portail.

L’objectif est d’identifier les points bloquants, mais également ce qui fonctionne plutôt bien.

Parallèlement à cette phase d’analyse, nous alimentons un benchmark concurrentiel du secteur de plusieurs portails associatifs. Cela permet de catégoriser certains axes à travailler en regroupant les bonnes pratiques :

• présenter les associations ;
• afficher les activités disponibles ;
• comment devenir bénévole ;
• et le parcours de recherches : filtres, recherche avancée.

Nous regroupons l’équipe projet et technique pour travailler ensemble sur les fonctionnalités du prochain portail associatif.

Les principales pages de l’annuaire sont priorisées : annuaire des activités, fiche d’informations sur une association, espace connecté… Il faut maintenant itérer sur l’intégration des composants et fonctionnalités qui vont structurer ces interfaces.

Ce temps d’échange répond à plusieurs enjeux stratégiques, politiques, éditoriaux et techniques.

En effet, les interfaces doivent être améliorées en se basant au maximum sur la solution existante proposée par le prestataire technique. Cette nouvelle plateforme doit également être pensée en marque blanche afin d’être déployée facilement sur l’ensemble des communes.

Nous combinons au mieux l’ensemble des besoins exprimés en s’assurant que l’expérience de l’utilisateur cible soit au centre de la prise de décision finale. Un vote sur les sections « préférées » de chaque proposition de sketch est réalisé afin de dégrossir l’ensemble des idées et de s’accorder sur les composants à intégrer aux maquettes.

La page d’accueil doit être modulable pour permettre aux communes de mettre en avant les sections qu’elles préfèrent. De même, les fiches individuelles doivent s’adapter au contenu : des blocs peuvent être retirés si aucun contenu n’existe.

Ces premières maquettes basse fidélité sont réalisées en itération continue avec le prestataire technique. L’objectif est d’assurer que le développement soit en phase avec la conception.

Afin de confronter les maquettes aux utilisateurs potentiels, des sessions de tests sont organisées. Plusieurs profils, citoyens et administrateurs d’association, sont confrontés au prototype du portail associatif et questionnés sur les parcours. Ces retours à chaud permettent d’identifier des points bloquants et d’incompréhension de la part de l’utilisateur. Par exemple, il y a une confusion entre le composant présentant les activités et celui correspondant au bénévolat. Il en va de même pour les filtres de recherche qui nécessitent d’être améliorés.

Qui dit annuaire, dit moteur de recherche.

Une attention toute particulière est apportée sur cette fonctionnalité essentielle.

L’objectif est de proposer une recherche efficace et pratique pour trouver une activité, un évènement ou encore une association.

Pour répondre à ce besoin, nous travaillons sur trois axes intégrés au portail associatif :

• une recherche avancée : elle permet de spécifier le type de recherche, la thématique et aussi le quartier désiré. En proposant cette première phase de filtrage dès la page d’accueil, l’utilisateur trouve plus rapidement le contenu qui l’intéresse ;
• les filtres : pour chaque section (activité, évènement, associations, bénévolat), des filtres spécifiques et réfléchis selon les cas d’usages sont proposés. Par exemple, le jour pour les activités ou encore la période de disponibilité pour du bénévolat ;
• des résultats de recherche catégorisés : si l’utilisateur préfère effectuer une recherche sur l’ensemble du site, les résultats proposés sont triés par catégorie (actualité, activités, associations…) pour faciliter la lecture des informations et éviter la surcharge mentale. De plus, seuls les éléments les plus pertinents lui sont poussés. Il a aussi la possibilité de demander à voir uniquement une seule catégorie de ses résultats.

En complément, des propositions de synonymes proches de la recherche sont proposées pour guider l’utilisateur.

De la même manière que pour la version desktop, nous fonctionnons en boucles itératives avec l’équipe projet et le prestataire technique.

Pour être certains de répondre aux attentes des utilisateurs qu’importe le support utilisé, des tests utilisateurs sont organisés sur la version mobile.

Le hall de la piscine municipale de Bègles est choisi pour la diversité des profils que l’on peut rencontrer (seniors, parents, jeunes adultes…) ainsi que pour la disponibilité des testeurs.

Pour tous ceux qui sont curieux de savoir comment faire des guérilla tests efficaces, on vous invite à lire notre article de blog sur le sujet.

La hiérarchie de l’information ayant été travaillée en amont lors de la conception desktop (tout en pensant au format responsive), les contraintes concernent principalement l’ergonomie sur mobile. Par exemple, certains utilisateurs sont gênés par l’absence d’un lien directement dans le menu permettant de revenir à la page d’accueil du portail associatif.

Comme vous l’avez compris, ce nouveau portail doit s’inscrire dans une logique de marque blanche. Le principal challenge ici est de définir une direction artistique qui s’adapte à l’identité visuelle de chaque ville.

Pour répondre à ce besoin, nous simplifions au maximum la personnalisation de cette plateforme.

En effet, les communes pourront changer uniquement la couleur primaire de l’interface par exemple. Et pour garder l’accessibilité, la couleur doit être choisie dans une palette définie par nos soins qui respecte les normes de contraste RGAA.

Chaque ville a également la main sur les visuels sélectionnés pour son propre portail associatif.

Dans un souci de temps et de contraintes techniques, nous ne pouvons pas réadapter complètement les composants via de l’adaptative mobile. Chaque composant du design system est pensé en responsive design. Nous vérifions l’usabilité de chacun des composants que nous concevons sur les différents formats desktop, tablette et mobile.

Le sprint UI design est également l’occasion d’affiner les maquettes pour améliorer l’expérience globale de l’utilisateur sur le portail associatif. Par exemple, les cartes « activités » et « bénévolat » sont retravaillées pour mieux les différencier et éviter toute confusion :

• les cartes activités sont composées d’un carré de couleur et d’une icône qui représente la thématique abordée ;
• les cartes bénévolats contiennent une image, un tag de temporalité ainsi que l’icône de thématique.

En fonction du type de filtres, les composants sont également adaptés.

On retrouve par exemple des composants accordéons « dropdowns » pour choisir les thématiques, un calendrier pour sélectionner une période ou encore des cases à cocher pour des spécificités comme « mission à distance uniquement ».

La représentation des filtres est identique sur chacune des pages pour homogénéiser l’expérience sur le portail associatif. Les composants comme les onglets de filtrage par catégorie sont également dans un style spécifique pour ne pas les confondre avec les ancres présentes sur la page d’accueil par exemple.

Pour faciliter la navigation et encourager au clic, nous prévoyons de laisser les principaux boutons d’actions fixes lors du scroll sur les formats tablettes et mobile.

Pour simplifier la compréhension des actions cliquables, nous soulignons par défaut les liens et autres boutons tertiaires.

Avec une certaine expérience dans le secteur associatif, ce projet de plateforme en marque blanche à destination des communes de Bordeaux Métropole permet de relever des défis intéressants :

• faire coexister plusieurs annuaires sur un seul portail (associations, activités, bénévolat…) ;
• faciliter la recherche et l’accès de ces informations ;
• concevoir une interface destinée à une multitude de profils (avec différents degrés de maturité digitale) ;
• adapter la conception des interfaces en prenant en compte une solution existante.

La conception finale prend la forme d’un annuaire numérique proposant des entrées multiples. Que l’utilisateur recherche une activité, une mission de bénévolat ou encore une association, chaque regroupement possède sa page annuaire avec des filtres spécifiques et des fiches individuelles.

De plus, l’actualité associative et les évènements organisés sont à la fois mis en avant dès la page d’accueil, mais également facilement atteignables via le menu ou la fiche des associations.

La recherche avancée permettant de filtrer selon le type de recherche, la thématique et le quartier souhaité rend la navigation plus intuitive et répond au besoin des utilisateurs lors de leur recherche associative.

Du point de vue des administrateurs d’associations, le formulaire simplifié de création d’activité réduit les risques d’erreurs et les abandons de complétion. Seules les informations indispensables sont à renseigner obligatoirement, permettant plus de flexibilité pour les plus petites associations.