Projet : Clôture Privée
Clôture-Privée est un magasin en ligne qui guide ses utilisateurs parmi un choix de clôtures à poser soi même à domicile. Grâce aux fonctionnalités complémentaires, absentes chez la concurrence, Clôture-Privée accompagne ses utilisateurs à chaque pas de ce processus.
Afin de protéger mon client j’ai exclu quelques étapes de notre collaboration et j’ai évité de publier certaines informations sensibles (noms, chiffres d’affaire, etc).
AVANT
après
MON RÔLE
Mon rôle était de rechercher, designer et tester ces fonctionnalités ainsi que le reste du magasin. J’étais aussi responsable de l’intégration de ce magasin. Afin de compléter ce projet j’ai collaboré avec un chef de projet, un designer graphique et une équipe technique.
Phase de recherche
Kick-off meeting
J’ai démarré ce projet avec une rencontre avec le client (kick-off meeting), où il nous a présenté ses attentes et les contraintes financières et de calendrier. Il m’a présenté les types de produits et les services qu’il souhaitait vendre et il m’a parlé des problèmes qu’il rencontrait avec les ventes en ligne. Nous avons aussi identifié les responsabilités et disponibilités des différentes personnes.
User Research et User Testing
La pose de clôture est un sujet avec lequel je ne suis pas du tout familière, et le projet ne prévoyait pas de tests utilisateurs. Afin de comprendre le processus et les challenges auxquels les utilisateurs sont confrontés j’ai donc du être créative.
J’ai identifié parmi mes amis quelques personnes avec des profils proches à mes personas (nouveaux propriétaires, gens en train de rénover leur maison, etc). J’ai profité de ces contacts et je leur ai posé des questions dans le but de comprendre leur manière de rechercher et leurs choix. Je leur ai aussi demandé leur opinion sur l’ancienne version du site Clôture Privée. Une fois les wireframes pour la nouvelle version réalisés, je suis revenue vers ces personnes pour un peu de guerilla testing, afin de vérifier si mes solutions répondaient à leurs besoins. Cette méthode n’est pas idéale, mais elle donne des données qualitatives et représente un point de départ.
Afin de ramasser un peu plus des données quantitatives, je suis ensuite passée à l’étude des forums de bricoleurs. En analysant les questions que les gens y posent j’ai pu (de nouveau, à très faible coût) identifier les problèmes auxquels les gens sont confrontés lors de l’achat et de la pose d’une clôture.
Persona
Avant de commencer la phase de design j’aime bien définir les groupe(s) cible(s) et créer des personas. Notre client ne possédait pas de données statistiques de type Google Analytics qui auraient pu m’aider, j’ai donc fait une interview avec la personne responsable des ventes. Grâce à ses observations j’ai identifié quelques groupes de clients. Voici ma persona principale, qui m’a inspirée lors de la phase de design:
(exemple d’une persona crée pour ce projet)
Audit
Avec les données ramassées et ordonnées je suis passée à audit de l’ancienne vitrine de Clôture-Privé avec les heuristiques de Nielsen.
User flows
J’ai réalisé quelques esquisses de user flows, ce que m’a permis d’identifier beaucoup de point où l’utilisateur est interrompu lors de son parcours et forcé de retourner en arrière ou de chercher un détournement.
Competitive research
Le marché de la vente de cloture en ligne est déjà assez compétitif, j’ai donc également audité attentivement les sites des 5 meilleurs vendeurs de France. Ainsi j’ai défini les standards qui existent dans ce métier mais j’ai aussi identifié quelques manques envers des besoins que j’avais identifié lors de la phase de user research. Ce document avec mes observations m’a beaucoup aidé dans le processus de design.
Phase de design
Architecture de l’information et User flows
Tout d’abord j’ai commencé avec la création d’une architecture des informations plus claire avec Xmind. Afin de m’assurer de son exactitude, j’ai mappé quelques user flows à la main en utilisant la nouvelle architecture. L’amélioration par rapport à l’ancienne version du site était indiscutable.
Wireframes
J’ai décidé ensuite de designer des wireframes de basse fidélité de la page d’accueil, de la liste produits et de la fiche produit (version PC et mobile) afin de pouvoir discuter le design avec mon chef de projet. J’ai utilisé Balsamiq afin de facilement itérer les changements de design.
Ateliers de co-conception
J’ai présenté mes wireframes au chef de projet et au chef de l’équipe technique. Ensemble nous avons discuté les solutions trouvées et leurs coûts puis proposé des alternatives. J’ai modifié mes wireframes selon ces discussions.
User Testing
Quand j’étais contente de mon projet, je suis retourné à mes testeurs pour un peu de guerilla testing. Le feedback reçu a confirmé l’approche que j’avais prise et m’a permis d’ajuster quelques détails.
Maquettes
J’ai accompagné le graphiste de mon agence dans le processus de création de la maquette en lui expliquant en détail toutes les fonctionnalités. Ensemble nous avons sélectionné la palette de couleurs et l’atmosphère générale du site en utilisant les principes du design émotionnel.
Intégration et Recettage
Après la validation du design par le client je suis passée à l’intégration. J’ai personnalisé lourdement l’interface de CMS Prestashop avec CSS (Sass), Javascript et jQuery. Ensuite j’ai aussi mené le recettage graphique afin de m’assurer que le produit final était identique au projet présenté au client. J’ai également guidé l’équipe technique dans le processus d’implémentation des fonctionnalités supplémentaires (le configurateur de clôture).
Sommaire
PROBLÉMATIQUES DU PROJET
Après la phrase de recherche j’ai identifié quelques points importants:
- Beaucoup de personnes recherchent une clôture en ligne dans le but de faire des économies.
- La plupart des clients de Clôture-Privée achètent leur clôture pour la première fois. Ils ne savent pas vraiment quelles sont les options ni que choisir.
- La majorité des acheteurs souhaitent poser leur clôture eux-même (même si ils manquent d’expérience en bricolage), mais ont du mal à trouver des instructions claires. Ils ont aussi peur de rester sans aide en cas de problème.
- La plupart des magasins en ligne se limitent à la vente et offrent très peu de support pour la pose.
- L’ancien site de mon client donnait l’impression d’être peu professionnel aux clients potentiels. Le design démodé et de nombreux bugs le rendait “suspicieux”. Mes interlocuteurs avaient des doutes quant-à y dépenser une somme d’argent significative.
- Certains groupes de clients potentiels préféraient regarder en ligne, mais acheter en magasin stationnaire. Ils voulaient s’assurer de la qualité en personne et n’avaient pas de confiance dans le transport d’un si grand objet commandé en ligne. Ces gens préféraient souvent payer plus mais avoir le sentiment de mieux contrôler leur achat.
Solutions proposés :
1. Susciter un maximum de confiance à l’utilisateur.
Afin de rassurer l’utilisateur sur la sécurité de la transaction et de la bonne qualité des produits commandés j’ai utilisé plusieurs techniques :
- Design moderne, qui suit les conventions établis par la concurrence, mais offre quelque chose en plus.
- Photos authentiques des produits.
- Présentation de la compagnie, de son histoire et sérieux
- Palette couleur calme, mais avec assez de contraste pour une lecture facile
- Nombreuses réassurances insérées aux endroits stratégiques du site
- Amples explication des craintes les plus populaires des utilisateurs
- Blog avec actualités et photos des réalisations de la compagnie (régulièrement mis à jour)
- Une seule chaîne de réseaux sociaux, mais active
- Plusieurs moyens de contact facile avec la compagnie
- Avis clients vérifiés
2. Souligner les avantages de l’achat en ligne.
- Promotions et destockage
- Devis gratuit
- Livraison gratuite
- Temps de réalisation
- Nombreux moyens de paiement
- Paiement fractionné
3. Clairement présenter la gamme et les types de produits disponibles.
4. Guider l’utilisateur lors du processus de choix de la clôture adaptée à ses besoins (configurateur de clôture).
Avec un peu de créativité en utilisant des fonctionnalités de base de Prestashop j’ai créé un configurateur simple mais efficace qui guide les utilisateurs dans le choix de leur clôture. L’outil n’a pas demandé une seule ligne de code mais uniquement un peu de temps.
Ainsi, avec un très faible coût, nous avons proposé à notre client quelque chose d’exceptionnel – expérience de gamification du choix de la clôture.
5. Donner à l’utilisateur des instructions complètes de pose et lui offrir un support.
J’ai mis en valeur les trois possibilités et niveaux de difficulté de pose disponibles – en autonomie (avec instructions et vidéos de pose offerts par Clôture-Privée), avec le support du staff ou en collaboration avec une équipe professionnelle.
Remarques finales
Challenges
J’ai appris beaucoup sur le travail avec des contraintes techniques. Pour des raisons budgétaires le magasin n’a pas été codé from scratch mais basé sur CMS Prestashop. Cette plateforme a des contraintes et j’étais obligé de modifier ou abandonner beaucoup des solutions que je souhaitais implémenter. C’était une casse-tête mais l’ensemble m’a donné beaucoup de satisfaction !
La plus grande difficulté de ce projet était le manque de budget pour faire un user testing. Afin de mieux comprendre ce secteur de marché et les problèmes de ses clients, j’ai dû trouver des moyens non-standard de recherche. Heureusement, grâce à mes contacts personnels et à l’aide d’internet, j’ai réussi de ramasser beaucoup d’informations utiles qui m’ont permis de cibler au mieux les axes d’amélioration.
Avec toutes les difficultés que j’ai rencontré lors de la phase de recherche, la réalisation de ce projet a été très enrichissante pour moi. J’ai pu me montrer vraiment créative et je crois avoir designé à faible coût un magasin en ligne qui offre à ses clients un vrai plus comparé à la concurrence.
Curiosités
J’ai été très surprise du nombre d’utilisateurs qui se méfiait et ne finalisent pas leurs courses en ligne. Une grande majorité des gens préférait “juste regarder” quitte à acheter le même article dans un magasin stationnaire, même si le coût était plus élevé. Je me suis concentré donc à rassurer les clients à chaque étape de l’achat sur la qualité du produit et la sécurité de la transaction. J’ai aussi facilité l’accès aux informations tels que les conditions de transports ou de retour. Cet approche a permis de réduire l’angoisse de dépenser une grande somme d’argent en ligne et a permis à mon client de gagner beaucoup de nouveaux acheteurs.
Résultats
Le projet a été un grand succès avec 1600% (!) de visites en plus et un chiffre de vente qui a grandi considérablement en six mois.
l'opinion de mon client
Olga a suivi notre projet de refonte d’un site Web e-commerce. A l’écoute et disponible, elle a su nous conseiller dans les choix déterminants.
Forte de propositions à la fois pertinentes et indispensables pour notre site web, Olga a contribué à la réussite du projet.
Nous sommes ravis de cette collaboration et nous la recommandons vivement !
