Redesign du site d’une boutique de vélos électriques
“Les Dérailleurs” est une boutique de vélos électriques (e-bike) située à Paris. Redesigner leur site Internet imposait de respecter la stratégie de leur business model.
UX/UI Design / UX Writing
Découvrez
🎬 Démo du prototype
Outils utilisés
-
Figma / Figjam
-
Trello
-
Canva
L’équipe
-
Damien (Webdev/UI)
-
Martyna (UX/UI)
-
Moi (UX/UI)
Mon rôle
-
Recherche secondaire
-
Interviews stakeholder
-
Ideation
-
Sketchs & wireframe
-
Prototype hi-fi
Timeline
-
En tout : 6 jours
-
Phase de recherche : 3 jours
-
Design & tests : 3 jours
Contexte
💻 Designer le site d'une boutique
Le site existant
Objectifs du projet
Comprendre le commerce
Ses besoins, ses contraintes et ses objectifs
Améliorer les ventes
Par un redesign du site et en tenant compte des spécificités du business
Analyse
🩺 Analyse du site existant
Pour évaluer l’interface du site existant, nous avons dressé une carte du site et réalisé une évaluation de son utilisabilité.
Carte du site
La carte du site dans son état initial, révèle des erreurs d’organisation des menus et une homepage inutilement complexe.
Evaluation de l'utilisabilité
Pour évaluer l’utilisabilité du site, nous avons choisi comme référence les 10 heuristiques de Jakob Nielsen.
Cette analyse nous a permis de mettre en évidence plusieurs problèmes d’utilisabilité sur les pages du site existant.
Par exemple :
Exploration
🔍 Recherche secondaire
Insights sur le marché du vélo électrique
En 2022, en France :
- Plus de 700 000 vélos électriques vendus dans l'année
- Plus de 1 900 vélos électriques vendus par jour
- 1 vélo sur 4 vendu était électrique
Positionnement marketing des Dérailleurs
Nous avons réalisé une analyse de la concurrence avec 4 autres magasins de vélos électriques. Cela nous a permis de comprendre le positionnement marketing des Dérailleurs :
Luxueux
plutôt qu’accessible
Urbain
plutôt que sportif
Analyse compétitive
Dans notre analyse, nous avons également identifié les services proposés par la concurrence :
Présence sur les réseaux sociaux
4 concurrents sur 4
Articles de blog
2 concurrents sur 4
Essai routier
1 concurrent sur 4
Cette analyse nous éclaire sur ce qui peut être proposé sur le site des Dérailleurs.
Exploration
💈 Comprendre le commerce
Interview du gérant
Interviewer le gérant du magasin était indispensable pour comprendre son commerce.
Nous en avons appris :
- Son objectif : étendre son affaire en ouvrant de nouvelles boutiques dans la ville
- Ses avantages compétitifs : l'expertise du mécanicien et le service de personnalisation de vélos
- Sa contrainte logistique : aucune expédition de vélo n'est possible
Faire des ventes web sans expéditions
Les Dérailleurs est encore un petit commerce local et pour son gérant il est hors de question de faire des ventes en ligne.
La raison invoquée : il ne veut pas avoir à gérer l’expédition des vélos, considérée comme logistiquement trop lourde.
Exploration
🧑💻 Recherche Utilisateur
Dans ce projet, les contraintes et les objectifs du commerce sont notre point de départ. Mais la connaissance des utilisateurs reste capitale, puisque ce sont eux qui utilisent le site Internet. Il nous faut donc comprendre leurs besoins.
Sondage sur les réseaux sociaux
N’ayant pas eu assez de temps pour joindre et rassembler des utilisateurs pour les interviewer, nous avons capitalisé sur un sondage.
L’annonce de ce sondage s’est faite sur les réseaux sociaux, dans des groupes généralistes comme dans des communautés autour du vélo électrique.
Résultats du sondage
Entre autres informations sur les utilisateurs, le sondage nous a permis de dégager deux éléments essentiels :
- Ils sont majoritairement enclins à acheter un vélo électrique sur Internet (66,7%)
- La rubrique la plus importante pour eux sur un tel site, est la personnalisation du vélo (83,3%)
User persona
Exploration
💭 Problem statement
Suite à la phase exploratoire, nous avons pu déduire une synthèse du problème à résoudre :
“Comment pouvons-nous aider "Les Dérailleurs" à
attirer de nouveaux clients
en mettant en valeur leur compétitivité par leur service de personnalisation et leur expertise,
sans avoir à prendre en charge l'expédition des produits ?”
Ideation
💡 Brainstorming & sketchs
Comme indiqué par le problem statement, notre solution a deux missions principales :
Mettre en avant les avantages compétitifs
(Expertise du magasin et service de personnalisation)
Ne pas nécessiter d’expédition
(Car la contrainte logistique est trop lourde)
Solution logistique : le click & collect
Pour résoudre le problème de la contrainte logistique, nous avons préconisé la mise en place d’un service de click & collect. Cela permettra au magasin de réaliser des ventes en ligne, sans toutefois devoir assurer la logistique d’expédition.
Il faut à présent trouver un moyen de le mettre en place efficacement dans l’interface du site.
Brainstorming
Notre session de brainstorming s’est déroulée en suivant la méthode “Round Robin” :
Nos idées en synthèse :
- Pour le click & collect : des CTA, un récapitulatif des informations utiles et un sélecteur de date pour le retrait
- Pour mettre en valeur l'expertise et le service de personnalisation : des pages et un catalogue dédiés
Prototypage / tests
📐 Prototype mid-fi et tests d'utilisablité
Essayez le prototype mid-fi !
Tests d'utilisabilité
Process de test (sur 4 utilisateurs)
- Acheter un produit sur le prototype mid-fi
- Interview à la suite de l’achat, pour :
- Tester la clarté du click & collect
(En demandant à l’utilisateur s’il a compris comment il allait récupérer son achat) - Permettre des recommandations sur l’interface
- Tester la clarté du click & collect
Résultat des tests
Les tests ont permis de :
- Valider l’utilisabilité (process d’achat et clarté du click & collect)
- Faire émerger des points d’amélioration : wording, interactions et structure de l’information
UI Design
🎨 Look & feel
Attributs de marque
Définis en tenant compte à la fois du positionnement marketing du magasin et des attentes de ses utilisateurs, les attributs de marque ont été validés par le gérant du magasin.
Moodboard
Ce moodboard a été réalisé à partir de l’inspiration des attributs de marque cités ci-dessus.
Style
Inspirés du moodboard créé en brainstorming, nous avons défini la tuile de style suivante :
Prototypage
🪄 Prototype hi-fi
Epilogue
🧑🏫 Enseignement retenu
Le pouvoir du "pourquoi ?"
- Le but du projet était de d'aider une boutique physique à accroitre ses ventes online par la refonte de son site web.
- Seulement, le gérant des Dérailleurs Paris s'est fermement opposé à la gestion de toute vente de ses produits à distance.
- Le fait de "creuser" ce blocage avec lui, m'a permis de mieux comprendre sa problématique logistique. J'ai alors incorporé cette contrainte supplémentaire à la problématique du projet, plutôt que d'y voir un obstacle.
- Le blocage étant devenu un axe de réflexion en soi, nous avons pu designer une solution véritablement adaptée à son besoin.