Création d'une boutique en ligne de vélos avec un outil de personnalisation*

Information

Contexte

Le site web de vente en ligne de vélos BikeBuilder permet de créer son vélo sur mesure ou à partir de modèles créés par d’autres clients. Les utilisateurs peuvent aussi acheter un vélo non personnalisé en ajoutant des options.

Challenge

Proposer aux utilisateurs la possibilité de personnaliser leur vélo quels que soient leur type de pratique (ville, route, etc.), leur usage (sport, trajet quotidien), leur attente en terme de performance (poids, taille, cadre, etc).

Objectif

Permettre aux utilisateurs à la fois de personnaliser leur vélo à partir de zéro ou à partir de modèles précédemment créés par d’autres utilisateurs/clients. Accompagner les utilisateurs en leur suggérant les composants adaptés à leur pratique, usage et attente.

Méthodologie

Comprendre l'utilisateur

Recherche utilisateur

Résumé

J'ai mené des entretiens et analyser/synthétiser ces résultats en cartographiant l'expérience utilisateur via l’ux mapping (carte d’empathie, user journey, experience map) Les deux principaux groupes d'utilisateurs identifiés par la recherche sont celui des « confirmés/sportifs » et celui des « Loisirs/quotidien ».

Ces 2 groupes d’utilisateurs ont confirmé que s’ils avaient le choix de pouvoir personnaliser leur vélo ils en seraient d’autant plus satisfaits. En résumé, ils ne savent pas quels sont les sites qui proposent ce type de services et quand c’est le cas ils ne sentent pas accompagnés dans la personnalisation.

« Généralement ce sont des vélos hyper chers et destinés à un public restreint comme ceux qui font de la compétition. »

Difficultés

1. Complexité du processus de personnalisation : Le nombre d’options conséquent rend le processus moins facile d’utilisation.
2. Manque d’accompagnement lors de la personnalisation : Ne pas savoir quel type de composants (fourche, cadre, roues, etc.) sont adaptés à son besoin.
3. Ne pas avoir la possibilité de payer en plusieurs fois : À partir d’un certain montant, le paiement en 3 ou 4 x faciliterait la validation de la transaction.
4. Accessibilité/Responsive Design : Ce type de site avec personnalisation est souvent difficile sur mobile du fait de la complexité du processus de personnalisation.

Persona

Énoncé de problème

Marwan est un jeune homme qui fait du vélo à haute intensité et qui a besoin de pouvoir créer un vélo sur mesure parce qu’il a un haut niveau d'exigence quant au matériel qu’il utilise.

Persona Marwan

Parcours utilisateur

De pouvoir personnaliser son vélo avec la possibilité d’enregistrer chacune de ses configuration afin de porter son choix définitif plus tard, à tête reposée.

Carte du parcours utilisateur

Commencer la conception

Wireframe papier

En prenant le temps d’itérer sur le wireframe de la page d’accueil de l’application j’ai essayé de répondre au problèmes des utilisateurs notamment autour de l’utilisabilité et de la navigation sur desktop.

Créer une interface simple (en m’appuyant sur les théories de la Gestalt) avec des visuels attrayants et la proposition de valeur de BikeBuilder « Un vélo fait pour vous et par vous »

Wireframe papier

Wireframe numérique

M’appuyer sur les retours des utilisateurs quant à leurs expériences sur des sites ou applications autour de la vente en ligne de vélos.

Page d’accueil du site web

Favoriser la simplicité de la personnalisation en affichant ni le header, ni le footer du site. Une sorte de « page spéciale », type « full modal »

Page dédiée à la personnalisation

Prototype basse-fidélité

L’idée est de simuler un parcours type de la page d’accueil au choix du produit/personnalisation avec le processus d’achat

Étude d’utilisabilité

Résultats

J'ai mené 1 étude d’utilisabilité. Les conclusions de la première étude ont permis d'orienter la conception du wireframe vers la maquette.

Peaufiner la conception

Maquettes

La 1e étude a révélé la volonté de pouvoir consulter ses créations de vélo sans avoir à recréer depuis le départ ou un modèle.

Ainsi, j’ai ajouté un onglet « mes création ».

update suite étude d'utilisabilité.

Prototype haute-fidélité

Accessibilité

1. Le rapport de contraste entre le texte et son arrière-plan est au-delà de la norme fixée à 4.5:1
2. Faciliter la compréhension d'une page entre alternance de bloc image, bloc texte court et hiérarchie des éléments de titrage
3. Nommer les liens explicitement

À venir

L’impact

L’application souhaite mettre l’accent sur l’utilisabilité et accompagner l’utilisateur lors de chaque phase du parcours. De la personnalisation d’un vélo au processus d’achat/p>

« Avec ce type de personnalisation j’aurais vraiment l’impression que le vélo est fait pour moi avec mes besoins et attentes en terme d’équipement et d’accessoires »

Ce que j'ai appris

La partie sur l’analyse de sites concurrents m'a permis à la fois de piocher parmis les choses très intéressantes comme la navigation, l'outil de personnalisation. La phase d'immersion est hyper importante pour délivrer un produit qui réponde au plus près des besoins/ressentis des utlisateurs.

Prochaines étapes

1. Mener une 2^e étude d’utilisabilité afin de vérifier que le prototype haute fidélité répond bien aux problèmes soulevés lors de la 1^e étude.
2. Continuer à recueillir des retours utilisateurs via des questionnaires aussi bien sur le quantitatif que le qualitatif
3. Continuer s’il le faut la recherche utilisateur si les questionnaires révèlent des points importants qui nécessitent de nouveau des interviews.