Un nouveau site pour le Conseil Constitutionnel

Repenser l’interface pour ouvrir le Conseil au public citoyen

Datagif
Datagif
Feb 14 · 5 min read

De mi-2017 à début 2018, Datagif a travaillé sur la refonte du site du Conseil Constitutionnel, avec son partenaire technique OWS. Un projet d’envergure pour une institution très active, dont l’activité ancrée dans l’actualité se situe loin des clichés de la République. Un des enjeux forts de cette refonte a donc porté sur la modernisation nécessaire de son site.

Avant un léger lifting de la home en 2016, la dernière version du site du Conseil Constitutionnel datait de près de 10 ans. En années Internet, cela fait beaucoup...

La home du site du Conseil Constitutionnel avant la refonte

La subtilité de la refonte, qui nous a occupée avec notre partenaire OWS pendant près de 9 mois, tenait principalement au fait qu’il a fallu revoir l’ensemble des éléments du site en même temps : architecture technique, hiérarchie de l’information, restructuration de l’arborescence et des contenus, parcours de navigation, direction artistique, CMS, migration : tout.

Et voilà le résultat :

La home issue de la refonte opérée par Datagif et OWS

Site métier mais exigence citoyenne

En tant qu’acteur institutionnel de référence, le Conseil Constitutionnel publie sur son site un certain nombre de contenus légaux. La base données des décisions rendues constitue un outil de travail pour un public expert. Il s’agissait donc, sans perdre ce public, de s’ouvrir également à un public citoyen et scolaire.

Pour y parvenir, il a fallu faire des choix pour déterminer la cible principale de certaines pages. Par exemple, que ce soit pour le formulaire de recherche de décisions ou le tableau des affaires en instance, le travail ergonomique s’est concentré sur un besoin professionnel du public expert, qui utilise le site comme outil de travail. Il ne servait à rien de chercher à trop les vulgariser, sous peine de perdre l’usage métier. Ces pages peuvent donc paraître assez “rudes” pour un public non averti mais elles correspondent à une méthode d’utilisation précise : les filtres, la lecture en ligne et rapide, les multiples critères de croisement.

Du wireframe à la maquette graphique

Néanmoins, notre fil conducteur a été de rendre chaque page abordable pour quiconque navigue dessus. Nous voulions rompre avec le sentiment d’arriver sur un site réservé à une élite. L’action du Conseil Constitutionnel touche au contraire chacun•e d’entre nous et c’est une nécessité citoyenne de la rendre compréhensible. C’est pourquoi, il a été notamment décidé d’ajouter un chapô introductif pour chaque type de décision dans les affaires en instance, permettant de saisir en quelques mots les enjeux du sujet.

La refonte a permis de restructurer la hiérarchie de contenu sur les pages

On introduit ainsi deux niveaux de lecture sur une même page :

  • public expert : je zappe les présentations et me concentre sur le tableau pour y chercher une information précise.
  • grand public : je ne comprends pas vraiment le tableau mais j’apprends sur cette page les différents types de décisions qu’il existe.

Créer de la hiérarchie dans l’information

L’une des caractéristiques principales de la structure du site pré-existant est que toutes les pages reposaient sur un seul template, lequel servait à construire l’ensemble des pages du site. Un template non structuré, avec de larges colonnes de textes, sans possibilité de mise en forme. Si l’idée d’un gabarit unique peut s’avérer pertinente, dans ce cas malheureusement il ne permettait pas de bien hiérarchiser l’information selon les types de contenus.

Or, le site comporte 21 000 pages… Au-delà de l’uniformisation absolue, ce template ne pouvait pas être adapté à tous les contenus. Nous avons donc commencé par lister tous les templates potentiellement nécessaires à une navigation fluide : introduire des pages de premier niveau “landing”, des pages spécifiques pour les différents grands types de publications, des pages articles plus modulaires pouvant accueillir une certaine diversité de contenus, etc. Tout en faisant attention à ne pas construire une usine à gaz que l’équipe éditoriale n’arriverait jamais à animer et faire vivre dans la durée. Car l’expérience nous l’a montré : trop de templates tuent le template.

Templates desktop adaptés aux besoins des publications et aux capacités de production

La version mobile des templates

Face à la diversité des contenus nous avons imaginé une page “type” très modulaire. Reposant sur l’utilisation du module Drupal Paragraph, la page est créée par les contributeurs en fonction du contenu : avec ou sans sommaire, avec ou sans focus, avec ou sans article lié, avec ou sans citation, etc.

Les différents templates possibles depuis la page article

Un design et un développement exigeants

Après une étape de conception dense, le graphisme a naturellement pris la suite. Pour affirmer l’identité, nous avons fait des choix graphiquement forts. Le bleu du logo est vif et s’adapte bien en aplat, en écriture. Nous en avons tiré parti pour donner de la personnalité au design du site. Le choix des typographies est également venu compléter la nouvelle identité visuelle avec Tiempos, une police à empattement, et Circular, pour dynamiser l’image du Conseil constitutionnel. Le doré apporte quant à lui la touche d’élégance qu’on connaît à l’institution.

Le projet a été mené en maîtrisant son calendrier. Côté développement, le travail effectué sur les deux bases de données métier et la mise en place d’un nouveau CMS (Drupal) en markdown ont représenté un chantier conséquent. Le développement du site piloté par notre partenaire OWS avait pour objectif d’automatiser le plus possible l’alimentation du site via les bases de données. Enfin, la migration des contenus, comme dans tout projet de refonte à forte volumétrie, fut également une étape décisive du projet.

Le Conseil Constitutionnel dispose désormais d’un outil évolutif qui pourra être mis à jour plus régulièrement. La bonne conduite de ce projet fut aussi le fruit d’une très forte implication de l’équipe interne : responsables de communication, éditorial et techniques furent présents tout au long du projet, lors de comités de pilotages menés par Datagif et OWS. Un point indispensable pour faire avancer rapidement les décisions ✅.

On vous laisse découvrir le site : conseil-constitutionnel.fr. Et si vous souhaitez parler refonte avec nous, appelez-nous !

Datagif

Making-of et réflexions

Datagif

Written by

Datagif

We do some Internet stuff. http://Instagram.com/datagif

Datagif

Datagif

Making-of et réflexions

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade