Conception du cybermarché
Groupe Park Avenue, 2015
Résumé
Vision du produit
En tant que consortium automobile multimarque, GPA possède un large inventaire de véhicules neufs et d’occasion et souhaite le rendre facilement accessible sur son cybermarché.
Problème des utilisateurs
Après avoir déterminé les quelques marques ou modèles qui les intéressent, les consommateurs cherchent un concessionnaire avec qui faire affaire en magasinant en ligne via leur catalogue ou leurs inventaires.
Résultat
Nous avons conçu l’arborescence et l’interface autour des micro-moments rencontrés par les utilisateurs pendant le magasinage afin de faciliter la recherche d’un véhicule et la prise de contact avec un concessionnaire.
Équipe
Designer UX/UI (moi)
Agence de design web
Agence de développement web
Directeur des stratégies numériques
Mes tâches
Arborescence
Parcours des utilisateurs
Approbation des wireframes
Plan du projet
Trois mois pour l’arborescence et la conception visuelle
Six mois de développement
Recherche
Personas
Analyse de la compétition
Le parcours des utilisateurs est sensiblement le même partout où nous avons regardé.
À propos du magasinage en ligne
En 2014, la proportion des utilisateurs sur mobile a bondi considérablement. En 2022, ils représentent 40 % du trafic du site web.
2013 vs 2014
Les consommateurs effectuent leurs recherches partout, à tout moment, créant ainsi une pléiades de micro-moments à exploiter.
- Micro-moments
- Moments riches en intention lorsqu’une personne se tourne vers un appareil pour combler un besoin : pour savoir, aller, faire ou acheter.
Deux défis pour les détaillants automobiles
- Le catalogue et les inventaires doivent être facilement accessibles en tout temps via les moteurs de recherche;
- L’expérience du site web doit être optimisée sur tous les types d’appareils, principalement les téléphones intelligents.
Idéation
La stratégie
- Créer des pages conçues pour les micro-moments qui ciblent les mots-clés utilisés par les consommateurs dans les moteurs de recherche;
- Adopter une approche mobile-first lors de la conception visuelle;
- Présenter une liste de produits correspondant aux mots-clés afin d’accélérer le parcours des utilisateurs vers la page d’un produit.
Étape 1 : Identification des tendances de recherche
| Catégories de mots-clés | Volume mensuel (QC) | Exemples |
|---|---|---|
| Marque | 16 000 |
audi a vendre
audi neuf audi occasion audi usage |
| Marque + Modèle | 70 000+++ |
audi a4
audi a4 neuf audi a4 occasion audi a4 a vendre |
| Marque + Modèle + Année | 12 000++ |
audi a4 2014
audi a4 2011 audi a4 2014 a vendre audi a4 2011 a vendre |
| Marque + Ville/région | 35 000 |
audi brossard
audi montreal audi rive-sud |
| Catégorie | 6 250 |
pick up a vendre
vus a vendre decapotable a vendre |
Étape 2 : Conception visuelle des pages
Le visuel du site web était déjà bien avancé, nous avions les composants essentiels pour constituer nos gabarits.
-
L’entête de chaque page est conçue pour présenter le type de produit que les utilisateurs trouveront et pour faciliter l’indexation des informations par les moteurs de recherche.
-
Le bouton qui affiche les filtres raccourcit la longueur de la page et accélère l’accès à la liste de produits.
-
Le menu du site demeure disponible si le contenu de la page ne correspond pas aux attentes des utilisateurs.
-
Le bouton qui affiche les filtres pourrait se camoufler dans la mise en page et les utilisateurs pourraient passer à côté.
Prototype
Maquettes
Parcours des utilisateurs
Expérimentez le parcours des utilisateurs
Problèmes à l'horizon
Après le lancement, nous avons détecté des statistiques d'engagement décevantes et des embûches dans le parcours des utilisateurs.
Solutions
Résultats
Stratégie d’optimisation pour les moteurs de recherche
L’arborescence permet au site d’occuper une position avantageuse dans les résultats de recherches effectuées par des milliers de clients potentiels.
-
Le site web présente aux utilisateurs du contenu pertinent qui répond à l’intention de leur recherche dès l’atterrissage.
-
Le parcours des utilisateurs est raccourci et simplifié.
-
L’optimisation autour de mots-clés précis cible les utilisateurs en plein cœur de leur magasinage.
-
Certaines pages peuvent afficher une liste de produits vide si aucun véhicule ne correspond aux critères.
-
Plusieurs textes écrits pour les moteurs en 2013 ont été réutilisés pour le projet, les utilisateurs pourraient les trouver désuets.
Approche mobile-first
L’équipe s’est assurée que chaque étape du parcours propose une expérience positive malgré les contraintes.
-
Les fonctions les plus utilisées sont suffisamment visibles et grosses pour les doigts.
-
L’accès à la liste de produits est accéléré.
-
L’entête est cachée pour éliminer l’impression de redondance lorsque l’utilisateur passe d’une page à l’autre.
-
L’équipe n’a pas tenu compte d’une résolution d’écran suffisamment petite lors de la conception: certains aspects du site ne sont pas optimaux lorsque la largeur s’établit sous 375px.
Impacts
Avec un site web conçu en fonction des micro-moments rencontrés par les utilisateurs lors du magasinage, GPA s’est assuré de proposer une expérience simple et positive à ses clients.
-
La moyenne mensuelle du trafic en provenance des moteurs a augmenté significativement :
- 2015 : ~3 000 sessions /mois
- 2017 : ~16 000 sessions /mois (+432 %)
- 2022 : ~34 000 sessions /mois (+1 147 %)
-
Les statistiques des utilisateurs sur mobile ont été améliorées :
- Taux de rebond : Baisse de 29 %
- Pages /session : Hausse de 63 %
- Durée moyenne des sessions : Hausse de 11 %
- Taux de conversion : Hausse de 446 %
-
La stratégie continue de générer du trafic et des profits longtemps après sa mise en place.
-
Les pages ont dû être créées et configurées manuellement, une par une; la mise en place a représenté un long exercice dont certaines étapes ont eu lieu après le lancement.
-
La stratégie nécessite qu’on la monitore afin d’optimiser les acquis et de ne pas les perdre.