Amélioration des parcours et interfaces du site de la CGT avec Drupal 9

Jour de manifestation CGT à Marseille
Cas d'école : la mise en production du nouveau site de la CGT ou la refonte des principaux parcours UX/UI sans toucher à l'instance Drupal 9...

> Consulter l'étude de cas ici - Les plateformes Drupal de la CGT

Contexte de la refonte

L'agence bluedrop.fr a conduit la conception et la refonte du site cgt.fr avec le CMS Drupal. Elle en assure l'hébergement et la maintenance depuis 2018. Dans le cadre de l'amélioration continue du site, l'agence bluedrop.fr a préparé un audit des interfaces du site en juillet 2021. Cet audit a relevé les points améliorables en matière d'UX (parcours utilisateurs) et en matière d'UI (design graphique). Il est à l'origine de la refonte du thème du site, de son amélioration et de la reprise des principaux parcours utilisateurs.

Le projet a été matérialisé par les interventions suivantes :

  • Spécifications du besoin ;
  • Maquettes UI d'évolution des interfaces et du guide de style du site ;
  • Intégration et développement ;
  • Tests et contrôle qualité ;
  • Recette ;
  • Mise en production.

Un socle technique à jour - Une refonte limitée aux interfaces

Le site cgt.fr est correctement maintenu depuis sa refonte en 2018. Propulsé par Drupal 9, régulièrement mis à jour et correctement entretenu, il a été inutile de songer à une refonte globale du site, qui implique un travail de spécifications, de reprise du contenu et de développement global. Nous nous sommes attachés à travailler à partir de l'instance existante en limitant la modification des configurations du site. Il a été ainsi possible de proposer une expérience améliorée aux utilisateurs sans proposer un projet long et coûteux aux équipes de la CGT.

La lecture des contenus optimisée :



Un nouveau thème 

L'équipe de conception s'est concentrée sur l'amélioration de l'expérience utilisateur générale du site, en proposant les interventions suivantes, à déployer sur un nouveau thème : 

  • Réfection du menu et pied de page ;
  • Refonte de la page d'accueil du site ;
  • Evolution des couleurs ;
  • Evolution des textes (typographie, graisses, tailles) pour une meilleure lisibilité des contenus;
  • Réfection des composants (boutons, cards) ;
  • Modification du système d'espacements.

La modification de la recherche et des filtres de contenu

Le site dispose d'un contenu riche et abondant. Suite à l'audit UX et aux échanges avec les utilisateurs du site, nous avons proposé une exploration plus poussée en matière de recherche et de tris des contenus. Nous avons souhaité :

  • Proposer des aides à la recherche (autocompletion, suggestions) ;
  • Revoir le paramétrage de la recherche ;
  • Revoir le fonctionnement des filtres dans les pages (notamment le fonctionnement du bouton "Réinitialiser") ;
  • Améliorer la lisibilité des pages rédactionnelles en prévoyant un affichage orienté ;
  • Proposer un ajout de paragraphes en plus des paragraphes existants ;
  • Réduire la largeur des conteneurs de textes ;
  • Proposer des contenus liés depuis les mini-sites de la galaxie CGT.

Les paragraphes enrichis et revisités : 



La refonte de l'agenda en cours

La CGT a également souhaité profiter de cette reprise des interfaces pour faire évoluer l'agenda de la Confédération. Les évolutions concernent l'affichage d'une vue liste avec lien vers une page détail de l'événement. Nous avons proposé de recréer un type de contenu pour simplifier le développement (les anciens événements du site actuel ne sont par conséquent pas récupérés). Nous avons également proposé de conserver une vue calendrier plus discrète, ainsi qu'un affichage sur une carte. De plus, une nouvelle taxonomie permet de distinguer plus facilement les "Campagnes" de communication avec un code couleur à répercuter sur l'interface.

Interventions :

  • Création d'un type de contenu nouveau pour les événements - Date, lieu, bloc carte, image facultative, document joint ;
  • Création d'une vue liste avec pagination et d'une vue liste pour les archives (événements passés) ;
  • Création d'une taxonomie campagne et d'un filtre par campagnes sur la vue liste - Gestion du code couleur par campagnes ;
  • Configuration et intégration de la vue événement détail ;
  • Configuration d'un bloc supplémentaire vue calendrier - Relié aux détail des événements.

Les interfaces mobiles : 

Le résultat des tests utilisateurs est déjà probant. Le taux de rebond et la durée des sessions utilisateurs sont en hausse constante depuis la mise en production de cette nouvelle version.

URL : https://www.cgt.fr/.
Etude de cas : Confédération Générale du Travail.
Mise en production : 02/06/2022.