Billi London
Février 2021 - 15 jours
Projet d'étude
Avec : Lucie Lépine, en télétravail.
​
Éco-conception d'un site marque de mode
L'année dernière, j'ai eu le plaisir d'interviewer les fondatrices de Billi London, une marque innovante de collants qui se biodégradent en 5 ans au lieu de 40 à 100 ans. Leurs collants participent à la transition vers un modèle d'économie circulaire : ils sont conçus pour être durables et ne laisser aucun déchet dans l'environnement en fin de vie.
Des valeurs éthiques et sociales sont au cœur de l'entreprise de Marie et Sophie : elles réfléchissent attentivement à l'impact de chacune de leurs décisions sur les travailleurs, les clients, les fournisseurs et l'environnement.
Peut-on éco-concevoir une boutique en ligne comme Billi London a éco-conçu ses collants ?
​
Rôle : UX/UI Designer, étude de marché, recherches utilisateurs, priorisation de fonctionnalités, prototypages, tests, identité visuelle.
Outils : Miro, Figma, Zoom.
Projet réalisé en anglais, nos ressources sont en français et anglais.
​
Recherches
​
Pour comprendre l'impact environnemental et social du monde numérique, nous participons à
La Fresque du Numérique, un atelier-jeu collaboratif qui nous informe avec des faits et des données révélatrices.
Les problèmes sont réels et exponentiels
​
En effet, nous apprenons qu'en 2019, nous possédions 19 milliards d'appareils numériques : smartphones, ordinateurs et objets connectés. Toutes les secondes, 50,000 photos sont publiées sur Instagram, 4 millions de vidéos YouTube sont regardées et 12 milliards d'e-mails sont envoyés toutes les heures, mais seulement 20% sont ouverts. (Ademe-FR)
​
Plus polluante que le transport aérien, notre utilisation combinée d'équipements numériques et d'Internet est responsable de 4% des émissions mondiales de gaz à effet de serre (équivalent à 18 centrales nucléaires) et devrait doubler à 8% en 2025 (The Shift Project-FR/EN)
Enfin, s'il s'agissait d'un pays, Internet serait le troisième plus gros consommateur d'électricité au monde, derrière la Chine et les États-Unis.
Après avoir relié les sources et les conséquences, nous évoquons comment les individus, les gouvernements et les entreprises pourraient minimiser l'empreinte environnementale du numérique.
Et qu'en eut-il de nous, UX-UI Designer ? Comment concevoir des sites Web à faible empreinte écologique ?
Évaluation du site Web actuel
​
Nous commençons par interviewer 5 clientes pour connaître leur profils et ce qu'elles pensent de l'expérience utilisateur.
Lors des entretiens, nous remarquons des problèmes d'ergonomie, d'architecture de l'information et de rédaction qui rendent la navigation déroutante. Des contenus redondants, du texte et des pages superflues ainsi que des éléments de navigation cachés les désorientent et donne lieu à un abandon de paiement.
​
C'est à ce moment précis qu'il a été vraiment utile d'évaluer le site avec les 10 heuristiques d'ergonomie pour conseiller des modifications afin d'"aider les visiteurs du site à effectuer des tâches plus rapidement." Car "Un site avec une bonne UX aura une plus petite empreinte carbone numérique par utilisateur." (Creativebloq.com)
En parallèle, nous avons également réalisé un test de désirabilité auprès de 20 utilisateurs ne connaissant pas la marque. Ils ont été invités à naviguer sur le site Web pendant quelques minutes et à sélectionner 5 adjectifs sur 25 pour décrire l'apparence et leurs ressentis.
​
"Professionnel", "efficace" et "ennuyeux" étaient les 3 premiers adjectifs.
​
Ces adjectifs démontrent que l'expérience ne correspond pas à ce que cherche à représenter la marque : élégance, être inspirante, audacieuse et unique.
On vous présente Emma, notre persona
​
Emma incarne les enseignements clés de nos entretiens, elle est une citadine aisée d'une trentaine d'années, fait régulièrement des achats de mode et autres produits en ligne. Consciente des enjeux climatiques, elle souhaite consommer de manière plus responsable. Acheter éco-responsable, ce n'est pas seulement aider le climat et les gens, mais c'est aussi un moyen indirect d'interagir avec son entourage en partageant une expérience intéressante et significative. (Photo : Unsplash)
​
PROBLÉMATIQUE
​
EN TANT QUE consommatrice éthique,
JE VEUX que mon expérience commerce en ligne soit aussi éco-responsable que le produit que j'achète,
AFIN de réduire mon empreinte environnementale et de partager mon expérience avec mes proches.
Comment créer un e-shop éco-responsable sans compromettre l'expérience d'Emma ?
​
L'éco-conception numérique est un sujet pour l'instant en friche et en constante évolution.
Des designers, développeurs, mais aussi des marques et des agences visionnaires ont entamé la conversation au cours des 2 dernières décennies et proposé des solutions concrètes pour concevoir des interfaces numériques de la manière la moins impactante pour l'environnement.
J'ai rassemblé de nombreuses références d'articles et des outils en fin d'article en anglais et français. Pour ce projet, nous avons été particulièrement inspirés par : le site Low Impact de Organic Basics, de l'interview de Buddy Buddy par The Good Goods, qui a conçu le site de l'agence Maartin.
Hormis le Design et l'ergonomie, il y a de bonnes pratiques techniques, d'hébergement et de développement pour réduire l'empreinte d'un site Web : Green IT référence 115 bonnes pratiques d'écoconception de pages Web. Pour cette expérimentation, nous nous sommes concentrés sur la production d'un prototype Design à faible impact.
Principes Design d'éco-conception numérique
​
Après une phase d’exploration design et une évaluation de la faisabilité des différentes meilleures pratiques en fonction des besoins de l’entreprise et des utilisateurs, nous avons retenus ces principes de conception pour Billi London.
"On peut seulement améliorer ce qu'on peut mesurer"
Pour connaître l'efficacité de la refonte du site à faible impact, nous avons choisi 2 outils complémentaires développés par le groupe Green IT sur la base de leurs 115 bonnes pratiques d'écoconception.
EcoIndex calcule une estimation de l'empreinte environnementale et des performances d'une page web.
EcoMeter « évalue le niveau de maturité d'écoconception de la page Web en comptant le nombre de bonnes pratiques mises en œuvre ; et identifie les axes de progrès (…) ».
​
Style Tile
Eco-responsable au possible, nous décidons de sur-cycler l'existant et d'adapter l'identité de marque actuelle de Billi London aux principes d'éco-conceptions web définis.
En sachant qu'une palette de couleurs accessible doit avoir un rapport de contraste proche de AAA, nous décidons d'utiliser 2 couleurs principales au lieu de 5 pour la mise en page du site. En associant les couleurs primaires et secondaires et en les soumettant à Colorable, nous trouvons les duos de couleurs les plus contrastés et les plus lisibles et agréable à l'oeil.
Pour limiter la quantité de lumière émise par l'écran et économiser de l'énergie, nous avons également choisi des couleurs qui ne consomment peu en termes de luminosité : le vert foncé et rose pastel. Nous avons gardé le noir et le blanc comme neutres, car ils ont le meilleur contraste pour la lecture de texte et avons choisi l'Orange Sanguine comme couleur d'accent.
​
Halte aux médias riches
En ce qui concerne la réduction du poids de la quantité des médias, nous avons supposé qu'il était très important d'afficher des images de produits de haute qualité pour un e-shop de mode. Cependant, nous prenons la décision radicale de supprimer toutes les photos de haute qualité, de les redessiner en vecteur et d'afficher 1 image en basse définition pour les photos produits.
Pour les polices, nous remplaçons les polices par des alternatives Google Fonts, car elles s'afficheront universellement sur tous les appareils. La taille du texte est configurée pour être toujours supérieure à 14 pt pour être visible et accessible aux personnes malvoyantes, selon cet article.
Architecture de l'information
Moins c'est mieux, quand il s'agit d'éco-conception : nous avons retravaillé le plan du site pour avoir le moins de pages possible.
Nous avons supprimé des doublons d'information comme une page "guide d'entretien" et un pdf. "Guide d'entretien" pour ne garder que le pdf.
Un utilisateur souhaitait lire les pages «À propos» et «Engagements», mais a abandonné rapidement, car elles étaient trop longues et les paragraphes étaient dispersé. Afin de libérer l'utilisateur et le climat des multiples clics et chargements de pages, nous les avons ainsi fusionnés en 1 page. L'utilisateur pourra accéder à tous les articles avec un bouton déroulant pour chaque titre. Notre nouveau plan du site prévoyait de passer de 30 pages environ à 22 pages.
Focus sur le flux utilisateur
Notre défi est de savoir si une version à faible impact du site altérerait l'expérience utilisateur d'un e-commerce de mode, par conséquent nous nous sommes concentrés sur le flux d'utilisateurs acheteur. Même si la conception en mobile-first est une bonne pratique de conception à faible impact, nous avons vérifié les statistiques de Billi et découvert que la plupart des ventes se faisaient sur la version de bureau (55,42%) et avons choisi de créer un prototype avec les pages d'accueil, pages produits et panier.
​
​
​
Prototype Hi-Fi
Tests d'ergonomie
Notre prototype est testé 6 fois avec 2 clientes existantes et 4 nouveaux utilisateurs qui ne connaissent pas Billi London et correspondant au profil du persona Emma. Nous n'avons délibérément pas informé d'une refonte du design et leur avons donné la tâche d'acheter une paire de collants Coco.
Informations clés
-
Les engagements en matière de durabilité doivent être mis en valeur pour la crédibilité de la marque, car beaucoup ont cliqué sur «About» pour en savoir plus avant de regarder le produit.
-
La désirabilité n'est pas détériorée par le design éco-conçue : « branché », « jeune » et « original » étaient les adjectifs les plus utilisés pour décrire la page d'accueil.
-
Cependant, pour convertir à une vente, il est indispensable d'afficher au moins 1 photo de haute qualité sur la page produit : 5 / 6 utilisateurs n'achèteraient pas sans voir les détails du produit même s'ils comprenaient le POURQUOI d'une photo pixelisée.
​
Conclusion
​
Pour concevoir un site web à faible impact, il s'agit de définir un équilibre entre les attentes des utilisateurs et les besoins de l'entreprise. La direction artistique et le contenu sont des domaines très importants à développer pour que la marque transmette ses motivations éco-responsables tout en atteignant ses objectifs sans négliger l'expérience de l'utilisateur.
​
Afin de finaliser l'expérience, les prochaines étapes consisteront à intégrer la version complète du e-commerce afin de mesurer et de comparer son empreinte écologique avant et après la refonte. En outre, nous testerons les performances de vente sur une période de 6 mois afin de prouver que l'expérience d'achat et les besoins de l'entreprise n'en pâtissent pas.
​
Retrouvez toutes nos ressources, outils utilisés et inspirations sur Medium.
​
​
​
​
​
​
​