Concevoir un kit de sites web évolutif pour les instituts d'établissement d'Aix-Marseille Université
Un kit de sites web conçu pour les 21 instituts d'établissement d'Aix-Marseille Université : modèles de pages, bibliothèque de composants partagée et règles d'usage claires, pour offrir à chaque institut un site moderne et cohérent, aligné sur la nouvelle charte graphique de l'université. Le kit équipe aujourd'hui des sites d'instituts comme ARKAIA et ICI.
Le défi
Aix-Marseille Université réunit 21 instituts d'établissement, qui associent chacun recherche, formation et partenaires autour d'une thématique stratégique. Au fil des années, chaque institut avait construit son propre site de manière indépendante, avec pour résultat des interfaces datées, une navigation complexe et des contenus organisés différemment d'un site à l'autre.
Alors que l'université adoptait une nouvelle identité visuelle, l'objectif n'était pas de refondre un site, mais de concevoir un kit commun que chaque institut pourrait utiliser pour construire le sien.
Objectifs du projet :
- Moderniser les sites des instituts conformément à la nouvelle charte graphique
- Simplifier la navigation et l'accès aux informations clés
- S'adresser à trois publics : chercheurs et personnels, étudiants en master et doctorants, et partenaires
- Garantir la cohérence sur l'ensemble du réseau des instituts
- Créer une base évolutive compatible avec Drupal
Tout l'enjeu était de laisser à chaque institut assez de liberté pour présenter sa propre activité, sans recréer la fragmentation que le projet devait justement résoudre.
Ma démarche
Concevoir un modèle n'a rien à voir avec concevoir un site : chaque décision doit fonctionner pour des instituts aux disciplines, aux contenus et aux besoins différents. J'ai donc abordé le projet comme un système plutôt que comme un ensemble de pages.
1. Recherche & benchmark
J'ai analysé les sites d'établissements de recherche et d'enseignement supérieur comparables, dont celui de l'Institut Polytechnique de Paris, confronté à un défi similaire : présenter plusieurs écoles membres sous une même identité.
Enseignements clés :
- Des entrées dédiées à chaque public raccourcissent le chemin vers le bon contenu
- Les chiffres clés communiquent rapidement l'envergure et l'activité d'un établissement
- Une structure commune à toutes les entités rend les contenus plus faciles à parcourir et à maintenir
- Trop de liberté laissée aux contributeurs érode vite la cohérence visuelle
Ce dernier point est devenu le principe directeur du projet.
2. Architecture de l'information & modèles de pages
Plutôt que de concevoir les pages une par une, j'ai défini les modèles de pages dont chaque institut aurait besoin pour présenter son activité.
Modèles de pages :
- Accueil
- Présentation de l'institut
- Axes de recherche
- Formation
- Partenariats
- Appels à projets
- Lauréats
- Actualités
- Contact
Cette architecture commune a donné à chaque institut la même structure claire, tout en laissant de la place à ses propres contenus.
3. Une bibliothèque de composants aux règles claires
Le principal risque d'un modèle est de laisser trop de liberté à chaque institut lors de la construction de son site, ce qui ramène à des sites incohérents et difficiles à maintenir. Pour l'éviter, la bibliothèque de composants a été conçue en premier, puis chaque modèle de page a été limité à un ensemble précis de composants.
Règles du système :
- Une bibliothèque commune de près de 30 composants
- Chaque modèle de page n'autorise que les composants utiles à sa fonction
- Les instituts composent et personnalisent leurs pages dans cette sélection
- Les couleurs suivent la charte, avec une seule couleur d'accent choisie dans la palette officielle
- L'identité de chaque institut passe par son logo, ses photos et ses contenus
Cette approche de « liberté encadrée » a donné aux instituts une vraie maîtrise de leurs pages, tout en garantissant la cohérence du réseau.
4. Wireframes & UI design
Les wireframes ont défini la structure et le parcours de chaque modèle de page, puis ont été revus et validés avec l'institut pilote avant de passer à l'UI design.
Principes de design :
- Une navigation et une hiérarchie des contenus claires sur chaque modèle
- Des entrées par public pour les chercheurs, les étudiants et les partenaires
- Une application stricte des nouvelles couleurs et typographies de la charte
- Des mises en page responsives, conçues pour ordinateur et mobile
(Wireframes des pages Accueil (en haut), Recherche (à gauche) et Formation (à droite).)
L'UI a ensuite donné vie à la nouvelle identité de l'université, offrant à tout le réseau une image moderne et cohérente.
5. Alignement des parties prenantes & contraintes Drupal
Tout au long du projet, j'ai travaillé en lien étroit avec le chef de projet, les développeurs Drupal, un institut pilote dans le rôle du client et une chargée de communication responsable des futurs contenus des sites.
Points d'attention :
- Les composants devaient correspondre à des blocs Drupal réutilisables
- Les règles de pages devaient pouvoir être appliquées dans le CMS
- Les contenus devaient rester simples à gérer pour des contributeurs non techniques
- Le kit devait accueillir des contenus hérités de sites très différents
Cette collaboration a permis de garder un kit réaliste à développer, à déployer et à maintenir dans les instituts.
Prototype & tests
Un prototype interactif reliant les principaux modèles de pages a servi à présenter les parcours utilisateurs et à recueillir les retours des parties prenantes.
Le kit a ensuite été largement testé avec l'institut pilote pendant le développement, ce qui a permis d'identifier et de corriger les problèmes avant son déploiement dans les autres instituts.
Résultats
Le kit a donné à Aix-Marseille Université une base commune pour ses instituts d'établissement : un système de sites moderne et cohérent, aligné sur la nouvelle charte graphique et assez souple pour que chaque institut présente sa propre activité. Il équipe aujourd'hui des sites d'instituts comme ARKAIA et ICI.
Principales améliorations
- Une identité visuelle cohérente sur tout le réseau des instituts
- Des entrées claires pour les chercheurs, les étudiants et les partenaires
- Neuf modèles de pages couvrant tous les besoins clés
- Une bibliothèque de près de 30 composants réutilisables
- Des règles claires entre souplesse et cohérence
- Une base évolutive pour les nouveaux instituts
1 / 8
Ce que j'en retiens
Ce projet m'a appris à penser en systèmes plutôt qu'en écrans. Concevoir un kit, c'est anticiper des besoins qu'on ne peut pas tous connaître à l'avance, et décider non seulement de ce que le système permet, mais aussi de ce qu'il empêche volontairement.
Limiter chaque modèle de page à un ensemble défini de composants a été une décision clé : dans un contexte multi-sites, ce sont des contraintes bien pensées qui rendent la liberté durable.
Il m'a aussi confirmé l'importance de concevoir avec les personnes qui vont développer et utiliser le système. Une bibliothèque de composants n'a de valeur que si les développeurs peuvent la construire et les contributeurs l'utiliser en confiance.