Anticiper les jeux
Introduction
Le site anticiperlesjeux.gouv.fr est une plateforme essentielle pour les habitants de l'Île-de-France, offrant des conseils et des outils pour préparer leurs trajets pendant les Jeux Olympiques.
Il propose également une carte interactive indiquant les prévisions d'affluence dans les transports en commun et les restrictions routières.
Dans le cadre d'une étude sur le CRO, j'ai travaillé sur ce site.
J'avais un objectif principal: l'augmentation du taux de conversion du site passant par l'augmentation des micro conversions.
Point de départ
Le site, bien que fonctionnel, présente plusieurs défis :
- La carte, élément central du site, est difficilement accessible depuis la page d'accueil. Actuellement, une image de vélo occupe la section hero, ce qui n'attire pas immédiatement l'attention sur la carte.
- Personnalisation des Alertes : Les utilisateurs ne peuvent pas personnaliser les alertes en fonction de leurs trajets spécifiques, limitant ainsi la pertinence des informations reçues.
- Le bouton d'appel à l'action (CTA) pour consulter la carte n'est pas suffisamment mis en avant, réduisant ainsi le taux de conversion.
A partir de ce constat, voici les objectifs:
- Augmenter le taux de conversion global du site.
- Améliorer les micro conversions, telles que l'abonnement aux alertes informations.
- Prolonger le temps passé par les utilisateurs sur le site.
Phases du projet
👨💻 Création de personas
🔬 Analyse de l'existant
🎯 Définition des objectifs et des hypothèses
🖼️ Conception et prototypage
❓ Tests utilisateurs
📈 Ajustements
Résultat final
Pour répondre à la problématique, il a fallu définir trois axes d'amélioration:
1er axe: le header du site et particulièrement le hero.
2ème axe: L'alerte information à enrichir et améliorer.
Puis le 3eme axe et le plus conséquent: la carte interactive.
Une matrice de faisabilité a été faite pour comprendre la relation entre l'impact d'une mesure et la facilité/temps de mise en œuvre de chaque axe.
Attaquons nous à la première amélioration avec le hero:
La section contenait auparavant un texte sans information pertinente et un petit CTA pour accéder à la carte interactive. Une image générée par IA, sans valeur ajoutée, ornait la droite de la section. Grâce aux enquêtes et interviews, un élément est souvent revenu : "On ne voit pas assez le CTA et on ne comprend pas ce que la carte nous apporte".
Le CTA a donc été agrandi afin d'être mieux mis en évidence. Deux nouveaux CTA ont été ajoutés pour guider l'utilisateur vers les sections pertinentes selon son profil : particulier ou professionnel.
Enfin, le texte a été amélioré et enrichi avec des informations utiles pour que la fonction principale du site soit immédiatement comprise. L'ajout de nombres impairs dans le texte et l'inversion de la disposition entre le texte et l'image ont également contribué à améliorer le taux de conversion.
Seconde amélioration: l'alerte information
Après cette première amélioration, notre second travail s'est concentré sur l'alerte d'information pour tenir les utilisateurs au courant des perturbations liées aux Jeux Olympiques.
Nous avons remarqué que cette alerte n'était ni paramétrable ni personnalisable, ce qui limitait son efficacité et son attrait. Voici comment nous avons imaginé ces ajouts pour augmenter le nombre de micro conversions :
Le champ d'abonnement à l'alerte info, déjà clair et précis, n'a pas été modifié.
Cependant, nous avons ajouté un petit panneau déroulant en dessous pour offrir plus de flexibilité.
Grâce à un système de cases à cocher, les utilisateurs peuvent facilement sélectionner les informations qu'ils souhaitent recevoir dans leur boîte email. Facile, non ?
Le nouveau paramétrage se compose de quatre zones principales:
Grâce à ces améliorations, l'utilisateur se sent directement concerné et trouve plus d'intérêt à s'inscrire à l'alerte info. Cette personnalisation renforce l'engagement des utilisateurs et augmente la pertinence des informations reçues, ce qui se traduit par une hausse significative des micro conversions.
Pour terminer ces améliorations, voici la carte interactive:
Le troisième axe d'amélioration s'est concentré sur la carte interactive, un outil clé pour aider les utilisateurs à anticiper les perturbations liées aux Jeux Olympiques.
Voici comment nous avons optimisé cette fonctionnalité pour améliorer l'expérience utilisateur et maximiser l'engagement :
Le principal travail sur cette carte a été apporté sur le menu.
Lors des interviews, les utilisateurs se sentaient perdus, la faute à une disposition d'informations composé uniquement de texte concernant les transports en communs.
Le bandeau a aussi été modifié pour accroitre l'expérience utilisateur et l'accessibilité.
Enfin le zoning a été perfectionné. Auparavant le bandeau gauche venait en superposition de la carte et venait donc cacher certaines infos.
Il a été fait le choix de séparer en trois parties les éléments pour faciliter la lecture et réduire le plus possible le taux de rebond de cette page du site.
Avec tous ces changements, la carte est maintenant plus accueillante et permet en coup d'œil de saisir l'information.
Elle est devenue un outil central et intuitif pour les utilisateurs, leur permettant de planifier leurs déplacements de manière plus efficace pendant les Jeux Olympiques.
Les modifications ont non seulement amélioré l'accessibilité et la navigation, mais ont également augmenté la pertinence des informations fournies, ce qui a conduit à une augmentation du temps passé sur la carte et à une meilleure satisfaction des utilisateurs comme nous avons pu le constater lors des tests utilisateurs.
Avec ces trois optimisations, le site Anticiper les jeux devient plus accueillant, plus pratique, plus accessible tout en optimisant l'objectif de conversion qui est la carte interactive.
De plus l'alerte info avec ses nouvelles personnalisations augmente les micro conversions. Cet exercice a aussi permis de travailler le design au service d'un objectif.
Le design system de l'Etat (DSFR) a été utilisé pour garantir une compatibilité avec le site actuel à 100%.
Voir plus ici: Accueil - Système de Design de l'État (systeme-de-design.gouv.fr)
