Citiz

Un univers web cohérent et dynamique

À partir de la charte graphique existante de Citiz, nous avons imaginé et défini un univers web commun, décliné sur l’ensemble des sites du réseau. L’objectif était de donner un nouveau souffle à l’écosystème digital de Citiz et d’y apporter davantage de modernité, tout en respectant l’ADN de la marque.

Pour créer du dynamisme et de la diversité visuelle, nous nous sommes appuyés sur les couleurs existantes en développant des variations graphiques adaptées aux différents types de contenus et de parcours utilisateurs. Nous avons également conçu des fonds de page modulables, intégrant des motifs de routes aux formes et couleurs variées, en lien direct avec l’univers de l’autopartage et de la mobilité.

L’ensemble de cet univers web a été pensé pour être cohérent, déclinable et accessible, garantissant une expérience lisible et inclusive sur tous les sites, quel que soit l’opérateur local ou la langue.

Comment s’assurer de l’adaptabilité et de l'évolutivité des sites ?

Ce vaste projet présente plusieurs défis :

• 18 sites à refondre
• un site national
• 17 sites d’opérateurs différents
• des contenus à la fois identiques à chaque site qu'il faut pouvoir maintenir facilement, et des contenus différents propres, avec des sources de données variées
• les sites des opérateurs doivent être administrables avec différents droits d'accès

Nous souhaitions nous assurer que les sites restent fonctionnels et ergonomiques, qu’importe les connaissances et le type de contenu ajouté par les administrateurs.

Après les premières réflexions, nous avons fait le choix de développer des sites possédant une même base commune articulée autour d’un thème WordPress très modulaire et d’extensions réalisées sur mesure, s’adaptant au contexte (opérateur ou national) et permettant la rédaction de nouveaux contenus dans une interface d’édition agréable à utiliser.

Plus particulièrement nous avons construit grâce à ACF (Advanced Custom Fields) des types de données structurées et des blocs associés. Des champs additionnels s'ajoutant aux blocs natifs de WordPress facilitent la saisie avec une mise en forme automatique. Nous avons créé ces blocs personnalisés (avec diverses fonctionnalités) visibles depuis l’éditeur Gutenberg intégré à WordPress, pour faciliter la mise en page de chaque site.

Des données en mouvement

Chaque opérateur Citiz disposant de son propre parc de véhicules et de sa propre grille tarifaire, il était essentiel de leur offrir une liberté de gestion tout en simplifiant la mise en place des contenus.

Nous avons développé un système permettant l’import des véhicules et des tarifs via un fichier CSV, basé sur un modèle fourni et prêt à l’emploi. Une fois le fichier complété, l’ensemble des données est automatiquement intégré au site. Pour plus de souplesse, chaque élément importé reste modifiable individuellement depuis le back-office, permettant d’ajuster ponctuellement un tarif, une information véhicule ou une disponibilité. Cette solution offre un gain de temps significatif, améliore la proactivité des équipes locales et facilite la gestion quotidienne des offres.

Multisite, multi-contenus

Depuis une installation en réseau WordPress Multisite, chaque site opère de manière autonome tout en partageant une base commune et profite de modules personnalisables tels que :

• une carte interactive des véhicules disponibles,
• une carte interactive des opérateurs Citiz présents sur le territoire français,
• un simulateur de tarif permettant d’estimer le coût d’un trajet personnalisable,
• une FAQ structurée par catégories,
• un blog pour la publication de contenus éditoriaux,
• un système de gestion et d’affichage des avis,
• une publication des offres d’emploi

Toutes ces fonctionnalités sont pensées pour être mutualisées, évolutives et facilement administrables.

Cartes avec recherche interactive

Pour le site national et les sites des opérateurs, des cartes géographiques sont un élément important pour le public qui va chercher une information géolocalisée pour ses propres besoins :

• visualiser un véhicule dans une zone géographique définie
• réserver le véhicule sélectionné
• être accompagné jusqu’au véhicule à l'aide d'un itinéraire calculé
• Nous récupérons les données via une API développée par Citiz qui permet de rechercher des véhicules en fonction de l'opérateur de la zone

Les cartes font appel à OpenStreetMap et Leaflet pour une personnalisation graphique et l’ajout de composants fonctionnels tels que des marqueurs d'emplacement, des pop-ups d'information ou une barre de recherche intelligente.