Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

2025 | UPCYCLING DE SITE | Refonte totale

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Rejouons Solidaire - réseau n.1 en France de l’économie circulaire et solidaire du jouet.

CLIENT

Rejouons Solidaire

SECTEUR

Économie circulaire et solidaire · Jouets

DURÉE

4 mois

C'est grâce à l'offre de refonte totale UPCYCLE que Rejouons Solidaire est passé d'un site invisible à un véritable outil de visibilité et d’acquisition

01

Prise de contact

Quand Rejouons Solidaire me contacte, leur site existe déjà. Mais dans les faits ? Il est peu visible, peu structuré… et surtout, il ne reflète ni leur impact réel, ni l’ampleur de leur réseau.

02

Constat

Entre leur nouvelle identité de marque…et un site one page bricolé, à l'image de l'ancienne charte graphique, difficile à faire évoluer…le décalage devient évident.

03

Proposition

L’enjeu n’était donc pas de juste “refaire un site”. Mais de transformer un support figé en un outil capable d’attirer, structurer et convertir. Avec une approche très simple : donner une seconde vie à ce site en utilisant ma méthode d’upcycling de site web pour le transformer et le faire briller à nouveau.

04

Résultat

En 3 mois, un site 8x plus visible sur Google, plus clair, plus accessible… et enfin aligné avec leur mission.

Voir le site

Contexte et besoin

Rejouons Solidaire est un réseau engagé dans l’économie circulaire et solidaire du jouet pour enfants. Quand ils me contactent, leur site existe déjà… mais il ne joue clairement pas son rôle. Le constat est simple :

  • un site one-page devenu trop limité pour leur croissance
  • une navigation confuse, difficile à faire évoluer
  • une visibilité SEO quasi inexistante malgré un vrai impact terrain
  • une image digitale en décalage avec leur nouvelle identité de marque

Résultat : leur site ne reflète ni la richesse de leur réseau, ni leur légitimité grandissante. Il informe… mais ne structure pas. Il existe… mais n’attire pas.

Objectifs du projet

L’objectif principal était de :

Passer d’un site one-page limité à un site multi-pages structuré et évolutif

Augmenter la visibilité sur Google et attirer de nouveaux membres et mécènes

Aligner le site avec leur nouvelle identité de marque, grâce à au guide de style web, adapté

Rendre le site plus clair, lisible, professionnel, crédible et surtout engageant

“L’accompagnement est allé au-delà de mes attentes, avec une expérience véritablement sur-mesure pour la rédaction et une méthodologie à la fois claire, efficace et extrêmement structurante.”

Carla, Chargée de communication chez Rejouons Solidaire

Mon approche

Pour ce projet, j’ai appliqué une logique d’upcycling stratégique : capitaliser sur ce qui fonctionnait déjà afin de transformer l’existant en le rendant plus utile, plus clair et plus performant. Chaque décision a été prise avec un objectif précis : rendre le site plus visible, plus cohérent… et surtout plus utile pour leur développement. Concrètement, mon approche s’est articulée autour de 3 axes.

01

Clarification stratégique

Analyser le site comme un système global (structure, contenus, SEO) pour identifier ce qui bloquait sa visibilité et sa compréhension

02

Transformation structurée

Passage d’un site one-page à un site multi-pages clair et évolutif. Puis accompagnement à la rédaction pour créer des contenus lisibles, utiles et optimisés SEO

03

Alignement graphique et technique

Adaptation de la charte print au web (accessibilité, lisibilité, cohérence). Puis création du site sur-mesure et optimisation complète du site (performance, éco-conception, expérience utilisateur).

RÉSULTATS OBTENUS

Rejouons Solidaire a désormais un site tout neuf

Performant

Amélioration de ses performances : 75 → 97/100 sur mobile et 81 → 94/100 sur desktop.

Bien référencé

On a multiplié par 8 leur visibilité sur Google, avec près de 3x plus de clics et une progression de +11 positions en moyenne jusqu’en haut de la première page.

Accessible

Un site plus accessible : 83 → 97/100, grâce à une adaptation fine de la charte graphique au web et l'optimisation d'autres points techniques.

Éco-responsable

Réduction drastique de son empreinte carbone : de 1,64g à 0,11g CO2 par page vue, soit une baisse de 93% (d’une note F à B).

Adapté à son audience

Avoir un outil lisible, crédible et aligné avec leur mission.

Mais surtout, le projet a permis à Rejouons Solidaire d'avoir :

  • un site qui attire enfin du trafic qualifié… et ne reste plus invisible
  • un outil devenu central dans leur développement (et non plus un simple support)
  • un réseau dont l’impact est désormais visible… aussi en ligne

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant la refonte puis après la mise en ligne du site (septembre 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou demande un diagnostic gratuit en cliquant sur le bouton vert en bas à droite de l'écran.

Guide de style web

Éthique, éco-responsable et accessible.

Un coup d'oeil sur la page d'accueil

Performante, éco-responsable et accessible.

01

Accessibilité

Rejouons Solidaire venait de revoir son identité visuelle : nouveau logo, illustrations, couleurs, typographies. Je suis donc parti de leur nouvelle charte graphique existante pour cette refonte. Néanmoins une charte graphique print est rarement adaptée aux standards du web.

Alors, j'ai légèrement ajusté certains codes graphiques afin de les aligner non-seulement à ses valeurs éco-responsables, mais aussi à ses valeurs humaines en les rendant plus accessibles aux personnes en situation de handicap. L'enjeu dans ces cas-là est surtout d'avoir des typographies assez lisibles et web et de s'assurer du bon contraste de couleurs entre chaque texte et son arrière plan. Tout a donc été testé pour répondre en tout ou partie à ces normes d'accessibilité web.

Les typographies

Je n'ai pas utilisé leur police principale initiale, la Bagor car la licence de cette typographie n'est pas disponible pour le web. Nous l'avons donc remplacé par la Bowlbi One SC qui lui ressemble beaucoup. Cette dernière n'étant pas vraiment accessible, nous l'avons utilisé uniquement par petites touchent. Soit, uniquement sur des mots-clés séparants leurs diverses sections, comme un élément graphique, illustratif, décoratif plus que "lisibles". Autrement dit c'est un peu comme une photo purement décorative, si on arrive pas à la voir/lire, cela ne nous empêchera pas de comprendre le site et les messages clés.

Mais, me diras-tu, en terme d'écologie numérique, la règle c'est plutôt : si c'est purement décoratif, c'est qu'on doit l'enlever, le supprimer, non ?

Oui, dans l'idéal, mais un projet et fait de compromis, de dosage et de stratégie. Ma cliente ne pouvait pas se permettre de ne pas utiliser cette typographie sur son site, alors que c'est sa typographie principale sur le print pour toute sa nouvelle campagne de communication... Dans un soucis de cohérence on a trouvé une alternative pour l'utiliser quand même, mais de façon plus accessible que de l'utiliser dans tous les titres du site.

Les couleurs

Ici aussi, l'enjeu était de taille, puisque leur toute nouvelle charte graphique, comportait énormément de couleurs, très représentatif de l'univers enfantin, mais un peu feu d'artifice une fois appliqué sur un site web. 

Alors on a regardé celles qui était accessibles entre elles et nous avons segmenté les couleurs par typologies de pages. Le vert clair pour représenter les membres, le vert foncé pour les témoignages, le jaune pour leur réseau, le orange pour les mécènes, le rose pour leurs offres d'accompagnements, le bleu pour leurs valeurs et savoir-faire. Un code que nous avons utilisé sur l'ensemble des pages du site pour garder une cohérence globale et asseoir une habitude de lecture, des repères visuelles pour les visiteurs récurrents.

Livrable : Guide de style web et accessible (visible plus haut)

02

Des images plus éco-responsables et SEO-friendly

Les images ont toutes été optimisées pour le site :

  • cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
  • export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
  • et enfin compression des ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Livrable : Maquettes graphiques

Astuce éco-responsable

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Les images en noir et blanc et/ou depixelisé (on enlève certains pixels) génère moins d'énergie lors de leur chargement que leur confrère classique et colorées.

Alors nous avons fait le parti-pris de n'utiliser que des photos en noir et blanc sur le site de Rejouons Solidaire, pour l'alléger à la fois en poids et ainsi réduire son empreinte carbone, mais aussi l'alléger visuellement. En effet, le site étant déjà très coloré il aurait pu entrainer une certaine fatigue visuelle auprès de son audience si les photos étaient restées toutes en couleurs.

TÉMOIGNAGES

Iels m'ont fait confiance

EXTRAIT

L’accompagnement est allé au-delà de mes attentes, avec une expérience sur-mesure pour la rédaction et une méthodologie à la fois claire, efficace et extrêmement structurante.

Coralie a été très réceptive et vraiment à l’écoute, ce qui a rendu l’expérience encore plus fluide et agréable. Merci beaucoup Coralie pour ta patience, tes conseils, c'était un plaisir de travailler avec toi !

Carla
Chargée de communication, Rejouons Solidaire

“L’accompagnement est allé au-delà de mes attentes, avec une expérience véritablement sur-mesure.Ce que j’ai le plus apprécié, c’est la clarté et la structure de la méthodologie, notamment pour la rédaction des contenus : tout était pensé pour rendre le travail simple, guidé et efficace.

L’accompagnement était à la fois fluide, complet et très accessible, notamment grâce aux supports et aux vidéos de formation. Un site que l’on comprend, que l’on peut faire évoluer facilement… et qui reflète enfin notre projet.

Coralie a été très réceptive et vraiment à l’écoute. Merci beaucoup Coralie pour ta patience, tes conseils et ton accompagnement, c’était un plaisir de travailler avec toi !”

Carla
Chargée de communication, Rejouons Solidaire

Et si ton site devenait (enfin) un vrai levier pour ton activité (pas juste une vitrine) ?

Aujourd’hui, ton site existe peut-être déjà. Mais est-ce qu’il attire vraiment ? Est-ce qu’il est clair, crédible, utile… au bon niveau ? Comme Rejouons Solidaire, tu peux transformer un site “présent” en un site qui travaille vraiment pour toi.

Tu veux comprendre ce qui bloque et passer à l’action pour transformer ton site ?

Si tu as aimé le projet Margoo, tu devrais adorer ce site aussi...

Studio Floriane : comment repenser un site comme un outil stratégique (pas juste une simple vitrine) pour gagner en crédibilité, en autonomie… et en performance (+63 pts mobile) ?

DIAGNOSTIC OFFERT

Un regard d'experte sur ton site, gratuitement

Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.

DIAGNOSTIC GRATUIT

Connaissez-vous l'empreinte carbone de votre site ?

La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.

Résultats envoyés sous 48h · Sans engagement

Éco-conception

Articles - Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web

Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web ?

Comment mener une interview client.e.s idéaux.ales pour concevoir son site éthique et éco-responsable ?

Écriture inclusive sur ton site : un acte engagé… ou une fausse bonne idée ?

+10 exemples de typographie écologique à utiliser sans modération

Audensiel Canada : quand améliorer un site vaut mieux que le reconstruire de A à Z

Audensiel Canada : quand améliorer un site vaut mieux que le reconstruire de A à Z

2025 | UPGRADE DE SITE | Amélioration progressive, sans tout refaire

Audensiel Canada : quand améliorer un site vaut mieux que le reconstruire de A à Z

CLIENT

Audensiel Canada

SECTEUR

Société de conseil IT engagée

DURÉE

3 mois d'améliorations progressives

Upgrader un site existant pour en faire une réelle vitrine responsable (sans tout refaire)

01

Prise de contact

Lorsqu'Audensiel Canada m'a contactée, l'entreprise venait d'être rachetée et devait adapter son site à une nouvelle identité visuelle.

Le réflexe aurait pu être de repartir de zéro. Pourtant, après avoir analysé le projet, une évidence s'est imposée : le site disposait déjà de bases solides.

Son contenu, son référencement naturel et sa structure répondaient aux besoins de l'entreprise et de leur clientèle.

02

Constat

Plutôt que de tout reconstruire, nous avons donc fait un choix plus durable : améliorer l'existant.

03

Proposition

En adaptant la charte graphique au web, en renforçant l'accessibilité, en optimisant chaque élément du site et en réduisant son empreinte carbone, il était possible de lui offrir une seconde vie, sans sacrifier tout ce qui fonctionnait déjà.

04

Résultat

Un site n'a pas toujours besoin d'être entièrement refondu pour gagner en performance, en accessibilité et en éco-responsabilité.

Parfois, la meilleure décision est simplement de faire évoluer intelligemment ce qui existe déjà.

Voir le site

Contexte et besoin

À la suite du rachat de l'entreprise, Audensiel Canada devait faire évoluer son site web pour refléter sa nouvelle identité de marque, tout en restant fidèle à ses engagements en matière d'éthique, d'accessibilité et d'éco-responsabilité.

Le défi n'était pourtant pas de repartir de zéro. Le site disposait déjà de solides fondations. L'enjeu était donc de le faire évoluer intelligemment, en conservant tout ce qui fonctionnait déjà.

Objectifs du projet

L’objectif principal était de :

Intégrer la nouvelle identité visuelle sans dénaturer le site.

Rendre l'interface plus accessible et cohérente avec les usages du web.

Optimiser chaque composant pour réduire son impact environnemental.

Faire évoluer le site progressivement, sans interruption de service, malgré son fonctionnement en plusieurs langues.

“Merci pour le site d’Audensiel Canada, ton upgrade a été de taille. Merci pour ce joli travail. ”

Julia Roubineau, Responsable marketing et communication chez Audensiel Canada

Mon approche

Plutôt que de repartir d'une page blanche, j'ai choisi d'améliorer le site étape par étape. Chaque décision poursuivait le même objectif : préserver ce qui avait déjà de la valeur, tout en faisant évoluer le site vers une version plus performante, plus accessible et plus responsable.

01

Adapter la nouvelle identité visuelle au web

La nouvelle charte graphique avait été pensée pour le print. Je l'ai adaptée aux contraintes du web en retravaillant les couleurs, les typographies et les composants afin de garantir une expérience plus accessible, cohérente et agréable à utiliser.

02

Faire évoluer le site sans interrompre son activité

Le site étant multilingue et déjà bien référencé, il était hors de question de le mettre hors ligne ou de perdre les acquis existants. J'ai donc défini une feuille de route d'amélioration continue, permettant de déployer chaque optimisation progressivement, sans interrompre l'expérience des utilisateurs.

03

Optimiser chaque détail pour réduire son impact environnemental

Images, typographies, composants graphiques, structure des pages… chaque élément a été repensé pour être plus léger, plus performant et moins énergivore. Une multitude de petites optimisations qui, mises bout à bout, ont permis de réduire significativement l'empreinte carbone du site sans compromettre son expérience utilisateur.

RÉSULTATS OBTENUS

Audensiel Canada a désormais un site tout neuf

Performant

Des performances améliorées, avec un gain de 4 points sur mobile et de 4 points sur ordinateur.

Bien référencé

Un référencement naturel préservé, avec un score SEO de 100/100.

Accessible

Une accessibilité renforcée, avec un score moyen de 94/100.

Éco-responsable

72 % d'émissions de CO₂ en moins par page vue, grâce à une démarche globale d'éco-conception et d'optimisation continue.

Adapté à son audience

Une nouvelle identité visuelle pleinement adaptée au web (plus accessible) et une transition sans interruption grâce à une mise en œuvre progressive des optimisations.

Au-delà des chiffres, ce projet démontre qu'il est possible de prolonger la vie d'un site web lorsqu'il repose sur de bonnes fondations.

Une approche plus durable, qui consiste à améliorer l'existant plutôt qu'à tout reconstruire lorsque ce n'est pas nécessaire.

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant l'amélioration puis après la mise en ligne du site bonifié (décembre 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou demande un diagnostic gratuit en cliquant sur le bouton jaune en bas à droite de l'écran.

Guide de style web

Éthique, éco-responsable et accessible.

Image représentant le guide de style web du site Audensiel Canada

Un coup d'oeil sur la page d'accueil

Performante, éco-responsable et accessible.

Image représentant la page d'accueil du site d'Audensiel Canada

01

Une identité de marque pensée pour le print… adaptée aux usages du web

La nouvelle identité visuelle d'Audensiel Canada devait être déclinée sur un site existant. J'ai donc retravaillé les couleurs, les typographies et les composants graphiques afin de respecter les standards du web, améliorer l'accessibilité et garantir une expérience cohérente sur toutes les pages.

Livrable : Guide de style web et accessible (visible juste au-dessus)

02

Améliorer progressivement plutôt que tout reconstruire

Le site étant multilingue et déjà bien référencé, chaque optimisation a été planifiée et déployée progressivement.

Cette feuille de route a permis de faire évoluer le site sans interruption de service, tout en conservant les acquis existants.

Livrable : Feuille de route des optimisations ciblées à réaliser

03

Les optimisations invisibles qui font toute la différence

Chaque image, chaque composant et chaque ressource ont été optimisés pour alléger le site au maximum. Une somme de petites améliorations qui a permis de réduire son empreinte carbone de 72 %, tout en améliorant ses performances, son accessibilité et son référencement naturel.

Astuce d'accessibilité

L'accessibilité commence bien avant l'intégration du site.

Adapter une identité visuelle au web ne consiste pas seulement à appliquer une charte graphique. Cela implique aussi de vérifier que chaque association de couleurs reste lisible pour tous les utilisateurs. Ce travail de fond a permis de conserver uniquement les combinaisons répondant aux critères d'accessibilité, avant même de concevoir les interfaces.

Et si ton site avait lui aussi plus de potentiel que tu ne l'imagines ?

Tous les sites n'ont pas besoin d'être reconstruits. Parfois, quelques améliorations ciblées suffisent à les rendre plus performants, plus accessibles et plus respectueux de l'environnement. Si tu te demandes quelle est la meilleure stratégie pour le tien, discutons-en.

Si tu as aimé le projet Margoo, tu devrais adorer ce site aussi...

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

DIAGNOSTIC OFFERT

Un regard d'experte sur ton site, gratuitement

Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.

DIAGNOSTIC GRATUIT

Connaissez-vous l'empreinte carbone de votre site ?

La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.

Résultats envoyés sous 48h · Sans engagement

Éco-conception

Articles - Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web

Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web ?

Comment mener une interview client.e.s idéaux.ales pour concevoir son site éthique et éco-responsable ?

Écriture inclusive sur ton site : un acte engagé… ou une fausse bonne idée ?

+10 exemples de typographie écologique à utiliser sans modération

Comment les Noces d’Ella a obtenu un site qu’elle partage fièrement car il est totalement aligné avec ses valeurs et engagements éthiques et éco-responsables ?

Comment les Noces d’Ella a obtenu un site qu’elle partage fièrement car il est totalement aligné avec ses valeurs et engagements éthiques et éco-responsables ?

Novembre 2024 | CRÉÉ TON SITE | Création sur-mesure

Les Noces d'Ella

Gaëlle Debas, de chez Les Noces d'Ella, est wedding planner éco-responsable. Elle accompagne les futur·e·s marié·e·s dans leur mariage engagé partout en France.

Demande initiale

Lorsque Les Noces d'Ella m'a contacté pour la création sur-mesure de son site web, c'était pour 1 raison évidente :

Lancer son activité en bonne et due forme, grâce à un site web qui reflète pleinement ses valeurs et engagements.

Les Noces d'Ella avait même travaillé en amont son identité visuelle avec une graphiste éco-responsable avec qui j'ai eu l'occasion d'échanger en amont de la création du site web pour s'assurer du bon respect des bonnes pratiques web au moment de la création de la charte graphique : choix de typographies adaptées pour le web et combinaisons de couleurs éco-responsables et accessibles.

Sa demande : #esthétisme #valeurs #ImageDeMarque

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour lui offrir un site à son image.

Structure et squelette de page validé en amont

Pour s'assurer de poser les bons éléments au bon endroit et de les hiérarchiser stratégiquement, nous avons d'abord bâti le squelette du site (wireframes). Cela nous a permis de poser les bases sans se soucier du superflus et en limitant les biais subjectif du j'aime ou j'aime pas.

Maquettes graphiques mobile-first

Leur audience naissante était surtout sur Instagram (sur mobile). Donc il leur fallait une version mobile du site rapide et performante afin de générer du trafic sur le site et attirer des client·e·s potentiel·le·s. Je devais donc optimiser le site en pensant d'abord mobile.

 

Familiarisation avec l'outil WordPress

Les Noces d'Ella ne connaissait absolument pas l'outil WordPress et craignait que ce soit trop complexe à manier. Je devais donc leur apprendre à l'utiliser en toute sérénité.

 

Guide de style web

Éthique, éco-responsable et accessible.

Actions réalisées

Pour rendre le site plus éthique, éco-responsable et accessible.

Design éthique

Structuration stratégique des pages, respect des principes d'éco-conception et mise en page accessible.

Optimisations

Suppression des éléments inutilisés, nettoyage des scripts, limitation des requêtes, compression du code et des images.

Configuration WordPress

Choix d'un builder et thème pas trop lourd (Divi) tout en restant simple à manier pour des novices sur WordPress.

“Je suis tellement heureuse du résultat...

Gaëlle Debas, Les Noces d'Ella.

Résultat ? Un site qui a été créé pour refléter bien plus qu'un univers visuel

Voici les scores du site de Les Noces d'Ella : après la création et mise en ligne de son site.

Performance

Le site obtient une note de 91/100 sur mobile et sur desktop de 100/100

U

SEO

Le site a un score SEO (technique) de 100/100.

Accessibilité

Le site obtient une note d'accessibilité de 91/100.

Écologie

Le site a été éco-conçu, il obtient le score de B, émettant 0,2gCO2 en moyenne par page vue. Soit l’équivalent de 20 mètres en vélo à assistance électriquepar personne qui consulte une page.

Pari réussi ! Puisque le site reflète pleinement les valeurs éthiques et éco-responsables de sa fondatrice

Au-delà d'organiser des mariages éco-responsables et d'avoir fait le parti-pris de réaliser un site éco-responsable. Les Noces d'Ella a également fait le choix d'un site plus accessible, en permettant notamment au personnes en situation de handicap de mieux naviguer, comprendre et utiliser son site. Et ce n'est pas la seule action inclusive mise en place, je t'en reparle plus bas.

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé 3 mois après la mise en ligne du site (septembre 2024). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou pour calculer toi-même les scores de ton propre site tu peux faire ce petit bilan express gratuit et utiliser mon guide.

Toi aussi, comme Les Noces d'Ella, tu aimerais obtenir ou adopter ton propre site prochainement ?

Mon calendrier reste ouvert si tu souhaites me booker pour me parler de ton projet. Ce sera avec plaisir !

Aperçu du projet

Lorsque Gaëlle de chez Les Noces d'Ella m'a sollicité pour la création de son site web éthique et éco-responsable, j'ai été enchantée. 

WordPress, mais surtout le monde du web lui était totalement inconnu. Elle n'y avait jamais mis les pieds. Alors elle s'est jeté dedans et elle y a vite pris goût. Elle y a pris goût tout simplement parce que tout était à son image. Quoi de plus plaisant que d'utiliser des outils à son image, de partager des choses dont on est fière, d'utiliser pleinement un site qui reflète notre activité / business et surtout qui transporte nos valeurs et engagements. Je te laisse découvrir les axes clés sur lesquels nous avons agis pour qu'elle puisse obtenir un site performant, éthique et éco-responsable.

01

Inclusion

Les Noces d'Ella avait déjà sa propre identité de marque : logo, submarks, couleurs, typographies. Je suis donc parti de sa charte graphique existante pour la création de son site. Elle avait également organisé un shooting photo en partenariat avec d'autres prestataires de mariages éco-responsables afin d'obtenir pour son site des photos reflétant également son univers graphique.

Nous avons donc utilisé ces photos mais pas que... Nous avons également cherché de nombreuses autres photos qui se marierait bien avec son univers graphique en terme de ton et nuances de couleurs afin que tout un chacun se retrouve et se sente concerné sur le site.

Il était important pour les Noces d'Ella de rendre le site inclusif, non pas que dans l'aspect rédactionnel, mais également visuel (autant dans les photos utilisées, que dans les pictogrammes non genrés utilisés)

Livrable : Dossier de photos libres de droits inclusives

LIRE AUSSI : 5 banques d’images inclusives et gratuites pour ton site web

02

Mise en page

Ce n'est pas parce qu'un site est éthique et éco-responsable qu'il doit être vide et fade. Il est tout a fait possible de jouer avec la mise en page et d'y apporter de la couleur. J'ai notamment apporté du dynamisme à sa structure de page en ajoutant des effets de "vagues", j'ai également joué avec les submarks (éléments graphiques de la marque, comme des tampons) pour apporter un côté destructuré et personnel, unique. Tout n'a pas besoin d'être linéaire, ce n'est qu'une question de dosage.

Livrable : Maquettes graphiques accessibles, inclusives et éco-conçu

03

Traitement des images et référencement naturel (SEO)

Les images ont toutes été optimisé pour le site :

  • cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
  • export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
  • et enfin compression des ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Astuce éco-responsable

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Là où tu penses qu'il y a 2 ou 3 images importées sur le site les unes à côté des autres, il y a en réalité 1 seule image qui simule une composition de plusieurs images les unes à côtés des autres (comme sur le haut de la page ou dans le bloc "on s'appelle, on en discute ?". En effet, il est moins lourd d'importer 1 image légère que plusieurs images légères car chaque image ajouté sur ton site génère aussi du poids au niveau de son stockage dans ta base de données par exemple.

En plus, cela simplifie l'affichage sur mobile et entraîne une meilleure expérience pour l'utilisateur·rice car au lieu d'afficher chaque image l'une en dessous de l'autre, l'utilisateur·ice les verra côte à côte.

04

Autonomie dans la gestion du site

Et oui, j'allais quand même pas oublier que Les Noces d'Ella est complètement novice sur le web et encore plus sur WordPress. Alors comment j'ai fait pour la rendre complètement autonome au quotidien dans l'usage de son site web ? Plusieurs choses ont été mise en place :

 

  1. Je l'ai "formé" à utiliser son site WordPress de la meilleure façon qu'il soit pour qu'elle puisse continuer de le faire grandir de manière toujours plus éthique et éco-responsable. Je lui ai montré comment faire, tout simplement.
  2. Je l'ai assisté dans ses démarches de modifications, améliorations pendant les 6 mois qui ont suivi la mise en ligne de son site, afin de l'épauler, l'aider et répondre à toutes ses questions.
  3. Pendant ces 6 mois, elle a également bénéficié de deux minis rapports trimestriels d'analyse des statistiques d'usage de son site (pages les plus vues, articles les plus lus, etc), de l'évolution de ses scores (performance, SEO, etc) accompagné de petits conseils pour le continuer à le maintenir bien à jour.

Explorer les autres modèles de sites
performants, éthiques et éco-responsables disponibles à l'adoption

Aucun Résultat Trouvé

La page demandée est introuvable. Essayez d’affiner votre recherche ou utilisez la navigation ci-dessus pour trouver l’article.

Ah oui ! J'oublié... Voici ce qu'elle en a pensé

Pour vous donner une petite idée.

“ Je suis tellement heureuse du résultat : un site qui reflète parfaitement mon univers, mes valeurs et ma personnalité

Un immense merci à Coralie ! Je suis tellement heureuse du résultat : un site qui reflète parfaitement mon univers, mes valeurs et ma personnalité. Dès le début, tu as su comprendre ma vision et la traduire.

J’ai adoré travailler avec toi : tu as été force de proposition, toujours à l’écoute, et tellement bienveillante tout au long du projet.

Gaëlle Debas, fondatrice de Les Noces d'Ella

Si tu as aimé le site de Les Noces d'Ella,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Studio Floriane

Comment la refonte totale du site de Studio Floriane a permis de presque tripler son score de performance mobile ?

Image représentant la version mobile du site Studio Floriane

Sobriété numérique

Donner une seconde vie à son site web rapidement et facilement, c'est possible !

Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

→ 1 exercice simple pour définir efficacement les contenus et fonctionnalités qui te permettront de créer ton site vitrine éthique et éco-responsable

→ Convertir des clients aux valeurs éthiques et éco-responsables en définissant la bonne mission et les bons objectifs pour ton site

→ Identité de marque éthique et éco-responsable : 1 exercice simple pour bâtir celle de ton entreprise et préparer la création de ton futur site

UPF Boutique

UPF Boutique

Juin 2020 | UPGRADE TON SITE | Refonte totale

UPF Boutique

Audrey Daly, vends sur son site en ligne les meilleures marques de vêtements et accessoires anti-UV, certifiés UPF 50+ et avec du style. Comme elle le dit si bien, elle n'a qu'un seul but "que la protection solaire devienne une habitude agréable pour tous".

Photo représentant le site d'UPFBoutique
[dsm_text_badges main_text="Shopify" badges_text="CMS" badges_placement="before" _builder_version="4.27.4" _module_preset="default" header_level="h6" header_font="Ysabeau - regular|500|||||||" header_font_size="19px" badges_font="|||on|||||" custom_margin="||0px|||" hover_enabled=0 global_colors_info="{}" locked="off" sticky_enabled=0][/dsm_text_badges]

Score performance
(Google Lighthouse)

Score performance mobile
(Google Lighthouse)

Score SEO
(Google Lighthouse)

Score d'éco-conception
(Eco-index)

gCO2 émis en moyenne pour une visite par page
(Website carbon)

Niveau d'accessibilité
(RGAA)

Les données ci-contre ont été récoltées 3 mois après la mise en ligne du site.

Aperçu du projet

J'ai été approché par Audrey Daly, la fondatrice d'UPF Boutique pour optimiser son site web et effectuer une refonte graphique afin de propulser son entreprise un rang plus loin. Après avoir remporté la 2ème place du concours de Lyon Start-up en 2019, elle a ressenti le besoin de mettre un vrai coup d'accélérateur à son projet qui était en pleine évolution. Son site étant son moyen pour vendre ses produits et pour mettre en lumière ses convictions, ses valeurs et sa bataille qui relève de la santé publique, c'est tout naturellement que nous avons décidé de collaborer ensemble pour lui offrir la visibilité et l'image qu'elle mérite.

01

Accessibilité et éco-responsabilité

Colorimétrie

Le choix des couleurs a été fait de façon créative et stratégique. Les couleurs reflètent directement les marqueurs visuelles estivales d'une belle journée ensoleillée à la plage. Le contraste entre chaque texte et la couleur de son arrière plan a été testé pour répondre aux normes d'accessibilité web avec que le lisibilité pour tous soit respectée.

Typographie

Le choix des polices du site a été fait de sorte à répondre aux normes d'accessibilité (une police simple et lisible) mais aussi aux principes d'éco-responsabilité qui préconnise de n'avoir pas plus de deux polices d'écritures différentes. 

Images

Les images ont toutes été optimisé pour le site : export de chaque image au bon format, adapté au web et à sa taille réelle d'affichage sur le site et compression des images. De plus la balise alt de chaque image a été renseigné afin de facilité la lecture du site aux personnes non-voyantes, utilisant des lecteurs d'écrans. Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

02

Esthétisme

Structure

Le site a été structuré de manière simple et efficace, pas de fioriture, pas d'éléments superflus. Chaque élément est positionné à une place réfléchit pour favoriser la conversion tout en allant à l'essentiel. Cette façon de penser le site permet de prioriser et limiter le nombre d'éléments affichés afin de ne pas trop alourdir le site au niveau de son poids, mais aussi au niveau visuel. Qui dit site moins lourd dit aussi empreinte carbone limité.

03

Ethique

Dark Patterns

Un Dark Patterns c’est le design d’une élément sur un site qui vise à la manipulation de l’utilisateur. Il faut éviter à tout prix d'en avoir si on ne veut pas briser la confiance des utilisateurs. C’est une question d’éthique. C'est une pratique surtout utilisé dans le milieu du e-commerce pour pousser à l'achat rapide. Dans ce contexte, aucun Dark Patterns n'a été utilisé afin de respecter tout un chacun.

Tu as des questions, un projet ?

Tu veux voir d'autres projets réalisés ?

BDC : Lancer un Centre d’Action Climatique en ligne en l’intégrant dans un écosystème déjà bien installé

BDC : Lancer un Centre d’Action Climatique en ligne en l’intégrant dans un écosystème déjà bien installé

2023 | COLLAB w/ MALTEM CANADA | UX Design - conseil stratégique

BDC : Lancer un Centre d’Action Climatique en ligne en l’intégrant dans un écosystème déjà bien installé

BDC est la banque de développement du Canada, soit celle des entrepreneur·e·s canadien·ne·s, une société gouvernementale engagée et certifié B-Corp.

Lancement d'un Centre d'Action Climatique

Voici comment j’ai piloté pendant 2 ans la réflexion UX stratégique et le lancement d’un Centre d’Action Climatique destiné aux PME canadiennes tout en fédérant des équipes multidisciplinaires autour d’une vision commune dans un environnement institutionnel complexe.

Particularités du projet

  • Intégrer durablement cette nouvelle plateforme dans l’écosystème existant
  • Défendre des choix structurants auprès de multiples directions
  • Garantir performance, accessibilité, éco-conception et cohérence de navigation à grande échelle.

Contexte

La Banque de développement du Canada souhaitait renforcer son engagement auprès des PME canadiennes en lançant un Centre d’Action Climatique en ligne dédié à la transition environnementale (réduction des GES).

Dans un environnement bancaire et institutionnel déjà dense, l’enjeu ne consistait pas uniquement à créer une nouvelle plateforme de contenus.

Enjeux

Il fallait aussi :

  • intégrer cette nouvelle initiative sans impacter les parcours existants ;
  • aligner des directions aux priorités différentes (SEO, contenu, développement, marketing, UX, gouvernance) ;
  • fédérer les parties prenantes autour d’une vision commune ;
  • garantir les standards d’accessibilité, d’inclusion et d’éco-conception ;
  • concevoir une expérience claire, crédible et actionnable pour favoriser le passage à l’action des PME canadiennes.

La BDC recherchait donc un accompagnement capable de relier stratégie, expérience utilisateur et coordination transverse.

Mon approche

Mon rôle consistait autant à structurer une vision commune qu’à concevoir une expérience cohérente dans un environnement institutionnel complexe. J’ai également contribué à la création de l’appel d’offre UX/UI et à la sélection de l’agence Sia Experience pour accompagner la phase 03 du projet.

Extraits de l'audit du site de Margoo

Comprendre les besoins réels du terrain

Organisation et modération d’entrevues utilisateur·rice·s afin d’affiner les personas existants, identifier les freins des PME canadiennes et cartographier les parcours prioritaires.

Créer une vision commune autour du projet

Animation d’ateliers stratégiques et de co-conception pour aligner les différentes équipes et directions autour d’une vision commune du Centre d’Action Climatique.

Concevoir et tester un MVP évolutif

Conception d’un MVP suite à un design sprint de 3 jours : wireframes, prototypes interactifs et plusieurs séries de tests utilisateur·rice·s modérés afin d’itérer sur la solution avant sa mise en ligne.

Extraits de l'audit du site de Margoo

Intégrer le projet dans un écosystème déjà existant

Réalisation d’une étude comparative des scénarios d’implantation du Climate Action Center dans l’écosystème déjà existant : conduite d’entrevues internes afin d’évaluer les impacts SEO, marketing, techniques et de navigation de chaque option.

Défendre une approche responsable et durable

Accompagnement des équipes web dans l’application de principes d’accessibilité, d’inclusion et d’éco-conception, alignés avec les standards numériques canadiens.

Extrait du rapport

Présenté aux différentes directions de la banque ainsi qu'aux vice-président·e·s

Résultats obtenus

Dépasser de plus de 20 % les objectifs fixés avant le démarrage du projet

Générer un fort trafic dans les premiers mois

Augmenter les demandes de financement liées à des projets de développement durable

Améliorer la circulation entre contenus, outils et ressources grâce à un maillage stratégique

Si tu as aimé le cas de la BDC,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Margoo

Comment l’audit complet du site publique de la BDC a mené à une restructuration complète du menu de navigation en place depuis plusieurs années ?

Exemple du revamp de la charte graphique de Margoo, avant et après

Sobriété numérique

Donner une seconde vie à son site web rapidement et facilement, c'est possible !

Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

→ Est-ce bien utile d’avoir des couleurs éco-responsable sur son site ?

→ La méthode 80/20 : Comment l’appliquer à la conception de ton site pour le rendre éthique et éco-responsable

→ Ma routine d’analyse de site : comment je mesure l’impact réel de ton site web