Transport

SAEMES

Pour la Société Anonyme d’Économie Mixte d’Exploitation du Stationnement de la Ville de Paris (SAEMES), opérateur de stationnent en Île-de-France, nous avons réalisé la refonte intégrale du site internet saemes.fr.
Crédit photo Michael Fousert.

Date of release
September 2022
Nos missions
UX design
UI design
Développement Drupal
Maintenance Drupal
Hébergement

Le marché de 2018

Titulaire d'un premier marché, l'équipe bluedrop.fr a conduit la conception UX et UI, le développement, l’intégration, l’optimisation SEO puis l'hébergement et la Tierce Maintenance Applicative du site saemes.fr.

Périmètre du premier marché :

  • Conception UX et UI ;
  • Développement avec Drupal 8 ;
  • Reprise des contenus ;
  • Hébergement et maintenance du site.

Nouveau marché en 2022

Suite à un audit externe qui n'a pas remis en cause la maintenabilité du socle technique, la Saemes a souhaité poursuivre les travaux d'optimisation UX et UI dans un souci de performance des parcours. Le chantier d'amélioration, confié à l'équipe de l'agence bluedrop.fr, s'est concentré sur les parcours mobiles, la cartographie et le tunnel de réservation.

Mise en production saemes.fr, parcours augmentés avec Drupal et Mapbox
Accueil saemes

Enjeux UX

Points d'amélioration :

  • Expérience mobile ;
  • Optimisation des pages d'entrée (accueil, parking, recherche) ;
  • Amélioration de la recherche, notamment la recherche géolocalisée ;
  • Optimisation du tunnel de réservation / abonnement.

L'interface utilisateur 

Voici le résultat de la collaboration entre les équipes UX, UI et l'équipe projet au complet. Inutile de multiplier les captures d'écran... Le plus efficace est de visiter le site !

accueil saemes
pages saemes

Drupal et le souci de la performance

L'objet de la réfection du site, concentré sur la conversion des parcours et l'augmentation du trafic mobile, a imposé un travail approfondi d'optimisation de la plateforme en matière de performance d'affichage. L'équipe technique a pris soin :

Les critères "web vitals"

Prise en compte des contraintes et du CLS (Cumulative Layout Shift) ou stabilité visuelle au chargement des pages.

Les images

Généralisation du format webp sur l’ensemble des images. Puis, compression systématique de l’ensemble des visuels uploadés et des vignettes générées.

L'architecture d'hébergement

Avec la configuration d'un cache varnish en plus des optimisations habituelles du CMS Drupal (caches, compression des JS et CSS, etc.).

Photo représentant une partie des maquettes réalisées

Carte interactive Drupal / Mapbox et les comportements

La recherche géolocalisée (carte interactive) a été totalement redéveloppée. L'utilisation de Google Map a été abandonnée et remplacée par les services de MapBox, qui permet l'habillage de cartes Open Street Map avec des tuiles personnalisables.

L'expérience frontend a été développée sur-mesure en Javascript. Le résultat est à la hauteur des aspirations initiales des utilisateurs.

Photo illustrant la mobilité à Paris - bluedrop.fr

Mise en production saemes.fr : les parcours mobiles augmentés avec Drupal et Mapbox

For more information, you can consult our blog article on the subject.

"BRAVO à tous pour cette MEP réussie hier !Je vous remercie pour votre investissement et persévérance, malgré les difficultés rencontrées (notamment pour l’import des tarifs dans la dernière ligne droite du projet)."

Valérie Eynaud, notre cliente
Valérie Eynaud Responsable communication digitale

Vous avez un projet web avec Drupal ?
Parlons-en !

Votre projet