Agathe Gelin
← Tous les projets

Bestseller · 2015 – 2016

Une plateforme e-commerce responsive unique pour 17 marques de mode.

J'ai participé à la création du nouveau site e-commerce responsive de Bestseller, de zéro : une seule plateforme pour 17 marques de mode, dont Jack & Jones, Only, Vero Moda, Vila et Name it. Pendant la même mission, j'ai aussi conçu un parcours « achetez maintenant, payez plus tard » en magasin dans l'application Klarna.

Client
Bestseller
Rôle
UX Designer & Researcher
Années
2015 – 2016

Ma façon de travailler

J’ai travaillé sur place, dans les bureaux de Bestseller à Amsterdam, comme UX designer et researcher au sein de l’équipe qui construisait le nouveau site, au quotidien avec les product owners et les business analysts.

Étude de cas 1

Plateforme Bestseller.com

Comment offrir à 17 marques de mode un site unique qui convienne à chacune d'elles, tout en restant simple à gérer pour leurs équipes marketing ?

Bestseller possède des marques comme Jack & Jones, Only, Vero Moda, Vila et Name it. Notre mission : refondre entièrement leurs boutiques en ligne, sous la forme d’un seul site responsive pour toutes. L’objectif : une expérience cohérente et simple pour les clients de chaque marque, et une solution évolutive, pour que les équipes marketing puissent gérer 17 boutiques sans multiplier le travail par 17.

La nouvelle page produit Bestseller sur ordinateur, portable, tablette et téléphone : la même mise en page s’adapte à chaque écran

Ce que j’ai fait

  • Benchmark. J’ai comparé la navigation et les principaux parcours avec ceux des concurrents clés, pour voir ce que les clients attendent déjà d’un site de mode.
  • Données. J’ai travaillé avec les business analysts sur les données de comportement client, pour comprendre comment les gens naviguaient et achetaient vraiment.
  • Architecture de l’information. J’ai retravaillé la structure du site à l’aide de wireframes et de prototypes interactifs sous Axure, des menus jusqu’au checkout.
  • Ateliers. J’ai animé des ateliers avec les product owners pour définir les fonctionnalités.
  • Validation. J’ai présenté la solution aux 17 marques, au siège au Danemark.

Une plateforme, toutes les marques

Toutes les marques reposent sur les mêmes gabarits et les mêmes composants. Ce qui change, c’est ce qui rend une marque reconnaissable : son logo, sa couleur, ses photos et ses campagnes. Les équipes marketing remplissent les mêmes blocs, et chaque boutique garde sa personnalité.

Pages d’accueil de Bestseller, Mama.licious, Only & Sons, Only, Y.A.S et Vero Moda, construites sur le même gabarit, chacune avec son logo, son bandeau de couleur et ses photos de campagne

Pages d’accueil : la même mise en page, six marques différentes.

Pages de liste produits de Bestseller, Mama.licious, Only & Sons, Only, Vila et Y.A.S, avec le même menu de catégories, les mêmes filtres, le même tri et la même grille produits

Pages de liste produits : un menu de catégories, un jeu de filtres, une grille produits.

Pages produit de Vila, Vero Moda, Only & Sons, Mama.licious, Bestseller et Y.A.S, avec la même galerie, les mêmes sélecteurs de couleur et de taille et le même bouton vert d’ajout au panier

Pages produit : la zone d’achat fonctionne de la même façon sur chaque marque.

Responsive, de l’ordinateur au téléphone

La page produit s’adapte à chaque écran. Sur grand écran, les vignettes sont à côté de la photo principale. Sur tablette, elles passent dessous, et les boutons de taille s’affichent sur deux lignes. Sur téléphone, les photos deviennent un carrousel à faire défiler, et les informations produit suivent en dessous.

La page produit sur tablette : vignettes sous la photo principale, boutons de taille sur deux lignes
Tablette
La page produit sur téléphone : les photos en carrousel avec des points, le nom du produit en dessous
Téléphone

Étude de cas 2

Checkout avec Klarna

Comment rendre le paiement simple, du panier sur le site jusqu'au paiement différé en magasin avec Klarna ?

Le panier

Dans le panier, le client peut changer la couleur ou la taille d’un article, ou ajouter une carte cadeau, dans une pop-up, sans quitter la page. J’ai prototypé chaque interaction sous Axure, pour que l’équipe puisse tester le parcours avant qu’il soit développé.

Klarna en magasin

Objectif

Pendant notre mission chez Bestseller, nous avons été chargés d’analyser et d’optimiser le parcours d’achat dans l’application mobile Klarna. L’objectif était d’améliorer l’expérience d’achat en magasin en permettant aux clients d’acheter des vêtements et de différer leur paiement, grâce à la fonctionnalité « Buy Now, Pay Later » de Klarna.

Une cliente essaie une robe dans une cabine Vero Moda, à côté d’une affiche « Pay with Klarna » qui explique comment payer en magasin

Principales améliorations

  • Navigation simplifiée : nous avons restructuré la navigation pour que les utilisateurs accèdent plus facilement à l’option « Payer plus tard » directement depuis les pages produit.
  • Intégration fluide : le nouveau parcours a été intégré aux systèmes existants de Klarna, pour que les transactions en magasin puissent être gérées facilement dans l’application.
  • Meilleure utilisabilité : nous avons ajouté des messages et des explications clairs dans l’application, pour réduire les points de friction et que les utilisateurs comprennent comment finaliser leur achat et différer leur paiement.

User flow de l’application Klarna : flow 1, créer un compte Klarna, et flow 2, acheter en magasin avec Klarna

Wireframes du flow 2 pour un client déjà inscrit : page d’accueil, vérification du plafond et paiement en magasin avec un QR code, commande et confirmation

Wireframes du flow 1 pour un nouveau client : page d’accueil, informations d’inscription dans deux états et page d’acceptation

Écrans de l’application Klarna pour s’inscrire en magasin : de la saisie de l’e-mail et du code postal jusqu’aux résultats « accepté » et « refusé »

L’ensemble des écrans de paiement en magasin Klarna, avec les pop-ups d’aide, les étapes d’inscription, les états d’erreur, le QR code et la confirmation de commande

Une super idée, un produit à concrétiser ou un projet complexe qui demande quelqu’un de fiable ?

Parlons-en.