Retour

Petit Bateau : Optimiser lexpérience dune marque iconique

Accompagnement UI/UX durant un an pour moderniser l’interface d'une marque iconique. Mon rôle a été de refondre l’identité digitale et de construire un système visuel cohérent pour réduire les points d'abandon et maximiser la conversion sur les parcours clés.

La Mission : De la structure à l'expérimentation

Intégré aux équipes produit en mode agile, j’ai mené une refonte structurante visant à unifier l'interface et à fluidifier les parcours d’achat.

Cette mission s'est articulée autour de quatre axes :

Design System & Cohérence : Création d'un langage visuel unifié pour supprimer les disparités et accélérer les cycles de conception

Design System & Cohérence : Création d'un langage visuel unifié pour supprimer les disparités et accélérer les cycles de conception

Design System & Cohérence : Création d'un langage visuel unifié pour supprimer les disparités et accélérer les cycles de conception

Restructuration des parcours : Optimisation du tunnel d'achat et des flux stratégiques pour lever les points de friction identifiés

Restructuration des parcours : Optimisation du tunnel d'achat et des flux stratégiques pour lever les points de friction identifiés

Restructuration des parcours : Optimisation du tunnel d'achat et des flux stratégiques pour lever les points de friction identifiés

Lancement de l'offre Seconde Main : Intégration UX/UI complète de la nouvelle offre circulaire, un pilier stratégique pour la marque

Lancement de l'offre Seconde Main : Intégration UX/UI complète de la nouvelle offre circulaire, un pilier stratégique pour la marque

Lancement de l'offre Seconde Main : Intégration UX/UI complète de la nouvelle offre circulaire, un pilier stratégique pour la marque

Design d’Expérimentation : Déclinaison de variations UI pour l'A/B testing afin de valider chaque choix graphique par la donnée réelle

Design d’Expérimentation : Déclinaison de variations UI pour l'A/B testing afin de valider chaque choix graphique par la donnée réelle

Design d’Expérimentation : Déclinaison de variations UI pour l'A/B testing afin de valider chaque choix graphique par la donnée réelle

Les Résultats : L'impact de la donnée

L'approche par l'expérimentation a permis d'obtenir des résultats concrets, prouvant que la précision de l'interface et la réflexion utilisateur sont les moteurs de la croissance.

X2 Conversion Search

Probabilité de conversion doublée grâce à une interface de recherche plus visible et incitative.

X2 Conversion Search

Probabilité de conversion doublée grâce à une interface de recherche plus visible et incitative.

X2 Conversion Search

Probabilité de conversion doublée grâce à une interface de recherche plus visible et incitative.

70% Tests concluants

Des itérations UI validées par la donnée permettant de trancher les décisions produit avec certitude.

70% Tests concluants

Des itérations UI validées par la donnée permettant de trancher les décisions produit avec certitude.

70% Tests concluants

Des itérations UI validées par la donnée permettant de trancher les décisions produit avec certitude.

+3% Taux de conversion

Gain de performance directe suite à la mise en conformité et l'optimisation visuelle du tunnel.

+3% Taux de conversion

Gain de performance directe suite à la mise en conformité et l'optimisation visuelle du tunnel.

+3% Taux de conversion

Gain de performance directe suite à la mise en conformité et l'optimisation visuelle du tunnel.

Un Design System au service de l'agilité

Au-delà des interfaces, cette mission a permis d'instaurer une collaboration étroite entre les équipes de design et de développement. La documentation claire du Design System a réduit les incompréhensions, optimisant ainsi le temps de production et le budget des projets.

Cohérence multi-plateforme : Harmonisation des composants pour une expérience fluide entre desktop, mobile et tablette

Cohérence multi-plateforme : Harmonisation des composants pour une expérience fluide entre desktop, mobile et tablette

Cohérence multi-plateforme : Harmonisation des composants pour une expérience fluide entre desktop, mobile et tablette

Collaboration Design-to-Code : Mise en place de tokens et d'une documentation partagée pour fluidifier les échanges avec les développeurs

Collaboration Design-to-Code : Mise en place de tokens et d'une documentation partagée pour fluidifier les échanges avec les développeurs

Collaboration Design-to-Code : Mise en place de tokens et d'une documentation partagée pour fluidifier les échanges avec les développeurs

Case Study : L'optimisation de la barre de recherche (Focus A/B Test)

L'enjeu était de transformer un outil de navigation en moteur de conversion. Sur un site e-commerce comme Petit Bateau, la barre de recherche est un carrefour stratégique : un utilisateur qui l'utilise a une intention d'achat très élevée. Pourtant, les données montraient une sous-utilisation du champ de saisie, noyé dans la densité visuelle du header.

Le challenge

Augmenter l'engagement sur la barre de recherche en la rendant plus visible et incitative

Le challenge

Augmenter l'engagement sur la barre de recherche en la rendant plus visible et incitative

Le challenge

Augmenter l'engagement sur la barre de recherche en la rendant plus visible et incitative

L'Hypothèse

Contraste accentué et wording actif pour maximiser l'engagement

L'Hypothèse

Contraste accentué et wording actif pour maximiser l'engagement

L'Hypothèse

Contraste accentué et wording actif pour maximiser l'engagement

La Solution

Test de plusieurs variations. La version gagnante ("Que cherchez-vous ?") a boosté le taux de clic sur la barre de 5,5%

La Solution

Test de plusieurs variations. La version gagnante ("Que cherchez-vous ?") a boosté le taux de clic sur la barre de 5,5%

La Solution

Test de plusieurs variations. La version gagnante ("Que cherchez-vous ?") a boosté le taux de clic sur la barre de 5,5%

Le verdict

Conversion doublée grâce à une expérience de recherche instantanée

Le verdict

Conversion doublée grâce à une expérience de recherche instantanée

Le verdict

Conversion doublée grâce à une expérience de recherche instantanée

  1. Analyse & Diagnostic UI

Avant de lancer les tests, un audit de l'interface a révélé plusieurs points de friction :

Déficit de contraste : Le champ de recherche manquait de relief, ne captant pas immédiatement le regard

Déficit de contraste : Le champ de recherche manquait de relief, ne captant pas immédiatement le regard

Déficit de contraste : Le champ de recherche manquait de relief, ne captant pas immédiatement le regard

Wording passif : Le texte de remplacement (placeholder) listait simplement des catégories sans inciter à l'action

Wording passif : Le texte de remplacement (placeholder) listait simplement des catégories sans inciter à l'action

Wording passif : Le texte de remplacement (placeholder) listait simplement des catégories sans inciter à l'action

Accessibilité mobile : Une zone de clic trop peu différenciée des autres icônes du header

Accessibilité mobile : Une zone de clic trop peu différenciée des autres icônes du header

Accessibilité mobile : Une zone de clic trop peu différenciée des autres icônes du header

  1. Hypothèse & Design d'expérimentation

En collaboration avec les équipes DATA et via l'outil Kameleoon, nous avons conçu une variation UI axée sur la visibilité :

Renforcement visuel : Ajout d'un contour plus marqué et optimisation des marges internes pour agrandir la zone de saisie

Renforcement visuel : Ajout d'un contour plus marqué et optimisation des marges internes pour agrandir la zone de saisie

Renforcement visuel : Ajout d'un contour plus marqué et optimisation des marges internes pour agrandir la zone de saisie

Micro-copywriting engageant : Remplacement du texte générique par une question directe : "Que cherchez-vous ?", créant une interaction plus humaine

Micro-copywriting engageant : Remplacement du texte générique par une question directe : "Que cherchez-vous ?", créant une interaction plus humaine

Micro-copywriting engageant : Remplacement du texte générique par une question directe : "Que cherchez-vous ?", créant une interaction plus humaine

Instant Search : Retravail de l'affichage des suggestions de produits pour une réponse visuelle immédiate dès le premier caractère tapé

Instant Search : Retravail de l'affichage des suggestions de produits pour une réponse visuelle immédiate dès le premier caractère tapé

Instant Search : Retravail de l'affichage des suggestions de produits pour une réponse visuelle immédiate dès le premier caractère tapé

  1. Résultats et Conclusion UI

Ce test a prouvé que la clarté visuelle et la hiérarchie des informations sont aussi déterminantes que les fonctionnalités techniques. En guidant mieux l’œil de l'utilisateur dès le header, nous avons fluidifié l'accès au catalogue et maximisé le ROI des parcours de recherche.

+5,5% engagement

de taux de clic sur la barre de recherche

+5,5% engagement

de taux de clic sur la barre de recherche

+5,5% engagement

de taux de clic sur la barre de recherche

X2

de probabilité d'achat pour les utilisateurs exposés à la nouvelle UI

X2

de probabilité d'achat pour les utilisateurs exposés à la nouvelle UI

X2

de probabilité d'achat pour les utilisateurs exposés à la nouvelle UI

100%

du trafic désormais exposé à cette nouvelle interface après validation des résultats

100%

du trafic désormais exposé à cette nouvelle interface après validation des résultats

100%

du trafic désormais exposé à cette nouvelle interface après validation des résultats