Tecnifibre

Jeu, set et match !

Refonte des pages catalogue et produit pour améliorer la conversion et clarifier l'expérience d'achat.

Expertises

  • UI
  • UX

Date

Juillet 2024
Photo d'une ligne blanche d'un terrain de tennis (gros plan)

Refonte des pages catalogue et détails produit

Contexte

J'ai accompagné Tecnifibre dans la refonte de deux pages clés : la page catalogue et la page produit. L'objectif était double : simplifier la navigation et augmenter la conversion, pour des utilisateurs aussi bien grand public que professionnels.

Rien ne se perd, tout s’analyse

Tracking de l’existant

La première étape a consisté en une analyse de l'existant (heatmaps, tracking, pages les plus visitées), réalisée par datacrew.
Je me suis appuyé sur leurs résultats pour identifier les priorités et orienter les choix de refonte.

Screenshot de la clic map du site Tecnifibre avant refonte

Garder un œil sur le terrain 

Audit concurrentiel

J'ai analysé les pages catalogue et produit de quatre concurrents directs pour identifier les conventions du secteur, repérer ce qui fonctionne et éviter les erreurs déjà commises ailleurs.

Page catalogue de Decathlon

DECATHLON

Page catalogue de Babolat

Babolat

Page produit de Head

HEAD

Page produit de Wilson

Wilson

Préparer le terrain

Wireframes

Wireframe de la page produit

Page catalogue

Wireframe de la page catalogue

Page produit

Premier service !

La nouvelle page catalogue desktop

La bannière en haut de page a été supprimée pour que l'utilisateur voie davantage de produits dès le chargement. Les filtres sont désormais fixes au scroll, avec un indicateur visuel pour signaler qu'ils sont navigables.

Les trois catégories les plus utilisées s'affichent dépliées par défaut, ce qui réduit le nombre de clics. Le bouton "Réinitialiser" n'apparaît que lorsqu'un filtre est actif, pour ne pas encombrer l'interface inutilement.

Les étiquettes "nouveauté" ont été repositionnées à proximité des informations textuelles pour plus de lisibilité. Le chargement semi-infini a été remplacé par une pagination classique, plus maîtrisable pour l'utilisateur.

Refonte de la page catalogue

Refonte de la page catalogue

Premier service !

Les nouvelles pages catalogue mobile

Page catalogue mobile

Catalogue

Page catalogue mobile (suite)

Catalogue (suite)

Page catalogue mobile : les tris

Ordre de tri des produits

Page catalogue mobile : les filtres

Filtres des produits

Second service !

La nouvelle page produit desktop

La galerie photos est désormais fixe au scroll dans la partie haute de l'écran, ce qui maintient la visibilité du produit pendant la sélection des variantes. Les champs déroulants superflus ont été supprimés pour simplifier l'ajout au panier.

Toutes les variantes sont affichées, y compris celles en rupture de stock, avec la possibilité d'activer une alerte de réassort. L'utilisateur sait toujours ce qui existe, même si ce n'est pas disponible.

Le contenu de la page est entièrement administrable depuis le back-office, regroupé de façon claire pour limiter le scroll. Des suggestions de produits complémentaires en bas de page encouragent la découverte et soutiennent la conversion.

Page produit

Page produit

Second service !

Les nouvelles pages produit mobile

Page produit mobile

Page produit

Page produit mobile (la suite 1)

Page produit (suite 1)

Page produit mobile (la suite 2)

Page produit (suite 2)

Page produit mobile (la suite 4)

Page produit (suite 3)

Page produit mobile : galerie photo

Galerie photos

Page produit mobile : alerte réassort

Création d’une alerte pour le réassort

Affichage de l’aperçu du panier