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) ?
2024 | UPCYCLING DE SITE | Refonte totale
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 ?
CLIENT
Studio Floriane
SECTEUR
Studio graphique éco-responsable
DURÉE
2 mois de refonte
C'est grâce à l'offre de refonte totale UPCYCLE que Studio Floriane a pu reprendre le contrôle de son site… et en faire une véritable vitrine pour convaincre sa clientèle engagée
01
Prise de contact
Quand Floriane m’a contactée, son site ne reflétait pas ni son expertise… ni ses engagements. Et comme beaucoup de graphistes, créer pour soi était devenu compliqué. Mais surtout, elle n’avait pas le contrôle de son site.
02
Constat
Elle avait besoin d’un regard extérieur pour amener plus de clarté, de cohérence… et un vrai positionnement premium. Sans compter une version mobile peu optimisée, alors même que son audience vient majoritairement d’Instagram.
On a donc fait un choix :
- ne pas bricoler l’existant
- ne pas empiler des tas d’ajustements
03
Proposition
Repenser le site en profondeur, avec une approche claire :
- autonomie et prise en main de son site (FORMATION à la gestion de son site WordPress en toute autonomie)
- et construire un site (enfin) aligné, accessible et éco-responsable avec une expérience mobile (enfin) agréable.
04
Résultat
Un site plus fluide, plus cohérent, plus engagé…et surtout, un site qu’elle maîtrise enfin en toute autonomie.
Voir le site
Contexte et besoin
Floriane, fondatrice du Studio Floriane, accompagne des créateur·rice·s engagé·e·s avec une approche graphique éco-responsable. Mais au moment de me contacter, son site ne suivait plus.
Elle ressentait :
- un décalage entre son niveau d’expertise… et l’image renvoyée par son site
- une forte dépendance technique, l’empêchant de faire évoluer son site librement
- une difficulté à concevoir pour elle-même, malgré son métier de graphiste
- une expérience mobile peu fluide, freinant clairement son audience principale
Objectifs du projet
L’objectif principal était de :
Permettre à Floriane de reprendre totalement la main sur son site (sans dépendre d’un prestataire)
Créer un site aligné avec son positionnement, ses valeurs éco-responsables et son niveau d’expertise
Offrir une expérience mobile fluide et efficace, adaptée à son audience issue d’Instagram
Transformer son site en un véritable levier de crédibilité et de conversion
“Je ne sais même pas par où commencer tant mon avis sur Coralie est positif ! Travailler avec elle a été une expérience au-delà de mes attentes. WordPress c'était un monde obscur pour moi. Et grâce à elle, c'est devenu presque un jeu d'enfant !”
Floriane Brault, Fondatrice de Studio Floriane
Mon approche
Pour y répondre, je n’ai pas simplement “refait un site”. Je l’ai conçu comme un véritable outil stratégique, pensé pour être à la fois clair, autonome et durable. Concrètement, j’ai structuré mon accompagnement en plusieurs 6 étapes clés.
01
Structuration stratégique
Clarification des besoins, de l’architecture et des parcours de navigation pour poser des bases solides et éviter l’effet “site bricolé”. Puis simplification et restructuration des messages clés pour rendre l’offre plus lisible, plus impactante… et plus facile à convertir.
02
Direction créative web responsable
Adaptation de son identité graphique au web : accessible, cohérente, tout en renforçant son positionnement engagé et premium à travers des maquettes graphiques réfléchit.
03
Intégration WordPress et optimisation
Refonte complète du site avec un outil simple à prendre en main (WordPress), pour garantir sur-mesure et réelle autonomie au quotidien. Puis, optimisation globale du site (mobile, performance, accessibilité, éco-conception).
04
Formation et accompagnement à l’autonomie
Transmission des bonnes pratiques et suivi post-lancement pour permettre à Floriane de gérer son site en toute confiance, sans dépendance.
RÉSULTATS OBTENUS
Studio Floriane a désormais un site tout neuf
Performant
Performance améliorée de 34 à 97/100 sur mobile (+63 points) et de 90 à 98 sur desktop.
Bien référencé
Score SEO technique parfait (100/100), alors qu'il était à 83 auparavant.
Accessible
Renforcer l’accessibilité du site : de 90 à 94/100 grâce à une adaptation fine de la charte graphique au web.
Éco-responsable
Diminution de son empreinte carbone de 22% (de 0,37g à 0,29g CO2 par page vue) et passer d’une note C à B.
Adapté à son audience
Un site plus clair et structuré pour en faire un outil plus lisible, crédible et aligné.
Mais surtout un site transformé en profondeur…
Studio Floriane est passé d’un site subi… à un site totalement maîtrisé en interne (autonomie ++ au quotidien)
Le studio se sent enfin alignée et légitime pour partager son site sans hésitation grâce à une expérience mobile fluide, adaptée à une audience majoritairement issue d’Instagram.
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é (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 jaune 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é
Studio Floriane avait déjà sa propre identité de marque : logo, submarks, couleurs, typographies. Je suis donc parti de sa 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 à ces normes d'accessibilité web.
Livrable : Guide de style web et accessible (visible plus haut)
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 zones en léger "biais", 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
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 de 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 6 images importées sur le site, il y a en réalité 2 images l'une à côté de l'autre. En effet, il est moins lourd d'importer 2 images légères que 6 petites 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·rice verra une grille de 6 images (3 colonnes x2 lignes).
TÉMOIGNAGES
Iels m'ont fait confiance
EXTRAIT
Une collaboration simple, fluide et un résultat qui dépasse largement mes attentes.
Elle a construit mon site presque en repartant d'une page blanche, tout en l’optimisant pour réduire son impact carbone et garantir une accessibilité pour toutes et tous. Aujourd’hui, mon site reflète qui je suis et incarne mon identité visuelle sans détours.
"Une collaboration simple, fluide et un résultat qui dépasse largement mes attentes.
J’étais bloqué avec mon ancien site : aucun accès, aucune autonomie, aucune possibilité d’évolution. L’idée de créer un site moi-même me donnait des sueurs froides, et WordPress me semblait aussi obscur qu’un sous-bois en pleine nuit.
Dès mon premier échange avec Coralie, j’ai senti que c’était avec elle que j’avais envie de travailler. Son sourire, ses conseils, sa bienveillance, son professionnalisme… tout sonnait juste. Ce qui m’a surtout convaincu : son engagement éthique et sa vision de l’éco-conception, qui résonnent avec mes valeurs. J’ai adoré sa précision, sa disponibilité et sa façon de transformer une idée encore floue en un site web clair et harmonieux.
Elle a construit mon site presque en repartant d'une page blanche, tout en l’optimisant pour réduire son impact carbone et garantir une accessibilité pour toutes et tous. Aujourd’hui, mon site reflète qui je suis et incarne mon identité visuelle sans détours.
Je recommande Coralie à 100 %, pour une création, une refonte, optimisation ou tout projet web qui demande rigueur, sensibilité et éthique."
Et si tu reprenais (vraiment) le contrôle de ton site ?
Aujourd’hui, ton site peut être bien plus qu’une simple vitrine. Il peut devenir un outil clair, crédible… et que tu maîtrises à 100%. Comme Floriane, tu peux :
gagner en autonomie au quotidien
avoir un site aligné avec ton niveau d'expertise et tes engagements
et t’appuyer dessus pour développer ton activité (sans dépendance)
Tu veux upcycler ton site ?
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
Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web ?
5 signes que tu auto-sabotes la visibilité de ton site auprès de Google
L’accessibilité : mon chemin de designer pour sortir du “beau” et viser le juste
Design inclusif : pourquoi tu ne peux plus l’ignorer quand tu crées ton site
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 !
“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 !”
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
Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web ?
5 signes que tu auto-sabotes la visibilité de ton site auprès de Google
L’accessibilité : mon chemin de designer pour sortir du “beau” et viser le juste
Design inclusif : pourquoi tu ne peux plus l’ignorer quand tu crées ton site
