Notre équipe a pris en charge la refonte du site saemes.fr en janvier 2018. Elle en a assuré la maintenance pendant toute la durée du marché. Suite à un audit technique et UX, la SAEMES a engagé un nouveau marché dans le but de poursuivre la maintenance de l'applicatif, jugé pérenne par l'audit, et d'améliorer l'expérience utilisateur, notamment en mobilité.
La Saemes
Créée en 1979, Saemes est un opérateur majeur de stationnement en Ile-de-France et gère 30.200 places en ouvrage et en voirie sur plus de 70 parkings. Son périmètre d’activité est le suivant :
- Conception, construction et modernisation de parkings ;
- Exploitation des parkings en concession comprenant l’accueil et la gestion de la clientèle, maintenance, surveillance, nettoyage ;
- Maintenance et collecte des horodateurs, Contrôle du stationnement payant ;
- Conseil (études de stationnement et de faisabilité d’opérations, prestations d’assistance à maîtrise d’ouvrage et maîtrise d’oeuvre, optimisation d’ouvrage).
Historique et nouveau marché
La Saemes a conduit un audit général du site avant la publication de son nouveau marché. Cet audit a montré que le socle technique (Drupal entretenu dans sa version 9) ne mérite pas d'être remis en question, son architecture étant maintenable et correctement développé. Il a cependant soulevé des améliorations possibles à conduire dans une optique d'acquisition de trafic et de transformation (abonnements et réservation), notamment des utilisateurs mobiles du site.
Nous avons conduit ce chantier d'amélioration en collaboration avec l'équipe projet de la Saemes.
Enjeux UX
L'amélioration des parcours UX, dans une optique de performance des parcours a essentiellement mobilisé les équipes sur :
- Le soin apporté à l'expérience mobile d'une manière générale ;
- L'optimisation des pages d'entrée sur le site (accueil, page de détail d'un parking, page de recherche d'un parking) ;
- L'amélioration de la recherche, notamment la recherche géolocalisée ;
- L'optimisation du tunnel de réservation / abonnement.
Lifting UI
Le chantier d'amélioration des parcours a permis, en outre, de conduire un travail de réfection des interfaces et de mise à jour du Design System de la Saemes. Les composants ont été dans une grande majorité recréés, même si la charte graphique web générale de la société n'a pas évolué. Cette étape a été consacrée par la mise à disposition de maquettes figma complètes pour les principaux parcours et du déploiement des composants atomiques nécessaires à l'intégration frontend.
Focus sur la carte interactive Drupal / Mapbox et les comportements
Point central des parcours utilisateurs, la recherche de parking par l'intermédiaire de la carte a été totalement recréée. Au niveau technique, nous avons abandonné l'utilisation de Google Map pour utiliser les services de MapBox, une solution qui permet l'habillage de cartes Open Street Map avec des tuiles personnalisables. Mapbox développe un ensemble d’outils cartographiques, dont la bibliothèque Mapbox.js.
La suite de l'expérience, desktop et mobile a été totalement développée sur-mesure en Javascript. Le résultat est à la hauteur des aspirations initiales et va permettre une réutilisation des composants pour des expériences cartographiques futures.
Focus sur le tunnel de réservation
En plus de l'amélioration de l'expérience globale et des pages d'arrivée sur le site, l'un des objectifs principaux a été d'optimiser encore et toujours la fiche parking, le tunnel d’abonnement et le lien avec Onepark dans l’optique d’améliorer la conversion.
Nous avons concentré nos efforts sur la mise à jour ergonomique, pour permettre aux internautes de passer rapidement d’une étape à l’autre, sans accroc, en apportant à chaque fois le bon niveau d’information / réassurance sans surcharger les écrans.
Le développement Drupal et le souci de la performance
Compte tenu de l’objet du dispositif (résolument tourné vers la conversion) et de la part croissante du trafic mobile, la question des temps de chargement s'est imposé comme un élément prioritaire dans le projet.
Une attention particulière a été apportée sur les points suivants :
- Web vitals : prise en compte des différentes contraintes et notamment le CLS (Cumulative Layout Shift) ou stabilité visuelle au chargement des pages ;
- Images : généralisation du format webp sur l’ensemble des images et compression systématique de l’ensemble des visuels uploadés & vignettes générées ;
- Optimisation de l'architecture d'hébergement avec configuration d'un cache varnish en plus des optimisations habituelles du CMS Drupal (caches, compression des JS et CSS, etc.)
Le site désormais en production répond aux attentes fixées dans le cahier des charges initial. Il convient maintenant d'en surveiller les résultats pour ajuster, si nécessaire, la performance.
Mise en production : le 14 septembre 2022.
URL : https://saemes.fr
Témoignage client :
"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)."
