Le coq sportif : +16% de conversion  Patience, persévérance & testing Le coq sportif : +16% de conversion  Patience, persévérance & testing

Le coq sportif : +16% de conversion Patience, persévérance & testing

par ,
le 14 janvier 2014

0
0

Le Coq Sportif ce n’est pas seulement une marque français centenaire, c’est une marque qui a contribué à certaines des plus belles aventures sportives française comme l’épopée de l’AS St Etienne, Yannick Noah ou encore le XV de France. Après un passage à vide au milieu des années  90, la marque renait de ses cendres à partir 2007 en s’axant sur un nouveau positionnement résolument urbain et tendance.

Pour les raisons énoncées ci-dessus, le Coq Sportif est une marque que j’affectionne particulièrement. JOIE DANS MON COEUR  lorsque Cédric Bertin, E-commerce et Digital Project Manager est venu nous consulter avec un  brief simple : «Nous souhaitons augmenter le taux de conversion de notre site tout en valorisant notre image de marque. Nous ne souhaitons pas mettre en place de développements spécifiques car l’objectif est de déployer des tests le plus rapidement possible.»

Le challenge.

Le brief donné, s’en suit l’analyse du site, bilan : c’est pas mal du tout. Ascenceur émotionnel pour le consultant en quête de test A/B rapides à l’uplift important et immédiat : le parcours est fluide l’interface est plutôt claire, il ne semble pas y avoir de point de friction majeur. Trois éléments importants ont toutefois retenu mon attention et vont être la cible de cette première campagne d’optimisation.

Mon premier : la navigation.

Sur le site original, la navigation est doublonnée : une fois en horizontal avec un système de layer de navigation par sexe et une seconde fois en colonne sur la descente produit.

Navigation version originale
Version originale : navigation doublonnée en haut et à gauche.

 

Le menu de navigation en layer ajoute une étape supplémentaire pour les devices tablette et mobile et est frustrant pour les utilisateurs. Je clique j’affiche le layer, je reclique ensuite sur ma catégorie et ainsi de suite.

Le menu en colonne offre quant à lui un accès immédiat aux catégories produit et solutionne le problème lié aux devices mais utilise un espace en coeur de page qui a normalement vocation à valoriser l’offre produit. Nous avions déjà rencontré ce cas de figure lors d’un test avec Petit Bateau et le résultat montrait qu’un template orienté produit génère plus de conversions.

Un utilisateur mobile confronté à des layers de navigation
Un utilisateur mobile confronté à des layers de navigation

La première recommandation est donc de mettre en place une navigation plus simple, moins gourmande en place et qui n’oblige pas à faire deux clics pour changer de catégorie.

Navigation horizontale
Axe de test n° 1 : La navigation de gauche et le système de layer est supprimé au profit d’une navigation entièrement horizontale.

 

Navigation sans layers
Axe de test n°2 Les layers du menu principal sont supprimés pour que les utilisateurs utilisent le menu de gauche.

 

Mon second : une amélioration performante peut-être une somme de petiteS améliorations.

Certes il n’y a pas de point de friction majeur dans le parcours, mais il existe tout de même une somme de petites frictions pouvant amener l’utilisateur à abandonner le process d’achat. Quelques exemples ci-dessous.

Exemple 1 : têtière de page liste :

version originale : le visuel de têtière en page liste est peu immersif et repousse les produits en dessous de la ligne de flottaison.
version originale : le visuel de têtière en page liste est peu immersif et repousse les produits en dessous de la ligne de flottaison.

 

Recommandation : supprimer le visuel de têtière pour que les produits soient immédiatement visibles.
Recommandation : supprimer le visuel de têtière pour que les produits soient immédiatement visibles.

 

Exemple 2 : header

Version originale : Le logo est très petit et ne permet pas d’identifier instantanément que l’on se trouve sur le site de la marque.
Version originale : Le logo est très petit et ne permet pas d’identifier instantanément que l’on se trouve sur le site de la marque.

 

Recommandation : agrandir le logo.
Recommandation : agrandir le logo.

 

Exemple 3 : Bloc d’achat fiche produit

Version originale : la hiérarchie du bloc n’est pas optimale, les éléments de sélection sont petits et le comportement des éléments sélectionnés est peu visible.
Version originale : la hiérarchie du bloc n’est pas optimale, les éléments de sélection sont petits et le comportement des éléments sélectionnés est peu visible.

 

Recommandation :  rendre les éléments de sélection et le CTA  plus visibles. Positionner le prix et la rassurance dans la même zone que le call to action.
Recommandation : rendre les éléments de sélection et le CTA plus visibles. Positionner le prix et la rassurance dans la même zone que le call to action.

 

Au total ce sera plus de 37 quick-wins comme ceux-ci qui sont intégrés au test.

 

Mon troisième : recentrer le produit au coeur de l’interface

Sur la version d’origine les visuels produits sont de taille moyenne et écrasés par l’interface. Cette construction empêche l’utilisateur d’avoir une perception optimale du produit.

Version originale : le visuel est petit et écrasé par le bloc de sélection
Version originale : le visuel est petit et écrasé par le bloc de sélection
Recommandation: agrandir le visuel produit, l’espacement entre le visuel produit et les éléments de l’interface doivent être définis en fonction de la largeur de la fenêtre de l’utilisateur.
Recommandation: agrandir le visuel produit, l’espacement entre le visuel produit et les éléments de l’interface doivent être définis en fonction de la largeur de la fenêtre de l’utilisateur.

 

Mon tout : Le test !

Lancement du test

Le volume de trafic ne permet pas de tester indépendamment l’ensemble de ces éléments, en conséquence, seules 3 versions de test ont été définies. L’élément différenciant de ces trois versions porte sur le système de navigation, élément pouvant avoir le plus d’impact sur le parcours utilisateur. Toutes les versions de test embarquent les 37 quick-wins et les améliorations relatives au visuel.

Au bout de 4 semaines de test, le résultat est en faveur de la version incluant la navigation intégralement horizontale mais déception l’uplift n’est que de 4%.

L'uplift n'est que de 4%
L’uplift n’est que de 4%

 

En soi +4% d’amélioration de la conversion n’est pas un mauvais résultat mais au vu du nombre d’éléments  améliorés et de l’impact sur la navigation ce résultat semble bien faible.

L’analyse des datas du test révèle que le point de friction majeur se trouve au niveau de la page liste. Or l’axe d’amélioration le plus impactant de la page liste consiste à adapter le nombre de produits par ligne en fonction de la largeur de la fenêtre de l’utilisateur.

Test n°1 :  version gagnante : utilisation de toute la largeur de la fenêtre utilisateur pour valoriser un maximum de produits.
Test n°1 : version gagnante : utilisation de toute la largeur de la fenêtre utilisateur pour valoriser un maximum de produits.

 

Test n°1 : Fiche produit  : version gagnante
Test n°1 : Fiche produit : version gagnante

 

Test n°2 : target page liste

Nous choisissons donc de relancer la version gagnante contre la version originale avec quelques ajustements qui devraient permettre d’annihiler le point de friction en page liste :

  1. ajustement du coeur de page de la page liste basée sur 4 colonnes : objectif aérer l’interface et permettre une lecture plus simple de la page.
  2. passage du coeur de page de la fiche produit en largeur fixe pour que le comportement soit cohérent avec la page liste.
Test n°2 : Page liste : recentrée sur 4 colonnes fixes
Test n°2 : Page liste : recentrée sur 4 colonnes fixes

 

Test n°2 : Fiche produit : coeur de page en cohérence avec la page liste
Test n°2 : Fiche produit : coeur de page en cohérence avec la page liste

 

Les résultats du test ? Clairement négatifs, le test est stoppé avant même la stabilisation fine des résultats. La première question à laquelle il faut répondre à ce stade concerne le point principal de friction de la version de test. S’est-il déplacé par rapport au test précédent ? Y’en a t’il désormais plusieurs ?

On recommence, analyse du parcours et… surprise le taux d’accès à la fiche produit a été grandement amélioré et c’est à présent la performance de la fiche produit qui est en cause, le taux d’ajout au panier est bien moins important que sur la version originale.

Test n°3 : l’incohérence peut-elle générer de la performance ?

Au vu des résultats du test précédent, il semble évident qu’ajuster le positionnement des éléments d’interface en fonction de la largeur de la fenêtre de l’utilisateur sur la fiche produit contribue à une meilleure conversion. A l’inverse il semble aussi évident qu’un template fluide sur la page liste est trop perturbant pour les utilisateurs car la lecture de la page en devient trop complexe.

Alors ? Est-ce qu’un template «fluide» sur la fiche produit peut coéxister avec un template «fixe» sur la page liste sans que les utilisateurs soient complètement perturbés ? Ne reste plus qu’à tester pour le savoir.

Test n°3 : Page liste : coeur de page fixe sur 4 colonnes.
Test n°3 : Page liste : coeur de page fixe sur 4 colonnes.

 

Test n°3 : Fiche produit : coeur de page fluide pour permettre une meilleure perception du visuel produit.
Test n°3 : Fiche produit : coeur de page fluide pour permettre une meilleure perception du visuel produit.

 

A l’issue de ce dernier test de 3 semaines contre la version originale, l’uplift est stable à+16%. La valeur ajoutée offerte par une interface fluide sur la fiche produit maximise la perception du produit plus qu’elle ne déstabilise les utilisateurs.

 

+16% de conversion : que faut-il retenir de ce test ?

Méthodologie et gestion de la déception :

Le testing est un cycle sans fin d’amélioration et faire un test n’est pas une fin en soi. Un résultat de test négatif ou déceptif n’est jamais une défaite et encore moins une perte de temps. Dès lors qu’un test vous permet de tirer des enseignements, ils vous permettent de mieux comprendre vos utilisateurs et leurs réactions et donc d’affiner vos pistes de tests ou de changer d’angle d’attaque.

Apprendre et capitaliser sur les enseignements est important
Apprendre et capitaliser sur les enseignements est important

 

Enseignements :

Devices mobiles : éviter les frictions
La simplification de la navigation et la suppression du système de layer peu adapté aux devices mobiles permettent d’améliorer fortemment le taux de conversion (+130% d’amélioration sur les devices mobiles).

Page liste et fiche produit : valoriser le produit avant tout
Recentrer le produit au coeur de la fiche produit et avant tout autre contenu permet de favoriser la perception de l’article et de simplifier le parcours utilisateur.

L’utilisation des tétières en page liste était ici peu adaptée et repoussait les produits trop en dessous de la ligne de flottaison. Ces blocs ont un impact particulièrement négatif sur les devices mobiles. La suppression de cet élément a permis, entre autres, d’améliorer la performance de cette page.

Orientation du choix : densité ne rime pas toujours avec performance
Une offre produit trop dense sur des pages dont le but est d’aiguiller l’utilisateur par rapport à son besoin/envie génère de l’angoisse et ne valorise pas les produits.

PDF > Télécharger le case study

 

 

mots-clés :

, , , ,

, , , ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

Le coq sportif : +16% de conversion Patience, persévérance & testing