Mise en production du site Drupal 8 saemes.fr

Mardi 18 Septembre 2018

Mise en production d'un projet mené par l'équipe de bluedrop.fr dans sa globalité : Analyse, expérience utilisateur, UX, UI, développement, optimisations, imports, contenus et hébergement... Et maintenant, place à la maintenance !

Mise en production du site Saemes.fr - Drupal 8

Il y a quelques mois, nous vous parlions de la SAEMES, grand opérateur de stationnement en Île-de-France qui nous a confié le projet de refonte de son site internet www.saemes.fr avec Drupal 8. Notre équipe de développeurs Drupal a enfin mis en production ce site et voici les résultats !

SAEMES

SAEMES - Société Anonyme d’Économie Mixte d’Exploitation du Stationnement de la Ville de Paris - est un acteur incontournable du stationnement en Île-de-France avec 27.000 places disponibles réparties sur plus de 90 parkings. Elle compte près de 2 millions de clients dans les parkings publics, résidentiels et les emplacements de voirie. Innovante, la SAEMES a lancé en 2016 sa plateforme Opendata "Saemes Open Data" devenant ainsi le premier opérateur de stationnement en France à libérer ses données !

La SAEMES dispose du site internet saemes.fr pour informer les utilisateurs, entre autres, sur les places de stationnements disponibles par zones géographiques, les parkings à proximité, les tarifs de stationnement. Elle permet en outre à ses clients de réserver et s’abonner.

La société a souhaité entreprendre le projet de refonte de son site – initialement propulsé par Drupal 7 - pour des raisons de modernisation de l’identité graphique, d’optimisation de l’expérience utilisateur et dans le but de proposer des fonctionnalités plus intuitives notamment en termes de recherche d’information.

Le projet

Le projet consistait à refondre intégralement le site saemes.fr avec Drupal 8. Le périmètre impliquait les interventions suivantes :

  • La conception et le développement du site Drupal 8 ;
  • La conception UX/UI incluant la déclinaison en responsive design ;
  • L’optimisation SEO ;
  • La migration des contenus...

...mais également l’accompagnement de l’équipe de la SAEMES dans la formation, la maintenance préventive, corrective et évolutive et enfin l’hébergement.

 

Les fonctionnalités proposées

Dans le cadre de ce projet, nous étions en charge de développer plusieurs fonctionnalités :

  • Un moteur de recherche avec un champ libre de saisie par auto-complétion pour la recherche de parking ;
  • Un système de recherche avec des filtres à facette et une carte interactive pour la recherche de parkings - à proximité en fonction des informations renseignées (type de véhicule, durée de stationnement et types de services) ;
  • Le formulaire d’abonnement aux offres de stationnement mensuelles ou annuelles ;
  • L’abonnement à la newsletter pour suivre les informations sur les services de la SAEMES (les informations parkings, les offres en cours concernant les tarifs et les abonnements...) ;
  • Une médiathèque pour la gestion des fichiers multimédias (images, etc.) ;
  • Un site disponible en langues française et anglaise !

Et d’autres fonctionnalités du back-office comme :

  • La gestion des droits et des profils utilisateurs ;
  • La publication d’articles ;
  • La gestion des versions de contenu ;
  • L’analyse de l’audience avec Google Analytics ;

Les particularités du projet

Le site saemes.fr présente quelques spécificités fonctionnelles :

  • Les scripts d’import de données : le site est alimenté par import de données notamment pour les parkings, les tarifs et les services. Il s’agissait de mettre en place des scripts d’imports vers Drupal - fichiers CSV - et permettre une mise à jour des informations parkings / tarifs/ services.
  • Connecteur API Open Data : le site est connecté à l’API Open Data Saemes pour afficher instantanément les places de stationnement disponibles dans les résultats de recherche.
  • Le système de recherche de parking : l’un des objectifs primordiaux de la refonte du site saemes.fr est l’optimisation de la recherche des parkings. Un effort supplémentaire en UX / UI et en intégration front-end a été nécessaire pour proposer une expérience utilisateur user centric.
  • Le parcours utilisateur vers la réservation / l’abonnement : les utilisateurs ont accès aux tarifs de stationnement et aux abonnements après avoir trouvé le parking recherché.

Maquettes UX - extraites du projet abstract.

Cadre technique - Drupal 8

Pour la refonte, nous avons privilégié le CMS Drupal 8 comme pour la grande majorité de nos projets, et ce en raison des nombreux avantages de cette version qui ne sont plus à démontrer (robustesse, plateforme sécure, large éventail de fonctionnalités avancées, etc.)

Nous avons préconisé plusieurs modules dont les plus importants :

  • Pour les formulaires : sans surprise le module Webform ! Ce module propose un large choix de fonctionnalités et de paramètres pour répondre parfaitement aux exigences de la SAEMES. Il a été utilisé pour le formulaire de contact mais surtout pour le formulaire d’abonnement aux offres de stationnement de la SAEMES.
  • Pour la newsletter : nous étions habitués à utiliser Mailchimp mais depuis l’entrée en vigueur du RGPD, il est recommandé de privilégier les solutions françaises qui se déclarent conformes aux exigences du règlement notamment pour le stockage et la sécurité des données. Ainsi, l’équipe de la SAEMES a choisi la solution Mailjet qui propose des fonctionnalités tout aussi qualitatives et bien moins cher que Mailchimp (service gratuit jusqu’à 6.000 e-mails puis 7,95€/ mois entre 6.000 et 30.000 e-mails/ mois, à titre d’exemple).
  • Pour la carte interactive : Gmaps est devenu payant. Nous conseillons la librairie Leaflet qui est amplement suffisante et permet d’utiliser le fonds de carte de votre choix. Cependant, les besoins de la SAEMES étant plus spécifiques, nous nous sommes tournés vers un développement sur-mesure en Javascript de la carte pour une personnalisation plus poussée de la recherche.
  • Pour la médiathèque : le projet de refonte exigeait la mise en place d’une médiathèque pour le stockage et le partage de fichiers multimédias. Nous avons naturellement utilisé la suite Media pour mettre en place un gestionnaire de fichiers sous plusieurs formats (images, vidéos, PDF, etc.) Nous avons également installé le module Entity Browser pour permettre de disposer d’une interface simple pour ajouter/ sélectionner des médias depuis un formulaire d’édition de contenu.

Côté front-end ? Foundation dans notre blank theme « maison » !

Difficultés du projet

Ce projet de refonte demandait une migration des contenus de l’ancien site Drupal 7 vers la nouvelle plateforme Drupal 8 : les utilisateurs, les articles, les pages de parkings et de nombreux fichiers (images, etc.) Nous avons suivi le processus de migration standard proposé par le core de Drupal 8 avec les modules Migrate API et Migrate Drupal UI.

Quelques difficultés sont intervenues :

  • La traduction des contenus : le site Drupal 7 disposait de plusieurs contenus en anglais. Lors de la migration, certains alias n’ont pas été pris en compte.
  • Les formats des éditeurs : la migration Drupal 8 permet de récupérer directement tous les champs de chaque type de contenu. Nous nous sommes confrontés au même problème, certains champs n’ont pas été migrés - notamment pour le champ body. Ainsi, certains contenus présentant une zone de texte, n’affichaient donc pas le texte.
  • Les entités références dans les champs : certaines références d’entités n’ont également pas été migrées correctement. Les champs de type Node reference liés à des types de contenus (par exemple Parkings, tarifs et services…) étaient alors vides.

Pour corriger ces problèmes liés à la migration, des scripts d’import "complémentaires" ont été nécessaires pour migrer les champs qui n’ont pas été pris en compte. Par ailleurs, nous avons du également faire face à d’autres difficultés : nettoyage de certains contenus, suppression des données migrées inutilement, etc.

Conclusion

Nous remercions l’équipe de la SAEMES pour leur étroite collaboration sur ce projet et notre équipe d’experts Drupal pour les résultats de cette refonte !

Vous pouvez laissez vos impressions après la visite : saemes.fr