Arrivé en cours de refonte totale du site et de l'application, après le rachat de Sarenza par le groupe Beaumanoir. Mission : apporter un regard neuf et extérieur sur les maquettes déjà produites. Auditer, repérer les incohérences et les points de friction du parcours, puis améliorer.
Contexte & chantiers.
Le site et l'app étaient en pleine refonte quand je suis arrivé. Mon rôle : poser un regard extérieur sur l'existant, valider ou challenger les choix par la donnée, et reprendre quatre chantiers clés du parcours.
Survolez le tableau
Barre d'infos sur l'app.
Repenser la façon d'afficher les informations en haut de l'application, en partant des contraintes techniques réelles et des usages du marché.
Survolez le tableau
Comment les concurrents adaptent leur barre d'info entre les deux formats
H&M
Bandeau en haut, conservé tel quel sur mobile.
À l'inverse
Sur mobile, certains abandonnent la barre fixe et glissent les promos dans le contenu.
AdidasNike
La réponse de Sarenza
En benchmarkant les apps e-commerce, une idée s'est imposée : regrouper les promotions dans un wallet de promotion, un espace unique où l'utilisateur retrouve tous ses bons plans.
Sur desktop : la barre d'info reste épinglée en haut de page
Sur mobile : la promo reste à portée, glissée dans le flux
Sur l'app, la même info en deux gestes.
Page d'accueil → Centre de notifications
Dès l'accueil, la cloche ouvre le centre de notifications. Les promos en cours s'y affichent sous forme de widget / wallet, la même information, retrouvée en deux gestes.
Page d'accueil
Centre de notifications
Parcours d'achat : la page produit.
En analysant le parcours, je repère plusieurs frictions sur la page produit. La data analyste confirme : c'est précisément là que le funnel d'achat perd le plus de clients.
Frictions repérées.
Scroll très long avant d'atteindre la description du produit.
De grosses images qui prennent trop de place.
Une navigation inhabituelle, qui désoriente.
Benchmark.
Analyse de Bata, Bershka, La Redoute, Nike, Stradivarius et Zalando. Plusieurs façons d'afficher les images, mais un point commun : une galerie compacte qui garde les infos produit visibles, sans scroll interminable.
BataBershkaLa RedouteNikeStradivariusZalando
Décisions.
Slider produit
Ajouté sur desktop et mobile.
Fiche produit
Infos revues et promos harmonisées.
Page liste
Passage à 4 produits par ligne au lieu de 3.
BataMosaïque d'imagesBershkaGalerie + fiche flottanteLa RedouteSlider à flèchesNikeMiniatures + image principale
01 / 03
La liste.
La page liste : 4 produits par ligne, repères clairs et code couleur de l'offre dès la navigation.
02 / 03
La fiche produit.
La fiche produit : galerie immersive, sélection sans aller-retour, l'offre rappelée au bon endroit.
03 / 03
Le panier.
Le panier : palier de réduction et progression visibles, l'ajout toujours à portée.
Parcours d'achat la réponse finale
Atelier d'achat & CRO.
Un atelier UX pour améliorer le parcours et l'expérience d'achat, notamment le formulaire de saisie pendant la commande, mené avec les équipes Marketing, CRM et PAC.
Méthode de l'atelier.
Atelier UX
Confrontation des idées en équipe, autour du parcours.
MarketingCRMPAC
CRO.
Mise en place de séances CRO pour identifier et corriger les bugs du parcours d'achat, et fiabiliser le funnel jusqu'au paiement.
Les pistes retenues.
L'atelier a fait émerger trois pistes concrètes pour alléger le passage de commande :
Réduire le nombre d'étapes au passage de la commande.
Permettre la commande en tant qu'invité, sans création de compte.
Activer la commande directe via un outil de paiement rapide.
Wireframes
Le parcours d'achat maquetté étape par étape, sur post-it.
Parcours promo.
Nous avons retravaillé l'ensemble du parcours promo. Notre veille concurrentielle l'a confirmé : un code couleur par type d'offre est un repère clé. D'où le choix de quatre couleurs sur un même ton, plutôt qu'une avalanche de teintes qui jurerait avec la DA. La couleur en haut de page annonce la nature de l'offre, comprise en un coup d'œil.
ZalandoUn aplat par type de message
AsosOnglet Outlet + bandeaux d'offres
COSOffre en neutre, peu signalée
Le code couleur.
Constat : les plus lisibles posent un grand aplat de couleur pour flaguer chaque type d'offre, c'est ce qui a inspiré notre système à 4 couleurs.
Sur la page promo.
La bande de couleur en haut de page annonce la nature de l'offre.
Un slider produit sur fond plus clair de la même couleur : l'utilisateur comprend qu'il est lié à la promo.
Les produits de cette bande bénéficient d'une réduction supplémentaire, incitant à l'achat.
Un timer peut renforcer l'urgence, et le code couleur se retrouve sur la page produit.
Mon idée : le palier au panier.
Code promo
À l'ajout d'un produit, si une réduction est atteignable en ajoutant d'autres articles, il s'affiche.
Progression
Une barre et le code couleur montrent la distance jusqu'au palier.
Carrousel
Sous le panier, des articles à ajouter sans quitter la page, pour débloquer la promo.
La bande de couleurle ton du parcours promo.
AccueilLa bande de couleurOffre −10%Le ton chromatiquePage produitCouleur + timerPanierPalier & progression
Offre Sarenza+.
Sarenza+ est l'offre de fidélité de la marque, avec ses avantages réservés aux membres. L'enjeu : la rendre visible et désirable au bon moment du parcours, sans alourdir l'expérience.
Démarche.
Benchmark des offres « plus » concurrentes : Zalando Plus, Asos, JD Sports.
Repérage des étapes où l'offre est affichée, et de la façon dont elle l'est.
Création de l'UI : réutilisation du rose et du noir de la charte, mise en avant du S et du +.
Points d'affichage.
Accueil
Bouton discret dans le header et layer dans la page.
CLP & PLP
Rappel de l'offre au fil de la navigation.
Page produit & panier
L'avantage au moment de la décision.
Benchmark.
Zalando Plus
L'offre suit le client du header au panier : badge dès l'accueil, livraison premium en liste, rappel en fiche produit, présence jusqu'au paiement.
Dès l'accueil, un layer présente l'offre, puis elle se rappelle tout au long du parcours
01
Étape 01
Accueil : le layer.
Dès l'arrivée, un layer présente l'offre Sarenza+ et propose de l'ajouter au panier, en un geste.
Sarenza+
02
Étape 02
Liste : au fil de la navigation.
Pendant le shopping, l'avantage Sarenza+ se rappelle discrètement dans la page liste.
Sarenza+
03
Étape 03
Panier : au moment de décider.
Au panier, l'offre revient au moment clé : l'avantage membre est mis en avant juste avant le paiement.
Sarenza+
Landing pages : côté UI.
Au-delà des parcours, j'ai aussi conçu deux landing pages complètes, un exercice plus proche de l'UI pure. Les deux sont pensées desktop et mobile, en réutilisant la charte : rose et noir, le S et le +.
L’application
Landing de téléchargement : hero en situation, bénéfices hiérarchisés, QR code et liens stores.
Portée & impact
Ce que la refonte a apporté.
Marques benchées
0
Nike, Adidas, Zalando…
Clé
Page liste
0/ligne
au lieu de 3
Couleurs promo
0
un code couleur lisible
Points Sarenza+
0
Accueil, CLP, PLP, produit, panier
Votre prochain projet mérite mieux.
30 minutes pour explorer votre problématique et voir concrètement comment Vanta Studio peut y répondre.
Sarenza+
Sarenza+
