Sites Studio : l'éditeur de sites web des établissements scolaires français

Lorsque la DRANE Bretagne nous a sollicités (agence Lumy), l'objectif est de remplacer un CMS historique devenu complexe à maintenir et difficile à prendre en main pour la majorité des établissements.

Le futur produit doit permettre aux écoles, collèges et lycées publics de créer et administrer leur site en autonomie, tout en respectant les exigences de l'État : un éditeur de sites web libre, souverain, respectant les standards d'accessibilité et l'identité visuelle de l'État.

Très vite, le projet dépasse la simple conception d'un CMS. La véritable question devient :

Comment permettre à des centaines d'établissements scolaires de concevoir et mettre à jour facilement leur site web, sans compétences techniques et en respectant des contraintes institutionnelles extrêmement fortes ?

J'étais le seul Product Designer sur ce projet et j'ai également assuré le rôle de Product Owner. Je travaillais directement avec les collaborateurs de la DRANE Bretagne, la Délégation Régionale Académique du Numérique Éducatif, pour transformer les besoins métier en décisions produit, aux côtés d'un Solution Architect et d'un développeur Full Stack.

Au-delà de la conception des interfaces, j'ai défini les parcours utilisateurs, les fonctionnalités, les rôles utilisateurs, les permissions, les différents comportements et rédigé le référentiel produit qui a servi de source de vérité tout au long du développement et jusqu'à la livraison du produit au client.

J'ai commencé par analyser les sites créés avec le CMS en place au sein de l'Académie pour comprendre comment les établissements l'utilisaient réellement : les contenus qu'ils publiaient, la manière dont ils les structuraient, les mises en page récurrentes et les fonctionnalités dont ils avaient besoin au quotidien.

Cette analyse m'a permis d'identifier des usages communs derrière des sites pourtant très différents : présenter l'établissement, publier des actualités et des événements, mettre en avant des informations importantes, proposer des ressources, intégrer des contenus externes ou encore faciliter la prise de contact.

À partir de ces usages, j'ai commencé à construire les premiers wireframes et à définir progressivement le fonctionnement du produit : organisation des pages et sous-pages, système de blocs, gestion des articles, rôles et permissions, règles de publication ou encore parcours de création d'un site.

L'enjeu était de ne pas reproduire le CMS en place au sein de l'Académie, mais de comprendre ce que les établissements en faisaient pour concevoir un produit plus simple autour de leurs besoins réels.

La création d'un site internet dans une académie dépend du type d'établissement, des droits de l'utilisateur et de l'existence éventuelle d'un site déjà rattaché à celui-ci.

Plutôt que d'exposer ces règles à travers une succession de formulaires administratifs, j'ai conçu un parcours d'onboarding progressif dont le code UAI, identifiant de référence de l'établissement, devient la porte d'entrée.

À partir de cette seule information, le système peut préremplir les informations de l'établissement - nom, type, adresse, téléphone ou email - et générer automatiquement son URL.

Il vérifie également si un site existe déjà. Dans ce cas, l'utilisateur est orienté vers le site existant plutôt que de créer un doublon.

Une fois l'établissement identifié, deux parcours sont proposés : personnaliser directement le futur site ou déléguer sa création à d'autres agents en les invitant comme administrateurs.

Un récapitulatif final permet de vérifier les informations, les choix graphiques et les collaborateurs avant de terminer la configuration.

L'objectif n'était pas d'expliquer la logique administrative du système, mais de faire en sorte que l'utilisateur n'ait jamais à s'en préoccuper afin de simplifier au maximum la création d'un nouveau site web.

Plutôt que de reproduire la complexité d'un CMS traditionnel, j'ai conçu une expérience centrée sur les usages essentiels des établissements.

Les pages et sous-pages sont organisées dans une arborescence simple et réorganisables par glisser-déposer. Pour construire une page, l'utilisateur dispose de 13 blocs de contenu faciles à paramétrer, couvrant les principaux besoins identifiés : texte et image, actualités, événements, FAQ, formulaires, newsletter, carte interactive ou encore contenus embarqués.

Deux blocs dédiés à Porte-Plume et Porte-Voix, les autres produits de la Suite Studio, permettent également d'intégrer directement des contenus éditoriaux et audio existants. Une manière d'inscrire Sites Studio dans un écosystème cohérent et d'assurer une continuité entre les différents outils de la suite.

Chaque bloc encapsule sa propre logique pour limiter les réglages à ce qui est réellement utile. Le produit prend en charge le reste : génération des URL, métadonnées SEO, statuts de publication ou encore prévisualisation du rendu.

La construction d'une page et la rédaction d'une actualité répondent cependant à deux usages différents. J'ai donc conçu deux expériences éditoriales complémentaires : un éditeur par blocs pour structurer les pages et un éditeur de texte enrichi pour écrire et publier des articles.

Pour les articles, je souhaitais proposer un environnement de rédaction moderne, mais aussi cohérent avec les outils numériques déjà utilisés par les agents de l'État.

Plutôt que de concevoir cet environnement de zéro, nous nous sommes appuyés sur des briques et composants issus de produits numériques existants de l'État et de la DINUM, notamment pour l'expérience d'édition de texte enrichi. Cette logique de réemploi permet à Sites Studio de s'inscrire dans un environnement déjà familier pour ses utilisateurs, tout en mutualisant des composants existants.

L'éditeur permet ainsi d'écrire librement, de mettre en forme son contenu et d'utiliser des commandes / pour insérer rapidement titres, listes, citations, images, liens, vidéos, contenus embarqués ou PDF. La sauvegarde automatique, la restauration après une fermeture accidentelle et la prévisualisation avant publication sécurisent le travail de rédaction.

Cette continuité se retrouve également dans l'intégration d'Albert, l'IA souveraine de l'État, directement au sein de l'éditeur. Déjà présente dans l'écosystème numérique des agents, elle devient ici une assistance contextuelle à la rédaction plutôt qu'un outil séparé.

L'utilisateur peut générer une première version d'un article à partir d'une consigne, créer automatiquement son résumé ou sélectionner un passage pour le retravailler. Albert permet alors de corriger, améliorer, simplifier, développer ou résumer un texte, de le traduire - notamment en breton - ou de lui donner une instruction libre.

L'enjeu était donc de construire sur un environnement numérique existant plutôt que d'en créer un nouveau : réutiliser des briques éprouvées, réduire l'apprentissage et intégrer l'IA directement dans le geste de rédaction, tout en laissant à l'utilisateur la maîtrise du contenu final.

À l'échelle de centaines d'établissements, permettre une personnalisation totalement libre aurait rapidement fragmenté l'expérience, complexifié la maintenance et rendu plus difficile la maîtrise de l'accessibilité.

À l'inverse, imposer exactement le même site à tous aurait empêché les établissements de se l'approprier.

J'ai donc conçu un système de personnalisation volontairement encadré autour de quatre dimensions : couleur principale, typographie, niveau d'arrondis et motif de fond, en intégrant les contraintes d'accessibilité dès la conception de ces paramètres.

Les établissements peuvent choisir parmi plusieurs couleurs et typographies - dont Marianne, issue du design system de l'État - et ajuster le niveau d'arrondis des composants. Pour ceux qui souhaitent aller plus loin, plusieurs motifs de fond - points, grille, vagues ou formes géométriques - permettent d'habiller graphiquement le site tout en restant dans un cadre maîtrisé. Leur couleur s'adapte automatiquement à la couleur principale choisie afin de préserver la cohérence visuelle.

Un aperçu interactif restitue en temps réel l'effet de ces choix sur les principaux composants du site. L'utilisateur peut ainsi personnaliser son identité sans intervenir directement sur la mise en page ou les composants eux-mêmes.

Cette liberté encadrée permet de trouver un équilibre entre appropriation, cohérence à l'échelle de la plateforme et accessibilité.

Le même principe structure la gouvernance du produit. Plutôt que de multiplier les rôles et les matrices de permissions, Sites Studio repose sur deux profils : Admin, qui gère le site de son établissement, et Super Admin, qui intervient à l'échelle de l'Académie.

Le Super Admin peut notamment gérer les domaines, supprimer un site et définir les modèles de mentions légales et de déclaration d'accessibilité appliqués par défaut à l'ensemble des établissements.

La personnalisation reste locale ; ce qui garantit la cohérence et la gouvernance du service reste centralisé.

Sites Studio ne se limite pas à la création de pages et d'articles.

Le back-office permet également à chaque établissement de gérer les informations qui structurent son site : identité et coordonnées, horaires d'ouverture, accès rapides, partenaires et labels, mentions légales ou encore paramètres d'affichage.

Des fonctionnalités opérationnelles qui répondent à des situations concrètes de communication : un bandeau d'information temporaire peut être activé en haut du site et un mode maintenance permet de rendre momentanément le contenu public inaccessible avec un message personnalisé.

Cette logique m'a amené à considérer le produit non comme un simple CMS, mais comme l'outil de pilotage de la présence web d'un établissement.

Les premiers déploiements auprès des établissements pilotes font ressortir plusieurs bénéfices.

Le produit remplace un CMS historiquement apprécié par une poignée d'utilisateurs experts, mais jugé complexe par une grande partie des établissements. Les premiers retours soulignent une prise en main plus intuitive et une perception plus moderne des outils numériques de l'Éducation nationale, notamment grâce à une expérience pensée pour des utilisateurs non techniques et à l'intégration des fonctionnalités IA.

Le projet a également permis de moderniser les fondations techniques de la plateforme avec une architecture plus robuste et une authentification renforcée, ouvrant de nouvelles perspectives en matière de maintenance et d'éco-conception.

Déployé auprès d'une première vague d'établissements pilotes, Sites Studio a vocation à être progressivement généralisé à l'échelle de l'Académie de Rennes.

Pensé comme un logiciel libre et intégré à la suite de produits Suite Studio, le produit dépasse aujourd'hui le périmètre initial de l'Académie de Rennes puisqu'il est aujourd'hui proposé à l'ensemble des académies en France.

Ce projet m'a appris qu'un bon produit ne consiste pas à supprimer la complexité, mais à l'absorber pour qu'elle ne pèse jamais sur ses utilisateurs.

Cette idée se retrouve à tous les niveaux de Sites Studio : pré-remplir des informations à partir d'un identifiant unique plutôt qu'un formulaire complexe, générer les métadonnées au lieu de demander à l'utilisateur de les configurer, proposer treize blocs de contenus plutôt que de partir d'une page blanche ou encore intégrer directement l'IA Albert dans l'éditeur d'articles.

Avec le recul, j'investirais cependant davantage de temps dans une véritable phase de discovery en amont du projet.

Si les besoins se sont affinés progressivement au fil des échanges avec la DRANE, des ateliers de cadrage et une recherche utilisateur plus approfondie auraient permis de comprendre plus rapidement la réalité du terrain et la complexité des différents cas d'usage, d'objectiver davantage certaines priorités et de limiter les itérations pendant la conception.

Au-delà du résultat, Sites Studio représente aujourd'hui particulièrement bien ma manière de travailler : comprendre un problème dans toute sa complexité, structurer le produit avant de dessiner ses interfaces, puis continuer à le faire évoluer au contact des utilisateurs.