Chapitre 1
Contexte
OLMO lux est une marque française de streetwear premium que j'ai fondée en 2025. Chaque pièce porte une broderie de phénix, réalisée à la demande, et le catalogue s'organise aujourd'hui en trois collections : City Club, Night Shift Club et Signature. La marque vend en ligne sur olmo-lux.fr, un site WordPress et WooCommerce que j'ai conçu et que je fais évoluer seul.
J'occupe ici tous les rôles à la fois, ce qui rend le projet intéressant comme étude de cas : je suis le concepteur du site, son premier testeur et la personne qui paie chaque erreur de parcours en ventes perdues.
Chapitre 2
Le problème
La première campagne Meta Ads a produit un signal clair et brutal. Sur 4 286 vues, 39 personnes ont cliqué vers le site, soit un taux de clic d'environ 0,9 %, et aucune n'a acheté. L'audience touchée était à 85 % masculine, majoritairement âgée de 35 à 54 ans, à 91 % en France.
La tentation était de refaire les visuels publicitaires. J'ai fait l'inverse : avant de toucher à la publicité, j'ai voulu savoir ce que vivait réellement quelqu'un qui arrive sur le site depuis son téléphone.
Chapitre 3
Ma démarche
Un test utilisateur sur moi-même, en conditions réelles. J'ai parcouru le site sur iPhone comme un client inconnu, de la page d'accueil jusqu'au paiement, en chronométrant et en capturant chaque écran, puis j'ai comparé avec l'affichage desktop, très différent. Il m'a fallu onze minutes pour simplement choisir un produit. Une fois l'article ajouté, rien ne m'invitait à payer. La page panier était labyrinthique, l'espace client datait visuellement d'une autre époque.
Une lecture écran par écran des captures. En les analysant au calme, j'ai trouvé plus grave que la lenteur. Sur mobile, les boutons « Procéder au paiement » et « Mettre à jour le panier » s'affichaient en texte noir sur fond noir : le bouton principal de conversion du site était invisible. Dans l'espace client, les onglets de navigation étaient en texte doré sur fond doré. S'ajoutaient des fautes visibles sur toutes les pages, comme un bouton de recherche libellé « RECHERCHI ».
La cause racine. Les onze minutes ne venaient pas de la taille du catalogue, qui ne compte qu'une quinzaine de références. Elles venaient d'une architecture qui n'avait pas suivi l'évolution du produit : le site classait encore les pièces selon deux taxonomies concurrentes, les collections actuelles d'un côté, d'anciennes gammes abandonnées de l'autre, derrière un filtre dynamique qui rechargeait la page à chaque clic. Le visiteur ne savait pas quel axe utiliser, donc il utilisait les deux, donc il tournait en rond.
Le croisement avec les données publicitaires. Le diagnostic de la campagne convergeait : zéro conversion venait d'une page d'atterrissage pas prête, d'un ciblage trop large et d'une absence totale du fondateur dans le récit de marque, pas de la qualité des images.
Chapitre 4
Les décisions de conception
Une curation à la place du filtre. Un filtre répond à l'abondance. OLMO lux a le problème inverse : chaque pièce doit donner l'impression d'avoir été choisie. J'ai donc supprimé le filtre dynamique et retiré de la navigation client toutes les anciennes gammes, conservées uniquement comme étiquettes internes dans le flux Google Merchant.
Une entrée identitaire, pas une vitrine. La page d'accueil ne pose plus qu'une question : quel club ? Trois blocs, City Club, Night Shift Club et Signature, chacun porté par une phrase d'identité. Pour Signature, gamme d'un seul modèle décliné en coloris, la page collection et la page produit fusionnent, les coloris devenant directement des vignettes cliquables.
Une page produit lisible sans défilement. Nom, prix, sélecteur de taille, sélecteur de couleur et bouton d'ajout visibles dans le premier écran mobile. Le texte narratif, important pour la marque, passe après.
Un panneau latéral après l'ajout au panier. C'était la fuite principale du tunnel. À l'ajout, un panneau affiche la pièce, le total et deux actions hiérarchisées : « Finaliser ma commande » en bouton plein, « Continuer mes achats » en simple lien.
Un paiement invité sur une seule page. Obliger à créer un compte chez une marque inconnue est l'un des premiers motifs d'abandon en e-commerce. La création de compte est proposée après le paiement, pas avant.
Une règle appliquée à chaque écran : une seule action principale visuellement dominante, tout le reste en secondaire. L'ancienne page panier proposait six actions de même poids (PayPal, paiement en plusieurs fois, coupon, calcul des frais, mise à jour, commande) et la seule qui comptait était invisible.
Chapitre 5
Quand l'UX rencontre l'économie
En validant le tunnel de bout en bout avec une vraie commande, j'ai découvert un conflit que l'interface masquait. Le code promotionnel de la communauté, à 20 voire 25 %, était incompatible avec l'économie d'une production à la demande : une remise en pourcentage grignotait presque toute la marge de chaque pièce.
La décision a été de plafonner les remises à 10 % et de faire systématiquement le calcul de marge avant toute promotion. Cet épisode m'a appris qu'un parcours de conversion se conçoit aussi avec la grille de marge sous les yeux, pas seulement avec les écrans.
Chapitre 6
Un test de limite sur l'IA générative
Pour produire du contenu sans séance photo à chaque collection, j'ai testé de façon contrôlée où la génération d'images par IA était viable. J'ai défini trois niveaux d'usage : contenu d'ambiance pour Instagram, créations publicitaires produit, photographie e-commerce. J'ai ensuite soumis de vraies photos produit au même prompt, trois fois, en comparant les zones de broderie agrandies.
Résultat : le modèle transformait systématiquement la broderie en un aplat lisse, sans les lignes de piqûre qui font la valeur du produit, et en redessinant parfois le motif. Une version corrigée du prompt échouait aussi et cassait la composition. Verdict : l'IA reste valide pour le contenu d'ambiance, où la broderie n'est pas lisible, et fermée pour la publicité produit et la fiche e-commerce, où seule la vraie photographie tient la promesse faite au client.
Les trois essais viennent du même prompt, avec la même photo produit. La référence est une autre pièce (bleu marine, fil doré) : la couleur diffère, pas la nature de la broderie.
Chapitre 7
État actuel et limites
Le test d'achat complet a validé pour la première fois toute la chaîne, du site au paiement puis à la production à la demande. Le diagnostic a déplacé l'effort du bon côté : au lieu de racheter de la publicité pour envoyer du trafic vers un panier dont le bouton de paiement était invisible, la priorité est passée au parcours lui-même.
| Indicateur | Valeur | Statut |
|---|---|---|
| Temps pour choisir un produit, avant | 11 minutes, test mobile | Mesuré |
| Parcours cible jusqu'au panier | 5 clics | Objectif de conception |
| Campagne Meta n°1 | 4 286 vues, 39 clics, 0 conversion | Mesuré |
| Taux de clic de la campagne | environ 0,9 % | Calculé |
| Actions concurrentes sur l'ancien panier | 6 | Observé |
| Références au catalogue | environ 15 | Observé |
| Plafond de remise retenu | 10 % | Décision |
Chapitre 8
Ce que je retiens
Le plus gros défaut n'était pas celui que j'avais vu. J'étais venu pour un parcours trop long, j'ai trouvé un bouton invisible. Tester sur le vrai appareil, avec de vraies captures relues à froid, révèle ce que la vue desktop du concepteur masque.
Une architecture de l'information vieillit plus vite qu'on ne le croit. Le catalogue s'était simplifié, la navigation non, et c'est l'écart entre les deux qui coûtait onze minutes au visiteur.
Enfin, diagnostiquer avant de dépenser. Les visuels publicitaires n'étaient pas en cause ; les refaire aurait coûté du budget sans déplacer la conversion d'un point.