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.
Tickie : billets d’événements sportifs en NFT (MVP)
Tickie, start-up dans la billetterie de matchs sportifs au format NFT, a fait appel à mes services pour concevoir le MVP de leur flux d’achat de billets.
Découvrez
🎬 Démo du prototype
Outils utilisés
-
Figma / Figjam
-
Trello
-
Canva
L’équipe
-
Damien (Webdev/UI)
-
Moi (UX/UI)
Mon rôle
-
Recherche utilisateur
-
Ideation
-
Tests utilisateurs
-
Sketchs & wireframe
-
Microcopie
-
Prototype hi-fi
Timeline
-
En tout : 13 jours
-
Phase de recherche : 6 jours
-
Design & tests : 7 jours
contexte
Des billets au format NFT : pourquoi ?
Pour Tickie, le format NFT des billets est un avantage compétitif. Il permet en effet de :
-
Sécuriser les billets en éliminant le risque de fraude lors de l’achat / vente en seconde main
-
Valoriser les billets en les rendant unique et “collector“. En fonction de l’événement, ceux-ci peuvent même prendre de la valeur dans le temps.
- Fidéliser l’acheteur du ticket en lui attribuant des avantages exclusifs (goodies, événements spéciaux, etc.)
Exploration
🧑💻 Recherche Utilisateur
- 10 interviews utilisateur
- Sondage : +30 répondants
- Etude de positionnement marketing
- 1 user persona
- 1 problem statement
Résultats de la recherche
- Principal soucis : la sécurité. Les utilisateurs veulent éviter le risque de fraude.
- Lien émotionnel avec le ticket : peu important sauf s’il est matériel (papier).
- Pain point : le manque de clarté et de fluidité sur les plateformes d’achat habituelles
-
Peu de confiance dans le format NFT (vu comme trop spéculatif)
User persona
Problem statement
“Un supporter occasionnel a besoin d'acheter le bon billet dans la bonne quantité pour un événement sportif, grâce à une plateforme rapide, fluide et certifiée avant que les places ne soient épuisées. Car même si les plateformes de revente offrent une seconde chance, elles n'offrent pas une sécurité suffisante contre la fraude.”
Ideation
💡 Brainstorming & concept tests
Méthodes de brainstomring
- Crazy-8
- Benchmarking des apps de musique
Méthode de concept testing
- 5 Interviews utilisateur à l’appui des sketchs
Recherche d'événements
L’offre d’événements sportifs revêt une certaine complexité :
- Différents sports
- Différents types d’événements
- Différents types de lieux
Comment donner à l’utilisateur un accès simple à la complexité de cette offre ?
Pour moi, une contrainte similaire s’applique aux applications de musique (Spotify, Deezer,…).
A l’instar de ces applications, une solution consiste à proposer :
- Des suggestions multidimensionnelles en temps-réel
- Des pages de résultats de recherche structurées en catégories
Sécurisation des billets
La phase de recherche nous a appris que la sécurité était le principal soucis des utilisateurs.
Comment transmettre aux utilisateurs le sentiment que leurs billets sont uniques et sécurisés ?
Réponse (en partie) : en leur montrant une animation de “fabrication” de leur billet.
A la manière d’une forge ou d’une presse, le billet est “confectionné à la main” par l’application.
Cette idée m’est venue lors d’une session de brainstorming en Crazy-8.
Concept tests
- 5 utilisateurs test
- Validation du concept à 5/5
- Nette appréciation de l'idée de "fabrication" des billets
- 1 challenge identifié : la sélection du placement dans le stade
Prototypage
📐 Wireframes & tests d'utilisabilité
Wireframes
La sélection du placement est une fonctionnalité importante :
- C’est une étape importante du flux d’achat,
- C’est un challenge qui nous a été remonté lors des concepts tests.
La solution nous a été inspiré de notre benchmark de la concurrence. Vous la voyez ici animée dans le wireframe.
Essayez le prototype mid-fi !
Tests d’utilisabilité
- 5 utilisateurs test
- Validation de l'utilisabilité : 5/5 (utilisateurs)
- 1 critique principale concernant la sélection du placement :
- cliquer sur une partie du stade pour sélectionner sa catégorie, n’est pas pratique.
- Pour 3 utilisateurs sur 3, un bouton vraiment défini serait préférable pour sélectionner une catégorie de place.
UI Design
🎨 Look & feel
Un style nous est proposé par le client
Nous l’avons soumis aux utilisateurs du concept test :
Le texte ne fait pas “sport”.
Cela me fait plus penser à un réseau social qu’à une billetterie.
Ca fait assez “mou”, pas très dynamique.
Nous avons donc décidé de reprendre le style à zéro.
Look & feel
3 valeurs que doit dégager l'interface
Sport
Dynamisme
Confiance
Moodboard
Typographie
Inspiration : style de typographie utilisé par le journal “L’équipe”
Couleurs
Nous avons opté pour une couleur primaire bleue.
Objectif : donner un maximum de place aux espaces blancs pour renforcer la lisibilité dans un contexte d’informations nombreuses.
Microcopie
Donner de l’importance aux contenus textuels dés la phase de mid-fi, a permis d’améliorer le wording au fil des itérations en étant guidé par les tests d’utilisabilité.
“Crypto-billets” plutôt que “billets NFT”
Lors des interviews utilisateur, nous avons noté que ceux-ci avaient une confiance limitée dans la technologie NFT. Bien que Tickie en ait fait son principal “argument innovation”, nous devions éviter de mentionner directement cette technologie dans l’interface.
Nous avons donc choisi de parler de “Crypto-billet” plutôt que de “billets NFT”.
Clarifier une expression inhabituelle
Il nous a semblé important d’informer explicitement les utilisateurs de la sécurité et des avantages que les crypto-billets leur apporte.
Pour cela, nous avons inclus une modale d’explication derrière un lien “info”, partout ou l’expression “crypto-billet” était employée.
Prototypage & tests
🪄 Prototype et tests de desirabilité
Prototype hi-fi
La réalisation du prototype hi-fi a été l’occasion d’appliquer notre compréhension du besoin utilisateur :
- En rendant la sélection des catégories de place plus utilisable (retour fait dans les tests d’utilisabilité)
- En créant l’animation de “fabrication des billets”
Sélection de place plus utilisable
- Fonctionnalité intégrée à la page de l’événement plutôt que dans une modale,
- Sélection de la catégorie par un bouton plutôt qu’une zone de la carte du stade.
Traduire la sécurité des billets
- En phase de recherche, les utilisateurs ont majoritairement soulevé le souci de la sécurité des billets.
- La solution imaginée lors de la phase d’idéation est ici enfin réalisée : une animation de “construction de billet”.
Essayez le prototype hi-fi !
Tests de désirabilité
- 5 utilisateurs test
- Méthode utilisée : les Reaction Cards de Microsoft
- Validation de la désirabilité : 5/5 (utilisateurs)
Valeurs retournées par les utilisateurs :
Engageant
Direct
Attractif
Amical
Invitant
Lors des tests de désirabilité, les utilisateurs ont rapporté d’autres qualificatifs.
Les résultats de ces tests ont été particulièrement gratifiants, les fonctionnalités les plus appréciées étant :
- la sélection de catégorie de place
- l’animation de “fabrication des billets”.
épilogue
🏆 Projet récompensé
Présentation devant un jury
Avec l’autorisation de Tickie, nous avons présenté ce projet dans le cadre du concours UX/UI Design Ironhack.
Outre une démonstration du prototype Figma, nous avons présenté les différentes étapes de notre travail ainsi que les méthodes utilisées.
Cette présentation, soutenue en Anglais devant un jury composé d’experts du design, nous a permis de décrocher la 3ème place du podium (sur 13 compétiteurs).
Un prix d’honneur nous a alors été décerné.
ActiQuit : une application pour arrêter de fumer
Bienvenue dans un monde sans tabac avec ActiQuit ! Une application pour assister l’arrêt de la cigarette, conçue à l’aide du Design Thinking.
Découvrez
🎬 Démo du prototype
Outils utilisés
-
Figma / Figjam
-
Trello
-
Canva
L’équipe
- Cédric (Webdev/UI)
- Palesa (UX/UI)
-
Moi (UX/UI)
Mon rôle
-
Recherche utilisateur
-
Ideation
-
Tests concept & utilisabilité
-
Sketchs & wireframe
-
Microcopie
-
Prototype hi-fi
Timeline
-
En tout : 7j
-
Phase de recherche : 2j
-
Design & tests : 5j
Contexte
🧘 Concevoir une application de bien-être
Brief
Notre équipe a été contactée par la Daily Health Conference pour concevoir une application de bien-être.
Les contraintes :
- Concevoir une application de bien-être
- Se focaliser sur 1 user flow
- Respecter la norme d'accessibilité WCAG
- Prévoir l'interface avec un second device
- Présentation finale du projet en 10 minutes
Notre choix
Une app pour aider à arrêter de fumer
Exploration
🔍 Benchmark de la concurrence
3 applications d’aide à l’arrêt du tabagisme :
- Cig’Arrête
- Tabac Info Service
- Flamy
L’analyse de ces applications nous a permis d’identifier plusieurs fonctionnalités communes, comme :
- Des tests de dépendance à la nicotine
- Des statistiques de suivi de consommation et de progression ver l’arrêt total
- Un accompagnement chronométré lors des moments de tentation
- La possibilité de débloquer des messages de soutien de la part de proches
Exploration
🧑💻 Recherche utilisateur
- Recherche secondaire
- 8 interviews utilisateur
- Interview d'un addictologue
- Sondage : +20 répondants
- 1 user persona
- 1 problem statement
Résultats de la recherche
1,3 milliards
de fumeurs dans le monde
66%
d’entre eux veulent arrêter
8%
y parviennent
- Fumer est social. Les fumeurs sont comme une communauté informelle. La tentation de fumer est d’autant plus forte par ce biais.
- Seuls 5% des fumeurs désirant arrêter y parviennent sans aide. 1 an après l’arrêt, le taux de rechute est 80%
- Selon l’addictologue que nous avons interviewé, la plupart des fumeurs vont avoir besoin d’assistance extérieure pour arrêter. Cette aide peut être apportée par un accompagnement psychologique, un substitut ou… Une application ?
User persona
User journey map
Basé sur notre user persona et les interviews utilisateurs, nous avons défini une User Journey Map.
L’état émotionnel d’Alex Russo atteint son plus fort creux lorsqu’il a déjà essayé d’arrêter le tabac une première fois, seul et sans succès et qu’il réalise son réel niveau de dépendance.
C’est à cette étape que l’application doit intervenir pour l’aider.
Problem statement
Un fumeur régulier qui souhaite arrêter le tabac a besoin d'aide pour gérer la tentation de fumer dans un environnement social, car il a déjà rechuté après des tentatives sans assistance extérieure.
Ideation
💡 Brainstorming & concept tests
Méthodes de brainstorming
- “Pire idée VS meilleure idée”
- “Round Robin”
Méthode de concept testing
- 5 Interviews utilisateur à l’appui des sketchs
- Fumeurs interrogés dans des espaces publics
Ideation
Méthode “Pire idée”
A permis de faire émerger un premier concept : un “supporter” qui soutient l’utilisateur.
Méthode “Round Robin”
A été choisie pour explorer ce concept de supporter, et dégager des idées plus claires dans une problématique plutôt complexe (l’aide au sevrage).
1er concept : la rencontre
Permettre à l'utilisateur de trouver un "supporter anti-tabac" dans la même zone géographique, avec qui se soutenir mutuellement et avec qui se rendre dans des événements entièrement non-fumeurs.
Les autres fonctionnalités de l’app sont alignées sur la concurrence :
- Evaluation du niveau de dépendance
- Suivi des progrès
- Encouragements à résister lors des moments de tentation
- Messages de soutien des proches
Concept tests
- 5 utilisateurs test en interview
- 6 utilisateurs test pris dans l'espace public (rue, cafés)
- Concept non validé : risque de détournement de concept (5 / 13)
- Concept non validé : risque de détournement de concept (5 / 13)
Les utilisateurs test – surtout les utilisatrices – ont pointé du doigt le risque d’abus liés au concept de rencontre entre utilisateurs.
Leur crainte : que le prétexte de soutien entre fumeurs soit utilisé par certains utilisateurs pour chercher à faire des rencontres amoureuses.
Ce risque est compliqué à limiter de manière certaine et peut engendrer des abus.
Nous avons du revoir notre concept
Nouveau concept : les événements
Permettre à l'utilisateur de participer à des événements entièrement non-fumeurs.
Nous avons recentré notre concept sur la fonctionnalité d’organisation d’événements non-fumeurs.
C’est une idée qui a été largement validée lors des concept tests.
Prototypage
📐 Wireframes & mid-fi prototype
Wireframes
Mid-fi prototype
UI Design
🎨 Look & feel
4 valeurs que doit dégager l'interface
Une session de brainstorming nous a permis de définir les valeurs de l’application. C’est ce qui va guider le moodboard et le choix de style.
Dynamisme
Motivation
Communauté
Sérénité
Moodboard
Logo
Style tile
Prototypage
🪄 Deux prototypes hi-fi
Prototype smartphone
Prototype smart watch
Pour cette mission, le brief précisait qu’une application “compagnon” devait être également conçue.
Nous avons donc décidé de concevoir celle-ci pour une smart watch.
Cette app compagnon permet d’accéder rapidement à la fonctionnalité de soutien lors des moments de tentation :
- L’utilisateur lance un compte à rebours de 3 minutes (le temps moyen d’une phase de craving selon nos recherches)
- A la fin du temps, l’utilisateur indique s’il a réussi à résister à la tentation.
Cela permet également d’alimenter les statistiques de consommation qui sont affichées dans le tableau de bord de l’application.
Tests utilisateur
🧪 Tests : accessibilité, utilisabilité et désirabilité
- Accessibilité : conformité WCAG "AA"
- Utilisabilité : observation utilisateur sur 3 tâches (5 utilisateurs)
- Désirabilité : "Reaction cards" de Microsoft (5 utilisateurs)
Test d'accessibilité
Pour nous assurer de l’accessibilité de notre interface, nous avons utilisé le plugin “Contrast” sur Figma.
Cela nous a permis de choisir des couleurs et des polices qui offrent une lisibilité suffisante.
Sur un standard de lisibilité de niveau “AA”, nous avons obtenu un sans faute.
Les 3 seules erreurs apparaissant sont dues à des couches volontairement masquées pour l’animation de notre splash screen.
Tests d'utilisabilité
Pour tester l’utilisabilité de notre solution, nous avons donné aux utilisateurs tests, 3 tâches à accomplir sur l’application :
- Trouver un événement et s’y inscrire,
- Annuler son inscription à un événement
- Lancer la suppression de ses données personnelles
Observer les utilisateurs accomplir ces tâches sur le prototype, nous a permis d’optimiser l’utilisabilité de l’interface.
Par exemple, le bouton “supprimer mes données” était majoritairement recherché dans le menu “Gestion de compte” plutôt que “Gestion des données”. Nous avons donc réorganisé les menus pour correspondre à cet usage.
Tests de désirabilité
Pour évaluer la désirabilité de notre application, nous avons employé la méthode des “Reaction Cards” de Microsoft.
Amical – Direct – Utile : les adjectifs majoritairement choisis par nos utilisateurs correspondent au comportement de soutien préconisé par l’addictologue que nous avions interrogé lors de la recherche.
Les tests valident notre design
Epilogue
🧑🏫 Enseignement retenu
Importance du concept testing
- Lors de la réalisation de ce projet, de multiples imprévus nous ont conduit à adapter, repenser ou réaligner notre vision.
- Notre premier concept n'était pas le bon. C'est en testant celui-ci auprès des utilisateurs, que nous avons pu en prendre conscience.
- Identifier et assumer à temps l'inadéquation de notre premier concept, nous a permis de retravailler cette étape pour qu'elle corresponde mieux au besoin des utilisateurs, tout en restant dans les délais du projet.
- Conclusion : "fail fast". Le plus important n'est pas forcément de trouver le "meilleur chemin" du premier coup, mais plutôt de faire fausse route le moins longtemps possible.