Ecoconception d’une application, une première expérience réussie pour Kiabi

REX - Livre blanc sur le product management écoresponsable

Ce retour d’expérience a été rédigé dans le cadre du livre blanc by Daveo “Product management écoresponsable : comment concevoir un produit digital Green by Design ?”.

Merci à Julien Roynette, IT Guild Leader chez Kiabi et Romain Lefebvre, Lead Developer chez Kiabi d’avoir pris le recul nécessaire pour livrer ce REX plein de ressources. Nous y découvrirons notamment la faisabilité de mettre en place des actions écoresponsables même après avoir terminé le développement d’une application. Pour savoir comment ils ont réussi avec les équipes à réduire l’empreinte écologique de cette application Seconde main, lisez la suite.

Août 2020, Kiabi finalise la création de son nouveau site e-commerce dédié à la seconde main. Notre équipe de développement est composée d’un Product Owner, d’un Scrum Master et de 5 développeurs (dont un expert front end de Daveo). Le lancement officiel du site a été réalisé en février 2021.

Revenons sur les derniers mois, avant le lancement, qui ont été chamboulés par la participation des développeurs à une conférence externe autour de l’écoconception de service numérique.  Ils proposent alors à leur PO d’expérimenter cette approche sur le site seconde main. Cette proposition, en cohérence avec la vision RSE de Kiabi et la finalité du site (vente de produits d’occasion), est alors validée.   

Sans réelle compétence sur le sujet, notre première action a donc été de trouver un partenaire spécialisé en écoconception pour nous accompagner (Emmanuel Demey & Anthony Lecerf – collectif “IT’s on us”). 

Ce site a été développé dans une approche agile MVP (Minimum Viable Product) : construit de manière incrémentale autour de fonctionnalités essentielles, à partir des feedbacks de nos clients. Nous l’avons appris par la suite : il s’agit là aussi d’une bonne pratique poussée par l’écoconception, autour de la frugalité fonctionnelle et de la chasse aux fonctionnalités inutiles : “une fonctionnalité non développée ne consomme rien en ressources”

Constat et exploitation des métriques

Le choix des scénarios principaux de l’application

L’écoconception est liée à un acte métier plus qu’à une application dans son ensemble. Notre 2e action a donc été de déterminer quels étaient les scénarios sur lesquels nous souhaitions travailler. Nous avons choisi de nous concentrer sur les fonctionnalités du site les plus utilisées (en termes de volume d’appels). Dans le cadre de la plateforme seconde main, l’idée a été de se focaliser sur trois scénarios :

Scénario 1 : Un vendeur ajoute depuis son smartphone un produit.

Scénario 2 : Un acheteur navigue sur le site, fait quelques recherches et initie une négociation avec un vendeur.

Scénario 3 : La négociation est terminée, l’acheteur procède à la transaction sur la plateforme de paiement.

Ce choix des scénarios est très important, car il permet de ne pas s’éparpiller tout en donnant une vraie valeur aux résultats.

Les outils et l’exploitation des résultats

Sur la base des trois scénarios, Emmanuel a pu réaliser, en autonomie, un audit sur la plateforme. D’une part avec l’aide d’outils en ligne et d’autre part manuellement en utilisant les outils de développement intégrés sur les principaux navigateurs du marché. Cet audit a pu être réalisé en 3 jours. Il a été facilité par le fait que les environnements lui étaient totalement accessibles. 

Parmis les outils automatiques nous pouvons citer:

Ecometer qui vérifie le respect des 115 bonnes pratiques d’écoconception, http://www.ecometer.org/
Ecoindex qui calcule la performance en attribuant une note entre A et G selon l’empreinte carbone d’une page web. http://www.ecoindex.fr/

Extrait résultat ecoindex

 

Lighthouse qui vérifie la qualité d’un site web en inspectant les bonnes pratiques liées à l’accessibilité, le mode pwa, les performances etc.

 

Capture issue de lighthouse au cours de l’audit

 

Capture après le retravail sur la partie performance

Les outils automatisés nous ont essentiellement permis d’avoir un constat chiffré (en litre d’eau, kg éq. CO2 de GES, note etc.) ainsi que quelques pistes d’amélioration.

En les utilisant régulièrement, il est possible de suivre facilement les améliorations ou régressions de la plateforme au fil des mises à jour.

Ces indicateurs ont été partagés auprès de notre PO : il n’est pas nécessaire d’avoir un bagage informatique pour les comprendre.

La majeure partie du travail à mener correspondait à l’amélioration des performances du chargement des pages de la plateforme ainsi qu’à un travail sur l’accessibilité du site.

De ce fait, les gains sont doubles, d’une part pour nos clients qui ont une expérience plus fluide et rapide, et d’autre part, les impacts sur l’environnement sont minimisés.

En pratique côté développement

L’audit réalisé nous a permis d’identifier une liste d’améliorations et d’optimisations que nous avons cherché à prioriser par le ROI : certaines actions de moins de 10 min permettaient des gains très importants.

Une fois l’audit de la plateforme terminé, le partage des résultats a été fait auprès du PO, des architectes et du tech lead.

L’idée a été de diviser le travail en plusieurs technical stories tout en estimant le gain vs la complexité de mise en œuvre.

Nous avons pu trouver ainsi plusieurs “quick win” qui ont permis d’améliorer assez facilement le score de la plateforme.

Du clean code vers le Green code

Nous avons aisément pu déterminer les éléments qui posaient problème dans le code. Les briques techniques impactées sont assez diverses aussi bien sur les couches backend que frontend.

Nous avons mis en place quelques actions concrètes côté backend pour alléger les web services : trop d’informations étaient remontées générant un volume de bande passante inutile.

– Suppression des attributs inutiles dans les JSON retournés par le backend vers le frontend.
– Utilisation de “Data transfer object” (DTO) spécifique pour servir des données allégées en fonction des écrans.
– Utilisation des “Json Views” de la librairie Jackson qui permet facilement d’activer la récupération de certains attributs.
Activation du mécanisme de lazy loading disponible sur notre framework de persistance JPA / Hibernate sur certaines requêtes. Cela a également permis d’améliorer les performances de manière globale sur nos API.

Le travail a par contre été plus compliqué côté frontend où une vraie stratégie sur le chargement des librairies (JS) en lazy loading a été nécessaire pour alléger le chargement de certaines pages et le poids du bundle.

Compression des images qui composent le site.
Suppression des librairies qui ne sont plus utilisées.
– Utilisation d’un CDN pour le chargement de la partie statique de l’application. Grâce à cela le chargement des ressources est fait au plus proche de l’utilisateur d’un point de vue géographique. Cela réduit les impacts réseaux. 
Activation de la librairie de notre transporteur uniquement sur la page de paiement
– Paramétrage précis du “time to leave” (TTL) côté cache navigateur selon les ressources du site. Par exemple, nous avons positionné un cache avec une durée de vie très longue pour des images qui ne changeront que très rarement.

En ce qui concerne la partie architecture, de vrais bénéfices existent mais demandent parfois un (re)travail de découpage des services assez conséquent.

Les gains concernent essentiellement la possibilité de pouvoir allouer dynamiquement des ressources systèmes en fonction des besoins et des cas d’utilisations. Ainsi pendant les heures creuses du site la puissance de traitement pourra être automatiquement réduite. (scale down)

Enfin, concernant la partie accessibilité de la plateforme, il s’agit ici d’un gros travail côté UX/UI pour améliorer et faciliter la navigation sur le site pour nos utilisateurs ayant des handicaps. Dans notre cas, il s’agissait bien souvent d’une mauvaise utilisation des composants de notre librairie graphique.

Remarque : Nous avons consacré un sprint (trois semaines dans notre cas avec deux développeurs) pour corriger la plus grosse partie des soucis liés aux performances. Le reste des technicals stories ont été distillées au fil des sprints. Elles étaient principalement liées à des améliorations d’architecture et d’accessibilité.

Aller plus loin

Purge des données

Des vastes chantiers sont prévus sur notre plateforme l’année prochaine et la gestion des données en fait partie.

Une vraie stratégie sur la purge des données sera mise en œuvre. Par exemple, la suppression / désactivation des annonces non vendues depuis un certain temps, la suppression de compte en double ou jamais utilisé etc.

La purge des logs applicatifs (qui peuvent être très nombreux s’ils sont mal paramétrés) en accord avec les lois de conservation des données sera également analysée.

La bonne gestion de la durée de vie des données de notre application aura un impact conséquent aussi bien écologiquement qu’économiquement.

Infrastructure

Un autre chantier prévu en 2022 sera la migration de notre plateforme sur la solution Kubernetes. Ainsi, nous devrions bénéficier entre autres d’une plateforme avec de l’auto-scaling, ce qui permet l’ajout ou suppression de ressources sans interruption de service en fonction de l’activité sur le site.

Sur la partie infrastructure nous avons mis en place un quick win, en quelques heures (sous forme de script) : l’arrêt de l’ensemble de nos serveurs de développement et recette en dehors des heures de travail. Notre facturation cloud (basée sur le nombre d’heures d’utilisation) a été divisée par quatre ce qui contribue à réduire notre impact écologique. 

Bonnes pratiques fonctionnelles & UX

Au-delà des aspects techniques, plusieurs bonnes pratiques fonctionnelles et UX peuvent aussi être appliquées pour réduire les impacts environnementaux de notre site. 

Quelques exemples : 

– Limiter les listes à 10 items & éviter le scroll infini sur la page d’accueil 
– Raccourcir autant que possible le parcours utilisateur : de manière générale, “moins de temps passé par l’utilisateur = moins d’impacts”. Sur ce point, de nombreuses pratiques UX visant à simplifier encore plus l’utilisation du site pourraient s’appliquer ici.

Suite à cette première expérience en écoconception, voici notre bilan :

L’écoconception, c’est beaucoup de bons de sens : les bests practices ne sont pas complexes à appréhender (une fois bien expliquées par un expert) et il est assez simple de donner du sens pour tous à la démarche
On peut adopter une démarche d’écoconception sur une application déjà développée : certains leviers sont alors plus difficiles à activer mais de nombreuses actions peuvent encore être mises en oeuvre
Adopter une démarche d’écoconception apporte d’autres gains indirects et pourtant essentiels : meilleure performances, accessibilité ou encore expérience utilisateur simplifiée
L’écoconception, ce n’est pas plus cher : les bests practices d’écoconception, une fois connues, ont pu être intégrées sans surcoût à la réalisation de nos nouvelles user stories. De plus, les gains indirects apportés par la démarche d’écoconception compensent intégralement (voire plus) l’investissement réalisé.

Sur 2021, nous avons continué la démarche d’écoconception sur l’application seconde main (dans une vision d’amélioration continue). Nous nous sommes concentrés sur l’écoconception web de notre site mais pour le qualifier d'”éco-conçu” nous aurions encore plusieurs chantiers à mener (en particulier fonctionnels) . 

Nous avons aussi souhaité travailler sur une 2e application, cette fois destinée à nos conseillères de ventes en magasin. Notre choix s’est porté sur cette application car elle est exécutée sur plus de 2000 terminaux mobiles Kiabi : les impacts et gains potentiels sont donc plus importants.

Enfin, nous allons lancer sur début 2022, un cercle autour de l’écoconception de service numérique, ouvert aux collaborateurs de l’IT, avec pour objectif d’évangéliser de manière plus large des bests practices et nos premiers apprentissages.

> Découvrez en plus sur le Product Management responsable en téléchargeant notre livre blanc !

Article Précedent

L’entretien annuel : tout ce qu’il faut savoir pour s’y préparer

Article Précedent

Les tendances UX/UI design en 2022

Articles associés

Shopping Basket