Une mission de 2017. Le projet n’a pas vu le jour, faute de budget côté client. Mais c’est là que j’ai appris à mener une démarche UX de bout en bout.
Le contexte : une association à moderniser
L’Association Française de la Presse Automobile (AFPA) existe depuis 1957. Elle réunit 488 membres : des journalistes spécialisés (presse écrite, radio, télé, web), des photographes, mais aussi des attachés de presse et des responsables de l’industrie automobile. Son rôle : être le lieu de rencontre entre ces deux mondes.
Le brief était clair : moderniser l’image de l’AFPA avec un site performant, intuitif, aux codes d’aujourd’hui, pour un lancement prévu en décembre 2017.
Sur ce projet, j’avais deux casquettes : chef de projet (planning, échanges avec le client, méthode agile) et graphiste. Recherche, stratégie, wireframes, identité, maquettes : tout le dossier est passé entre mes mains.
D’abord, écouter les membres
Avant de dessiner quoi que ce soit, j’ai interrogé les membres avec un questionnaire. 46 réponses, et des chiffres qui ont tout orienté :
- 71 % adhèrent pour les mises en relation ;
- 60 % pour l’accès à l’annuaire, et 67,4 % voudraient qu’il soit amélioré ;
- 100 % utilisent un smartphone ;
- et seulement 2,2 % trouvent l’AFPA… moderne.
À partir de ces réponses, j’ai construit deux personas : Arthur, 35 ans, journaliste auto toujours sur les routes, qui veut trouver l’info vite ; et Michel, 50 ans, relations presse chez un constructeur, qui cherche les bons interlocuteurs pour parler de sa marque.
Comprendre l’existant et le terrain
- L’audit du site actuel a été sans appel : un affichage qui n’occupe qu’un quart de l’écran, rien d’adapté au mobile, une adhésion introuvable, des profils jamais mis à jour, et une recherche « afpa » sur Google qui ne remonte même pas le site.
- Le benchmark de six sites (associations de journalistes en France, en Angleterre, aux États-Unis, en Allemagne, et quelques marques auto) a montré une chose : la plupart des associations ne traduisent pas vraiment leurs valeurs, et se ressemblent toutes.
- Une carte de positionnement, avant et après, pour montrer où l’AFPA pouvait se placer.
La recommandation
La problématique : comment moderniser une association vieillissante grâce au digital ?
La promesse : l’AFPA Presse, la plateforme privilégiée des professionnels de l’automobile.
Le concept : deux choses à la fois. Un site vitrine pour asseoir la notoriété de l’association, et surtout un espace membre qui s’adapte au statut de chacun (membre actif ou correspondant), pensé pour tous les écrans.
Du plan à l’écran
J’ai dessiné l’arborescence, les parcours utilisateurs, puis les wireframes, sur mobile et sur ordinateur :
- un tableau de bord différent selon le statut du membre ;
- un annuaire avec recherche par autocomplétion, le service le plus attendu ;
- un agenda et un calendrier où les constructeurs déposent leurs dates d’essais ;
- une messagerie, une bourse à l’emploi et un bloc-notes d’actualités.
Une nouvelle identité
Pour dépoussiérer l’AFPA, j’ai proposé une nouvelle identité : un logo aux lignes fines, une palette bleu nuit, lavande, vert d’eau et jaune, la typo Phantom pour les titres et Avenir Next pour le texte. Les formes triangulaires, comme des fanions, rythment toutes les pages.
Tout a été décliné dans un UI kit (boutons, menus, pastilles, éléments de sélection, états de survol), puis dans les maquettes finales : page Manifeste, annuaire, profil, calendrier, messagerie, emploi, sur ordinateur et sur mobile.
Et la page d’accueil, en entier, sur ordinateur et sur téléphone :
L’espace membre
Le cœur du projet. Une fois connecté, chaque membre arrive sur un tableau de bord qui donne accès à tout : annuaire, articles, bloc-notes, agenda, offres d’emploi, partenaires, messagerie.
Le calendrier rassemble les événements du secteur (lancements presse, essais, salons) avec un code couleur par type, et chacun peut y ajouter les siens. La messagerie permet d’écrire directement à un autre membre, sans passer par l’annuaire.
Au-delà du site
La recommandation allait plus loin que l’interface : une stratégie réseaux sociaux canal par canal (Instagram pour faire rêver, Twitter pour l’info en temps réel, LinkedIn pour la vie de l’association), un travail de référencement (SEO et SEA), un planning et un budget prévisionnel.
Et alors ?
Le projet n’est pas allé plus loin : le budget n’a pas suivi côté client. C’est le jeu.
Mais c’est le projet où j’ai tout appris de la démarche : écouter les utilisateurs avant de dessiner, poser une stratégie avant de choisir des couleurs, et défendre ses choix devant un client. Une méthode que j’applique encore aujourd’hui, de 2LDC à HouseDashboard.