Conception UI et assistance technique pour la Ville de Carcassonne, un exemple de site de municipalité avec Drupal

Lundi 27 Décembre 2021

La ville de Carcassonne nous a confié la conception UI du nouveau site de la municipalité. Si nous avons assisté la refonte des interfaces, nous saluons la collaboration avec Jean-Christophe qui pris en charge l'intégration ! Place maintenant à la mise à niveau vers Drupal 9...

Photo par Sylvia Szekely sur Unsplash

Le contexte

La ville de Carcassonne a choisi l'agence bluedrop.fr, en 2018, pour conduire la maintenance et l'assistance technique Drupal des sites de la municipalité. La ville de Carcassonne dispose en effet d'une équipe technique interne qui assure le développement et la maintenance de l'ensemble des sites de la commune : 

L'équipe technique de la ville dispose d'une ligne de crédit ouverte depuis 2018, encadrée par un marché, pour solliciter de l'aide, de l'assistance, un dépannage ou une intervention sur l'un de ses sites. Ces interventions peuvent concerner un point technique lié à Drupal, une problématique concernant l'exploitation, une intervention de maintenance ou une prestation de conception UX ou UI. C'est dans ce cadre que nous avons été sollicités fin 2020 pour proposer une nouvelle direction artistique et conduire la refonte des interfaces du site principal de la ville. Les équipes de la ville ont pris en charge l'intégration du nouveau thème avec application et succès !

Contraintes du projet - Refonte UI sans modifier les configurations backend

Le besoin formulé était de conduire une refonte des interfaces du site sans remettre en question les configurations Drupal, la gestion des contenu, des taxonomies, des vues, des blocs, des paragraphes. Si les contenus étaient à reprendre, ils étaient parfois mal présentés ou hiérarchisés dans le site. Le travail de conception, limité au design UI, devait tenir compte de ces contraintes. 

Exemples de paragraphes :




Nous avons par conséquent été force de proposition pour : 

  • Moderniser la charte de la ville et l'adapter aux standards actuels ;
  • Réorganiser et proposer une nouvelle page d'accueil ;
  • Proposer un nouveau menu pour les versions desktop et mobile ;
  • Proposer une charte qui permette de facilement déployer les CSS sur la majorité des pages. 

Page d'accueil

Les informations présentes dans la future d'accueil n'ont pas été modifiées. Par contre, la hiérarchisation des informations diffère. Nous retrouvons :

  • Les composants de la page d'accueil ;
  • Flash info : Informations brèves ;
  • A la Une : Informations importantes qui ont vocation à rester longtemps sur la page d'accueil ;
  • Actualité : Flux d'informations qui s'affiche de la plus récente à la moins récente ;
  • Agenda des manifestations - manuellement sélectionnées ;
  • 10 raccourcis vers des pages importantes ;
  • Vidéos : les dernières vidéos de la commune ;
  • Kiosque : les dernières publications de la commune.








L'intégration du thème Drupal 8

Le thème repose sur Bootstrap 5 et profite de ses nombreuses avantages, notamment de la grille responsive. Nous avons porté une attention toute particulière à l'accessibilité en proposant les options suivantes : 

  • Gestion des contrastes - Par défaut, contrastés ou inversés ;
  • Gestion des polices - utilisation d'une police spéciale pour atténuer les dyslexies ;
  • Gestion des interlignages - Par défaut ou augmentés ;
  • Gestion de la justification - Par défaut ou sans justification ;
  • Gestion des images - Par défaut ou remplacées par du texte.





 

Le résultat

Le résultat propose aux usagers et habitants une information claire, un affichage performant et un accès rapide aux différents parcours. Sans fioriture, il s'impose comme un projet référence pour diffuser l'information municipale. Nous sommes désormais concentrés sur la mise à niveau du site vers Drupal 9.

https://www.carcassonne.org -
Mise en production : 29/11/2021.