15 Janvier 2019

Mise en production du site de la CGT - Drupal 8

Commentaires

Voilà plusieurs mois que nous travaillons sur le projet de refonte du site www.cgt.fr avec Drupal 8, que nous avons mis en en production en novembre dernier. Conception, UX UI design, développement, migration de contenus depuis le CMS SPIP… Le nouveau site est un parti-pris qui bouscule, mais engage le syndicat dans une nouvelle direction.

Le projet

La Confédération Générale du Travail nous a confié le projet de refonte globale de son site internet www.cgt.fr. Il faut suivre la tendance, se positionner, se démarquer. Si le précedent site mixait les contenus éditoriaux, les services, les cibles, le nouveau site se démarque : il doit communiquer au plus grand nombre, imposer ou diffuser une voix par l'intermédiaire d'un canal officiel. Il doit également rassembler et élargir le socle de ses sympathisants et militants. 

Le projet s'est par conséquent concentré sur la création d'un espace "anonyme" optimisé à l'attention de tous. Il s'agit d'un magazine. 

Le projet s'est contenté de proposer un espace militant efficace, limité à quelques fonctionnalités, mais organisé pour maximiser et faciliter les opérations militantes, ainsi que le recrutement de nouveaux adhérents.

Les enjeux principaux de ce projet ont été :

  • L’optimisation de l’expérience utilisateur et la modernisation des interfaces ;
  • La migration de l’intégralité des contenus de SPIP vers Drupal 8 ;
  • Le développement d’un espace militant simple et efficace.

Pour répondre à ces problématiques, bluedrop.fr a pris en charge :

  • L’analyse de l’audience et des personas ;
  • La conception UX et UI incluant la déclinaison responsive design ;
  • Le développement du site avec Drupal 8 ;
  • L’intégration front-end ;
  • La migration de l’ensemble du contenu de SPIP vers Drupal 8.

Nous accompagnons également la CGT dans l’hébergement et la tierce maintenance applicative du site Drupal.

Processus de conception 

Le site www.cgt.fr est un site à fort contenu reposant sur une architecture de l’information complexe et peu claire, rendant difficile la fluidité des parcours utilisateurs. Il a fallu proposer une expérience utilisateur intuitive et fluide et penser une architecture de l’information pertinente qui permette de faciliter l’accès aux informations malgré le volume important de contenus.
     
Pour répondre aux exigences ergonomiques et graphiques, nous avons suivi le processus suivant en phase de conception :

  • Benchmark : cette première étape permet l'étude de sites similaires, la comparaison des sites à fort contenu pour analyser l’architecture de l’information ainsi que les tendances de navigations et d'interfaces
  • Analyse SEO : cette étape permet l'analyse des statistiques du trafic du site pour en dégager des habitudes de navigation, l’origine de la fréquentation, la proportion d'utilisateurs "en mobilité" ainsi que les taux de rebonds. Ces informations ont permis de catégoriser les types d’utilisateurs.
  • Analyse des personas : ces ateliers permettent de définir des personas, des stéréotypes types d’utilisateurs. Cette analyse a alimenté la conception des profils d'utilisateurs et leurs parcours.
  • Analyse du contenu : cette étape a permis de mettre en relation les types de contenu, les profils d'utilisateurs et leurs parcours. 
  • Définition des parcours utilisateurs : cette étape permet de définir les parcours utilisateurs - comment guider un utilisateur vers une information/ un contenu ? Pour cela, nous avons analysé les attentes, les besoins et les freins par persona. Exemple : un utilisateur mobile qui n’est intéressé que par les contenus éditoriaux généralistes doit accéder aux contenus "chauds" au dessus de la ligne de flottaison. 
  • Définition de l’architecture de l’information : avec les parcours utilisateurs, il convient d'agencer les informations à mettre à disposition des différents profils - Quel contenu dans quelle page ? Comment faciliter l'accès à telle information ? Comment différencier les types de contenus pour qu’ils soient mieux visibles ? Nous avons par conséquent utilisé les couleurs ainsi que la fonction de tri par secteurs d’activité, géographique et thématique.
  • Zoning : Il s'agit ensuite de présenter les différents contenus à précisément positionner dans les différentes pages ou gabarits.
  • Wireframes : nous avons ensuite conçu les maquettes "fils de fer" telles que nous les connaissons.
  • Maquettes graphiques : Il s'agit de la phase d'habillage graphique des maquettes ergonomiques.

Ce processus de création ainsi que les attentes de la CGT ont permis d’orienter l’équipe de la CGT vers le choix d’un site de type "Magazine", un parti-pris risqué où l’information et les actualités doivent occuper la majeure partie du site (un ratio de 70 % d’informations sur le site contre 30 % pour la partie "Espace Militant").

Les particularités UX/UI design

L’identité historique de la CGT devait continuer à travers le design du site internet. La CGT a imposé les couleurs, difficulté lorsque nous avons souhaité ajouter une évolution à l'esprit de la charte du syndicat. L’enjeu a été d’intégrer cette charte historique (couleurs, logos, charte graphique, …) à un site qui souhaite profiter des tendances à jour en matière de conception web. L’UIX designer a choisi de mélanger les styles pour aboutir à un résultat facilement reconnaissable pour l’image de la CGT tout en proposant une structure de page moderne (une page aérée, de grands visuels, une navigation originale par l'intermédiaire d'un méga-menu plein écran... Laissant le choix à chaque profil d'utilisateur de naviguer selon la thématique de son choix). 

Les principales fonctionnalités du site

Le site www.cgt.fr est un site d'informations destiné à informer et à organiser une interaction militante pour ses adhérents. Parmi les fonctionnalités déployées, notons :

  • Espace militant - Cet espace est la grande nouveauté du site et permet aux utilisateurs militants d’accéder à leur espace privé et de disposer d’une interface pour créer, publier et consulter des actualités incluant des documents joints. Ces actualités ne sont visibles et partagées qu’entre militants. Par ailleurs, les utilisateurs peuvent également gérer ou télécharger des fichiers et des dossiers. Ils peuvent renseigner et mettre à jour les informations de leur profil mais également créer des forums de discussion pour échanger entre militants. De plus, nous avons mis en place un système de recherche permettant d’effectuer des recherches et des tris sur les contenus à l’aide de taxonomies.
  • Actualités/ Dossiers/ Communiqués de presse - Le site cgt.fr propose des dossiers complets sur des sujets en particulier et des communiqués de presse publiés par la Confédération. Les contenus sont filtrables par le biais de taxonomies (professions, territoires et thématiques).
  • WebTV - La WebTV permet de diffuser des contenus vidéo, hébergés sur Youtube. Les vidéos sont également triables par taxonomies pour une recherche plus rapide par catégorie.  
  • Moteur de rechercheLe site dispose d’un moteur de recherche disponible tout au long de la navigation. Ce moteur de recherche permet une recherche intégrale dans le texte des contenus ainsi que dans les documents joints (PDF notamment).
  • PétitionLe site propose un outil permettant de créer et de gérer des pétitions à partir des types de contenu. Une pétition est composée de deux blocs, le premier affiche le formulaire de signature de la pétition et le second affiche le résultat (nombres de signataires, noms, commentaires, etc.). Seuls les signatures validées (par un e-mail qui doit être confirmé) peuvent être comptabilisées dans la pétition. Ce module Drupal 8 est en cours de standardisation pour le reverser dans la communauté Drupal.
  • Mega menu full screen - Compte tenu du nombre important de contenus, l’arborescence devait proposer toutes les rubriques de manière claire et intuitive sans perdre l’utilisateur. Nous avons jugé pertinent de mettre en place un mega menu en plein écran et de permettre la recherche par catégories (secteurs d’activité, géographie et thématique) mais également par types de contenus (Actualités, dossiers, WebTV, agenda et communiqués de presse). 
  • Formulaire de syndicalisation - un formulaire « Se syndiquer » permet aux visiteurs d'ahdérer au syndicat. Le module calcule le montant de la cotisation en fonction des revenus de l'utilisateur et autorise le paiement sécurisé de la cotisation annuelle.
  • Cartographie interactive - Le site propose une carte interactive pour rechercher et visualiser un établissement CGT à proximité. Cette page propose des filtres pour affiner la recherche, par types d’établissement, par régions et par départements.
  • Lecteur PDF CalameoLe site met à disposition les Publicationsde la CGT, sous forme de documents PDF consultables par le lecteur Calameo. 
  • Partage social - Une fonctionnalité de partage sur les réseaux sociaux est désormais disponible sous chaque contenu.

Les particularités techniques

Le site a été réalisé avec Drupal 8 et Foundation 6 pour le thème. Voici quelques modules qui ont servi à la refonte :

  • Pour la recherche - La combinaison des modules SearchAPI et SolrAPI a été nécessaire pour mettre en place un système de recherche performant, permettant une recherche dans l’intégralité du site, aussi bien dans le texte des contenus que dans les documents (PDF, office…).
  • Pour l’espace militant - Plusieurs modules ont été nécessaires pour développer les fonctionnalités de cet espace. Tout d’abord, l’inscription en tant que militant repose sur un formulaire d’adhésion en trois étapes qui a demandé un workflow particulier, nécessitant un patch du module Webform pour customiser les étapes du formulaire, le comportement ainsi que l’affichage. Par ailleurs, nous avons utilisé les modules Content Moderation, Workflow ainsi que des modules spécifiques permettant aux utilisateurs de téléverser des fichiers mais également de créer et de publier des articles (tagués militants). De plus, un module spécifique a été développé pour sécuriser et limiter les accès militants (accès qui peut être modifié par les administrateurs depuis le back-end).
  • Pour les formulaires - Nous avons utilisé Webform - notamment pour le formulaire "Se syndiquer" et le formulaire de contact).
  • Pour la carte - Le module Geolocation Field a été nécessaire pour intégrer la carte interactive. Ce module permet de gérer des coordonnées de points géographiques sur la carte (latitude et longitude).
  • Pour le mega menu - Nous avons utilisé la librairie Swiper et la fonctionnalité Tabs de Foundation, combinées à un module spécifique pour proposer des fonctionnalités JavaScript avancées. Nous avons également développé une version mobile de ce menu, pour une navigation parfaitement adaptée à la consultation en mobilité.

Les difficultés rencontrées

  • Pour l’import - Un import depuis la base de données Spip vers Drupal 8 a été nécessaire. Cet import a été techniquement complexe compte tenu de la diversité des données que contenait la base de données Spip (ex : code contenant des tags et balises non conformes aux balises HTML standards, des informations qui ne sont pas divisées en champs spécifiques, etc.). Nous avons été contraints de développer des scripts supplémentaires pour gérer de nombreux cas particuliers afin de répartir de manière efficace les informations dans la plateforme Drupal.
  • Pour l’interface utilisateur de l’espace militant - Le tableau de bord (dashboard) de l’espace militant a demandé la mise en place d’une vue contenant une dizaine de fonctionnalités avancées, exposées sous forme de « mini-sites », créant au début des incompatibilités. En effet, le tableau de bord propose une vue liste des fichiers militants et permet de disposer des fonctionnalités suivantes :
    • Le téléchargement direct des fichiers ;
    • Le groupement des fichiers en dossier téléchargeable ;
    • L’accès à la page liste des dossiers pour consulter les fichiers associés ;
    • Un système de filtrage avancé et de recherche;
    • Le groupement des fichiers par mois ;
    • La pagination au scroll rendant le comportement plus complexe.

Nous avons contourné ces difficultés en modifiant le comportement des modules Drupal et en développant de nouveaux modules spécifiques.

Conclusion

Ce projet de refonte a été très intéressant tant dans la phase de conception, qui nous a poussé à suivre un processus de conception rigoureux afin d’aboutir à une expérience utilisateur et une interface répondant à l'exigence de la CGT ainsi que des utilisateurs… qu’en développement, nous incitant à repousser nos limites pour répondre à un besoin fonctionnel complexe !

La collaboration avec l’équipe de la CGT continue vers de nouveaux projets… Après le positionnement de la communication générale et nationale de la Confédération, il convient de faire vivre les services, d'isoler les problématiques, les actions. 

Pour aller plus loin : https://www.cgt.fr.