Our team took charge of the redesign of the saemes.fr website in January 2018 and handled its maintenance throughout the duration of the contract. Following a technical and UX audit, SAEMES initiated a new contract to continue maintaining the application, which the audit deemed sustainable, and to improve the user experience, particularly on mobile devices.
Saemes
Founded in 1979, Saemes is a major parking operator in Ile-de-France and manages 30,200 spaces in facilities and on-street parking across more than 70 car parks. Its scope of activity includes:
- Design, construction, and modernization of car parks;
- Operation of concession car parks including reception and customer management, maintenance, security, cleaning;
- Maintenance and collection of parking meters, paid parking control;
- Consulting (parking studies and feasibility studies, project management assistance and project ownership, site optimization).
History and new contract
Saemes conducted a full site audit before releasing its new contract. This audit showed that the technical foundation (Drupal maintained in its version 9) did not need to be reconsidered, as its architecture was maintainable and properly developed. However, it did highlight potential improvements in terms of traffic acquisition and conversion (subscriptions and booking), especially for the site’s mobile users.
We carried out this improvement initiative in collaboration with the Saemes project team.
UX challenges
Improving UX journeys with a focus on performance mainly engaged the teams on:
- Careful attention to the overall mobile experience;
- Optimization of entry pages (homepage, parking detail page, parking search page);
- Enhancing search, particularly geolocated searches;
- Optimizing the booking/subscription process.
UI Refresh
This improvement initiative also led to a revamp of the interfaces and an update of the Saemes Design System. Most components were recreated, even though the company’s general web style guide did not change. This stage was completed by providing full Figma mockups for the main user journeys and deploying the necessary atomic components for front-end integration.
Focus on the interactive Drupal/Mapbox map and behaviors
The search for parking via the map—a central part of the user journey—was completely rebuilt. Technically, we abandoned Google Map to use MapBox, a solution that enables Open Street Map maps to be styled with customizable tiles. Mapbox develops a range of mapping tools, including the Mapbox.js library.
The rest of the experience, both desktop and mobile, was entirely custom developed in Javascript. The result lives up to the initial expectations and will allow for component reuse in future mapping experiences.
Focus on the booking process
In addition to improving the overall experience and landing pages, one of the main goals was to further optimize the parking listing, the subscription process, and the connection with Onepark to improve conversion.
Our efforts were focused on ergonomic updates to enable users to move quickly from one step to another without any issues, providing the right level of information or reassurance each time, without overloading the screens.
Drupal development and focus on performance
Given the purpose of the system (clearly focused on conversion) and the growing share of mobile traffic, the issue of loading times quickly became a top priority.
Special attention was paid to the following points:
- Web vitals: taking into account the different constraints, including CLS (Cumulative Layout Shift) or visual stability when loading pages;
- Images: widespread adoption of the webp format for all images and systematic compression of all uploaded visuals and generated thumbnails;
- Optimizing the hosting architecture by configuring a varnish cache in addition to the usual Drupal CMS optimizations (caches, JS and CSS compression, etc.)
The site, now in production, meets the goals set out in the initial requirements. The results should now be monitored regularly in order to adjust performance as needed.
Go-live: September 14, 2022.
URL: https://saemes.fr
Client testimonial:
"Congratulations to everyone for the successful go-live yesterday!
Thank you for your commitment and perseverance, despite the difficulties encountered (especially importing rates in the home stretch of the project)."
