Détails du projet

Repenser une page d’offres à fort trafic pour clarifier la proposition de valeur, renforcer la confiance et fluidifier le passage à l’action sur web et mobile.

Projet réalisé dans un contexte réel, présenté ici dans une version anonymisée.
Projet Page Shop - Plateforme Cashback
Services Product Design - UX/UI
Année 2024
Aperçu du projet Widilo Shop Page

Pourquoi les utilisateurs abandonnaient la page shop

Avant de concevoir quoi que ce soit, nous avons analysé les comportements existants via des interviews utilisateurs et des données analytiques pour comprendre les vrais points de friction.

Clarté des offres insuffisante

Les utilisateurs ne comprenaient pas rapidement la valeur des offres cashback disponibles.

Manque de réassurance

Absence d'éléments de confiance (avis, garanties) freinant le passage à l'acte.

Parcours trop complexe

Le chemin entre la découverte d'une offre et la validation du cashback était opaque et décourageant.

Ergonomie mobile négligée

L'interface n'était pas pensée mobile-first malgré une majorité d'utilisateurs sur mobile.


Transformer les ressentis en décisions de design

La recherche m’a permis de passer d’intuitions à des axes concrets de conception. En croisant retours terrain, observation des usages et analyse du parcours, j’ai pu reformuler les vrais besoins prioritaires.

Clarifier la valeur des offres Rendre la page plus rassurante Simplifier le parcours d’activation Mieux hiérarchiser l’information Améliorer la lecture mobile
  • Compréhension immédiate Les utilisateurs voulaient savoir très vite ce qu’ils gagnaient et comment en bénéficier.
  • Repères de confiance Les preuves de fiabilité devaient être visibles au bon moment, sans surcharger la page.
  • Moins d’ambiguïté Les conditions et les étapes du parcours devaient être reformulées de manière beaucoup plus explicite.
  • Lecture plus fluide L’organisation visuelle devait aider à distinguer ce qui est essentiel de ce qui est secondaire.

Cartographier le parcours pour identifier les moments de bascule

J'ai représenté les étapes clés du parcours pour visualiser où se jouaient la compréhension, le doute, la motivation et l'abandon.

Étapes
1. Découverte
2. Arrivée
3. Compréhension
4. Exploration
5. Activation
6. Bon d'achat
7. Achat
Situation
Cherche à économiser
Arrive sur la page
Identifie les offres
Explore les taux
Tente le cashback
Achète un bon
A économisé
Émotion
😊
Motivée
😕
Perdue
😄
Enthousiaste
😐
Incertaine
😠
Frustrée
😤
Résignée
😊
Soulagée
✅ Positif
Beaucoup d'offres
Code couleur utile
⚠️ Friction
Faute d'ortho
Trop d'infos
Trop de couleurs
Conditions floues
Pas éligible
Trop long
💡 Opportunité
Correction auto
Moins de couleurs
Clarifier conditions
Afficher éligibilité
Simplifier parcours

Un User Flow simplifié et intuitif

Refonte complète du flux utilisateur pour guider naturellement les visiteurs de la découverte d'une offre jusqu'à la validation du cashback ou l'achat direct, en réduisant le nombre d'étapes et en clarifiant chaque action.

Départ / arrivée Étape Décision Action principale
Utilisateur cherche à économiser Découverte de la marque Page offre Cashback · Bon d'achat · Code promo Cashback Code promo Bon d'achat Éligible ? oui Activer l'offre non éligible Copier le code Choisir montant Acheter Boutique partenaire Boutique partenaire Panier & paiement A économisé ! objectif atteint

Des bases solides pour une cohérence durable

Conception d'un design system complet pour garantir la cohérence visuelle sur l'ensemble de la plateforme : palette de couleurs, typographie, composants UI réutilisables (boutons, cards, formulaires, icônes), règles de spacing et d'accessibilité.

Hiérarchie

Rendre la page immédiatement scannable pour distinguer bénéfices, conditions et actions prioritaires.

Réassurance

Intégrer les signaux de confiance de manière visible mais non intrusive au sein de l’expérience.

Réutilisabilité

Structurer les composants et états UI pour créer une base plus cohérente à l’échelle de la plateforme.


Avant / Après

Maquettes haute fidélité et prototypes interactifs conçus sur Figma. L'interface revisitée met en avant les éléments de réassurance (avis certifiés, badges de garantie), hiérarchise l'information et fluidifie la navigation vers l'offre.

Avant
Interface avant refonte
Après
Interface après refonte
Plus d'engagement sur la page shop
Baisse du taux d'abandon sur le parcours

Projets suivants