Refondre le site de l'EJCAM autour de ses quatre publics clés
Une refonte du site de l'EJCAM, l'école de journalisme et de communication d'Aix-Marseille Université, construite autour des besoins de ses quatre publics clés (candidats, étudiants, diplômés et entreprises) pour rendre l'information plus facile à trouver grâce à une structure plus claire et une interface moderne et accessible. Aujourd'hui en ligne, le nouveau site a été très bien accueilli par l'école.
Le défi
L'EJCAM est l'école de journalisme et de communication d'Aix-Marseille Université, et l'une des rares écoles de journalisme en France reconnues par la profession. Son site, pourtant, n'avait presque pas évolué depuis des années : une interface datée, des mises en page incohérentes et une navigation complexe rendaient l'information difficile à trouver.
Le site devait aussi servir des publics très différents (futurs étudiants, étudiants actuels, diplômés et entreprises), chacun à la recherche d'informations différentes, mais tous confrontés à la même navigation dense.
Objectifs du projet :
- Moderniser l'identité visuelle du site
- Donner à chaque public un chemin direct vers l'information dont il a besoin
- Simplifier la navigation et améliorer la hiérarchie de l'information
- Garantir une expérience entièrement responsive
- Créer une base UI évolutive et maintenable dans Drupal
Le défi était de refléter le prestige de l'école par une expérience moderne et plus claire, sans perturber l'écosystème de contenus existant de l'université.
Ma démarche
Avant de concevoir les interfaces, je me suis attaché à comprendre qui visite le site, ce que chaque public vient y chercher, et où la structure existante compliquait son parcours.
1. Recherche & benchmark
J'ai analysé plusieurs sites d'enseignement supérieur pour identifier les schémas UX courants et les problèmes d'utilisabilité.
Enseignements clés :
- Les futurs étudiants attendent un accès immédiat aux admissions et aux formations
- Les sites riches en contenus gagnent à avoir des menus structurés qui révèlent leur profondeur
- La clarté de la navigation compte plus que la complexité visuelle
- La navigation mobile est essentielle pour un public jeune
Ces enseignements ont directement orienté la stratégie de navigation et la structure de la page d'accueil.
2. Une navigation construite autour des publics
La décision clé du projet a été d'organiser l'accès à l'information selon qui est le visiteur, plutôt que selon l'organisation interne de l'école.
Entrées par public :
- « Je suis candidat.e » — admissions et formations
- « Je suis étudiant.e » — informations pratiques et pédagogiques
- « Je suis diplômé.e » — réseau des anciens
- « Je représente une entreprise » — partenariats et taxe d'apprentissage
La navigation principale a aussi été simplifiée, avec des menus déroulants qui révèlent le contenu des rubriques les plus riches, pour que chaque visiteur atteigne le bon contenu en quelques clics.
3. Wireframes
Des wireframes basse fidélité ont permis de valider la structure, la hiérarchie et la navigation avant de passer à l'UI design.
Zones explorées :
- La structure de la page d'accueil et les entrées par public
- Les modèles de pages formation et étudiants
- Le comportement de la navigation et la structure des menus
Cette phase a permis d'itérer rapidement et de réduire les risques à l'implémentation.
(Wireframes des pages Accueil (en haut), Formations (à gauche) et Étudiants (à droite).)
4. Design system & accessibilité visuelle
Un design system a été créé pour garantir la cohérence du site et accompagner son évolution, avec l'accessibilité visuelle comme contrainte centrale.
Principes clés :
- Un système de couleurs fondé sur l'identité de l'école, avec des contrastes vérifiés pour la lisibilité
- Une échelle typographique et une hiérarchie claires
- Des cartes, boutons et modules de contenu réutilisables
- Des états interactifs visibles
- Aucune information transmise par la seule couleur
Ce système a gardé une interface cohérente et lisible sur toutes les pages.
5. Alignement des parties prenantes & contraintes Drupal
Le projet a impliqué des personnels administratifs, des enseignants, des rédacteurs de contenus et des développeurs, dans l'environnement Drupal existant de l'université.
Points d'attention :
- Traduire les besoins institutionnels en parcours utilisateurs clairs
- Des retours réguliers de l'école tout au long du projet
- Un alignement avec les développeurs sur la faisabilité technique
- Des structures de contenus prédéfinies et une maintenance à long terme par des équipes non spécialistes du design
Ces contraintes ont conduit à une approche par composants, réaliste à développer et à maintenir.
6. Prototypage
Un prototype interactif a servi à présenter les principaux parcours utilisateurs aux parties prenantes avant le développement, pour partager une même compréhension de la navigation et du comportement des pages.
Résultats
Le nouveau site de l'EJCAM est aujourd'hui en ligne. L'école a été très satisfaite du résultat : un site plus fonctionnel, plus simple à parcourir et plus moderne, qui reflète mieux sa place parmi les écoles de journalisme reconnues en France.
Principales améliorations
- Des entrées directes pour les candidats, étudiants, diplômés et entreprises
- Une navigation simplifiée et plus claire
- Une identité visuelle moderne, à la hauteur du prestige de l'école
- Une lisibilité et une accessibilité visuelle améliorées
- Une expérience entièrement responsive
- Des composants réutilisables pour la maintenance à long terme
1 / 4
Ce que j'en retiens
Ce projet m'a montré à quel point la structure d'un site peut changer son utilisabilité. Organiser la navigation autour des publics plutôt que des services internes a rendu l'expérience plus claire, sans supprimer aucun contenu.
Il m'a aussi confirmé l'importance de concevoir avec des contraintes réelles (attentes institutionnelles, contenus existants, environnement CMS) tout en gardant une vision claire de l'expérience utilisateur.
Enfin, construire un design system réutilisable dès le départ a rendu l'interface plus cohérente et plus facile à maintenir dans le temps.