Dans le cadre d’une analyse d’un cas fictif (Énergie Cardio) pour une agence à Montréal, j’ai eu à documenter ma méthodologie UX, ainsi qu’à réaliser des maquettes rapides sur Adobe XD en incluant mes recommandations afin que le site puisse atteindre une augmentation du nombre d’abonnements.
MÉTHODOLOGIES UX
Pour atteindre l’objectif fictif d’Énergie Cardio, alors j’ai proposé à l’agence de décortiquer la mise en place de l’optimisation de l’interface web en plusieurs étapes. Les phases ont été découpées de cette manière : découvrir avec empathie, définir et interpréter, l’idéation, expérimenter à l’aide de prototypage, puis tester les interfaces auprès des clients et optimiser en continu.
Dans la phase 1, je proposais ces différentes étapes :
- Brief de design (cadrage) : centrer les objectifs/KPIs/cibles/budget média avec le client;
- Évaluation heuristique du site Web et de l’application mobile pour évaluer l’expérience actuelle;
- Données analytiques et veille stratégique : découvrir les utilisateurs du site, puis analyser l’ergonomie (facilité d’utilisation et normes d’accessibilité), l’architecture et la performance (taux de conversion, référents, clics, coût par conversion et le chargement des pages), recueillir les données sur les leads générés grâce aux boutons « Abonnements », les emplacements des CTA, le parcours pour atteindre l’objectif (entonnoir de conversion) et le temps alloué pour réaliser la tâche;
- Benchmarking UX : concurrence et meilleures pratiques dans l’industrie;
- Recrutement : parties prenantes et membres de l’audience cible;
- Questionnaire en ligne, entrevues et observation avec des utilisateurs du service pour évaluer l’efficacité des fonctionnalités et les besoins des utilisateurs.
Dans la phase 2, je suggérais :
- Activité avec les parties prenantes et des membres de la cible (idéation : parcours, tactiques, UI et UX);
- Définir les moments de vérité : qu’est-ce qui fait que les gens s’abandonnent?;
- Créer et prioriser les personas à atteindre selon les types d’utilisateurs en ligne et les données qualitatives reçues (questionnaire, entrevues et observations);
- Déterminer les parcours typiques et l’architecture de l’information.
Ensuite, pour la phase 3 de l’idéation, je proposais ceci :
- Atelier de conception : « Comment pourrions-nous… » avec le storyboarding et le design participatif;
- Cibler les tactiques pour attirer le trafic vers les abonnements : SEO/SEM/Médias sociaux/infolettre, etc. selon les données de notre recherche et de notre analyse de performance numérique, en plus de l’activité design;
- Cadrer 2 tests A/B à concevoir (2 nouvelles architectures/structures de pages);
- Lister les ressources nécessaires (contenu pour les tests).
En phase 4, je voyais ces étapes-ci :
- Tri de cartes pour l’architecture de l’information, le regroupement et évaluer les messages cohérents selon les besoins et comportements des utilisateurs;
- Conception des tests A/B : fils de fer et haute fidélité;
- Tests utilisateurs individuels pendant la conception pour améliorer les deux versions des tests afin d’atteindre les objectifs et maximiser le ROI;
- Assurer la qualité des fonctions (avant et après la mise en ligne) : fonctionnalités, sécurité, tags, entonnoir de conversion, CMS, animations, contenus, rapidité, etc.
En terminant, pour la phase 5, les étapes suivantes selon moi étaient essentielles :
- Lancer les tactiques marketing et les tests;
- Analyser les données des tests une fois le lancement effectué;
- Optimiser en continu pendant quelques semaines;
- Comparer la performance des abonnements;
- Prise de décision sur la version optimale avec un ROI maximal et un coût par conversion moindre.
PROTOTYPAGE ET RECOMMANDATIONS
Pour la page d’accueil, je recommandais ces changements :
- Mettre la promotion de l’avant (saisonnalité) sur la page d’accueil et un CTA pour inviter les futurs clients à s’abonner en 3 clics;
- Hausse de 38 % de la conversion (Source : Adviso);
- Suppression du bouton « Je m’abonne » en haut à droite.
J’ai ensuite proposé que le futur client soit redirigé directement vers la page offrant l’information détaillée de l’abonnement, afin qu’il puisse commencer le processus d’inscription.
Sur cette page, j’ai modifié les versements, afin que le client puisse choisir le type de versements pour son abonnement.
Pour accrocher le client afin de l’aider à confirmer son choix, j’ai ajouté le choix populaire visuel pour inciter le futur client à sélectionner cette option.
- Le choix de l’abonnement est sélectionné et le client peut comparer les abonnements;
- Il clique sur « Le Virtuel » et peut voir la page avec les informations complètes, puis passer à l’inscription;
- Populaire : indicateur qui accroche pour aider les futurs clients à confirmer leur choix (+ 51 % de variation selon Adviso).
J’ai aussi recommandé une autre version de sélection de choix populaire :
- Alternative pour montrer plus rapidement les cartes des forfaits d’abonnement pour minimiser la longueur de la page (défilement);
- Bouton accentué : +10 % des visiteurs ajoutent le produit au panier (Source : Adviso).
Enfin, j’ai simplifié la page « Paiement » en incluant :
- Un résumé des informations sur le côté pour voir un coup d’œil dans l’écran, au lieu de défiler la page pour compléter les informations de paiement;
- La transaction directement au paiement après avoir complété le formulaire.
Voir les maquettes sur Adobe XD : https://xd.adobe.com/view/e359630b-9f13-4391-9007-52406fe36bca-b60a/grid?hints=off
Émilie Monette 