La Coopérative Climat Bretagne
Description
La Société Coopérative d’Intérêt Collectif (SCIC), créée par des acteurs publics et privés du pays de Brest, a donné naissance à la Coopérative Climat Bretagne.
Leur mission est d’accélérer la décarbonation des acteurs du territoire breton.
Grâce à leurs valeurs et leur mission, il était essentiel pour eux d’avoir un site web exemplaire sur le plan de son empreinte environnementale.
- Conseil
- Création
- Développement sur-mesure
- Formation
- Maintenance web
- Site web vitrine
- Ux design
- Webdesign
Services
En collaboration avec Sébastien Camus pour le SEO.
Objectifs
L’objectif est de retranscrire cet outil dans un site web simple, fluide et accessible, qui proposera :
- Web design : ce site doit valoriser l’image de la Coopérative et le sérieux de son accompagnement ;
- Éco-conception : la création, l’utilisation et la maintenance du site devront générer le moins possible d’émissions de gaz à effet de serre ;
- Gestion des contenus : administrer le site en complète autonomie ;
- Respect des standards : le site doit être compatible avec les navigateurs courants et mettre en œuvre les technologies actuelles pour un usage optimal sur desktop et mobile ;
- Référencement naturel : les techniques SEO ad hoc doivent être mises en œuvre (URL, HTTPS, sitemap, robots.txt, balises de titres…) ;
- Carte interactive : créer une carte éco-responsable et facile à mettre à jour.
UX / UI Design en éco-conception Web
Réflexion sur les besoins et UX Design
L’étude des besoins et le travail en UX, notamment via un questionnaire en amont, ont permis de mener le projet sereinement.
Grâce au questionnaire UX rempli par la Coopérative, j’ai pu en apprendre davantage sur leurs besoins, mais surtout sur les besoins de leurs utilisateurs et utilisatrices.
Il y a deux entrées sur le site web : pour les clients et pour les porteurs de projets. Dès le header de l’accueil, il fallait proposer ces entrées, mais aussi véhiculer une image sérieuse, professionnelle et de confiance.
Le fer de lance du site web est les projets et notamment la carte interactive, qui permettront de générer des prises de contact avec leurs clients potentiels et leurs porteurs de projets.
La carte interactive, mais plus globalement la page des projets, a été le point sensible du projet. Comment faire une carte qui soit à la fois lisible, compréhensible, navigable et éco-conçue ? Doit-on la garder en mobile ? Et dans cinq ans, quel volume aura-t-elle et sera-t-elle encore utilisable ?
Une carte interactive est très utile, mais elle peut aussi être compliquée à utiliser. C’est pourquoi, pour la conception, nous avons privilégié une carte pour les projets en cours, seulement en version desktop. Nous avons tous fait les frais d’une carte interactive en mobile, même si les zones chaudes et froides ont bien été déterminées. Une carte interactive reste complexe en mobile.
C’est pourquoi cette page dispose aussi d’un annuaire pour tous les projets, notamment utilisé en mobile. Pour réduire le poids de la page, les visuels sont seulement proposés pour la carte et non pour l’annuaire.
Pour réduire l’impact environnemental, nous n’avons pas constitué de page détaillée pour les projets, seulement un toggle permettant d’en lire un peu plus dans les cards des projets, avec la possibilité de contacter la Coopérative pour plus de détails.
La carte interactive éco-conçue
La carte interactive a aussi été pensée pour que le flux d’informations reste lisible et accessible. Nous avons fait le choix de présenter seulement les projets en cours sur cette dernière. Cela a permis une utilisation plus simple de l’outil. Elle a été non seulement créée pour une utilisation confortable sur le plan de l’usabilité, mais aussi plus généralement de l’accessibilité.
Le fait d’avoir créé une carte custom pensée du début à la fin a permis de réduire l’impact environnemental de manière optimale. À l’aide d’un fond de carte en SVG, ainsi que d’éléments définis et choisis par rapport à l’usage des personas, on va à l’essentiel.
UI Design
En lien avec la charte graphique, je suis parti sur un design principalement suisse. Au vu de la charte graphique minimaliste et du souhait de la Coopérative Climat Bretagne d’avoir un site épuré, ce style graphique me paraissait idéal.
Parmi les couleurs de la charte, le bleu ainsi que le vert permettaient d’amener de la douceur et un climat apaisé terre/mer en lien avec le littoral breton. L’usage d’un jaune vif a permis de ramener un peu de peps à ces couleurs assez pastel. Le jeu des couleurs s’est adapté également aux contrastes et, plus généralement, à l’accessibilité.
Typographies
Couleurs
Maquettes graphiques
Développement en éco-conception Web
Un travail de fond pour un développement serein et sur-mesure
Tout le travail en amont d’UX et de réflexion sur les besoins a permis un développement web logique et sur-mesure pour pérenniser le projet sereinement.
Une carte interactive éco-conçue
Tous ces points ont permis d’élaborer une carte interactive sur-mesure avec le moins de charge possible : utilisation d’une image en SVG pour le fond de carte et affichage seulement des projets en cours. Concernant l’intégration des points, comme pour toute carte interactive, elle est basée sur un système de coordonnées X/Y.
Une dette technique réduite sur les autres pages
La page la plus lourde de ce site est la page des projets. Nous devions donc pallier cette dette technique sur les autres pages en réduisant le volume — et donc le poids —, les requêtes, ainsi que la complexité des pages.
Le SEO
Un travail a aussi été réalisé autour du SEO. Cependant, le but premier est de satisfaire les utilisateurs et utilisatrices, et que le site leur soit utile. Le contenu pour le contenu n’est pas utile et dessert totalement l’utilisation, avec un impact environnemental non négligeable. Les sections ont été déterminées à la fois pour les personas, mais aussi pour le SEO, notamment sur le maillage interne, les microformats et la structure HTML.
Performances Web
Performances éco à la mise en ligne :
• Ecoindex : catégorie B (80,6 / 100) – (Grade A à partir de 81/100)
- Poids moyen des pages : 448ko (moyenne du Web : 2410Ko)
- Requêtes moyenne par page : 18 (moyenne du Web : 78)
- Taille moyenne du DOM : 288 (moyenne du Web : 693)
• Website Carbon Calculator :
0,07 équivalent C02 à chaque visite du site contre 4.61g de CO2 en moyenne pour un site non éco-conçu
Performances globale sur la page d’accueil :
- Google Page Speed version ordinateur : 96/100
- Google Page Speed version mobile : 94/100
- Pingdom Tools : 91/100