Nightline France : refondre le site d'un service d'écoute, de l'audit à la préproduction

Le site de Nightline France n'était plus à jour : la navigation ne reflétait plus l'organisation des contenus, et l'accessibilité n'était pas au niveau attendu pour un service qui s'adresse en priorité à des étudiants en détresse.

Le site devait aussi répondre aux autres publics de l'association : bénévoles, futurs bénévoles et partenaires.

J'ai piloté la refonte de A à Z : audit, cadrage, conception, coordination avec l'agence Drupal et intégration en préproduction.

Le graphiste de l'association avait défini la nouvelle charte graphique ; je me suis assurée qu'elle soit respectée dans chaque page et chaque composant.

• Audit SEO et accessibilité du site existant, et définition de critères RGAA comme exigences du projet.
• Cadrage : besoins de chaque public, périmètre et priorités.
• Nouvelle arborescence, refaite de A à Z pour que chaque public trouve rapidement ce qu'il cherche.
• Conception des nouvelles pages et de deux nouveaux composants, maquettés sur Figma : le bandeau d'orientation et un composant optimisé pour le SEO.
• Coordination avec l'agence Drupal, suivi du développement et recette.
• Intégration en préproduction.

Le besoin initial provenait de retours d'utilisateurs qui rencontraient des difficultés pour trouver la ligne d'écoute. Sur ce parcours, j'ai mené la conception UX de bout en bout : analyse du besoin, mapping fonctionnel, zoning, conception des parcours, maquettes sur Figma et tests.

Le problème : une information de contact qui ne tient pas compte du moment

Le bandeau s'adressait en premier lieu aux étudiants et aux jeunes en détresse psychologique. Or un service d'écoute n'est pas ouvert à toute heure : une personne qui arrive sur le site en pleine nuit, en dehors des horaires, doit pouvoir savoir immédiatement vers qui se tourner.

Afficher les mêmes contacts à tout le monde, tout le temps, revenait à laisser l'utilisateur faire le tri lui-même, parfois dans un moment difficile.

La solution conçue

J'ai imaginé un bandeau accessible en bas de toutes les pages, dont le contenu varie selon la disponibilité du service :

• Service ouvert : le bandeau oriente vers le numéro unique du service d'écoute.
• Service fermé : il propose les numéros d'urgence et des ressources alternatives, pour ne jamais laisser l'utilisateur sans solution.

Pour structurer cette logique, j'ai réalisé un mapping fonctionnel du bandeau sur Figma : les différents états, la condition qui fait passer de l'un à l'autre et les informations affichées dans chaque cas.

L'objectif n'était pas de rendre les contacts plus visibles, mais de proposer la bonne information au bon moment.

Une évolution prévue : adapter le bandeau au profil du visiteur

À terme, l'objectif était que le bandeau évolue selon le profil de la personne. Un partenaire aurait trouvé directement le contact dédié aux partenariats, un futur bénévole celui du recrutement, et un étudiant qui cherche du soutien les informations du service d'écoute.

Cette étape faisait partie de la feuille de route du dispositif ; elle n'a pas été développée.

Du mapping à la maquette

Cette réflexion a nourri la conception de la page d'accueil, toujours sur Figma : hiérarchiser l'information pour comprendre en quelques secondes qui est Nightline, ce que propose l'association et comment accéder au service, en gardant les ressources utiles toujours visibles.

Le mapping formalisait la logique de fonctionnement ; la maquette en donnait une représentation concrète. Le référencement et l'accessibilité faisaient partie du cahier des charges dès le départ.

La refonte a été conçue, testée et intégrée en préproduction. Le fonctionnement du bandeau a été testé et validé : la logique conçue répondait au besoin.

Le projet n'a pas été mis en ligne à la suite de changements à la direction et dans l'encadrement du projet. Il n'y a donc ni mesures après déploiement, ni visuels publics, mais la conception, elle, a fait ses preuves.

Cette expérience m'a permis d'intervenir sur toutes les étapes d'un projet numérique, de l'audit et de l'identification des besoins jusqu'à leur concrétisation dans un environnement technique, tout en assurant la coordination entre conception UX, développement et intégration.

Partir d'une situation concrète, identifier l'information dont l'utilisateur a besoin, puis concevoir un fonctionnement qui y répond : c'est ma manière d'aborder l'UX Design. Ce projet m'a aussi amenée à penser au-delà de l'interface visuelle, avec des règles conditionnelles et des possibilités d'évolution.

Il m'a aussi appris l'importance d'un cadrage solide et documenté : même interrompu par des changements d'organisation, un projet bien documenté reste prêt à être repris. Avec le recul, je proposerais de livrer par étapes, en mettant en ligne certaines parties plus tôt, pour que le travail atteigne les utilisateurs plus vite.

Une bonne expérience utilisateur ne consiste pas à afficher plus d'informations, mais à rendre les bonnes informations accessibles au moment où elles sont utiles.