Manque d'harmonie
des couleurs.
La palette manquait de cohérence, les couleurs se mélangeaient sans logique visuelle, créant une impression d'amateurisme et de gros problèmes d'accessibilité.
GreenLobby.
UX/UI / Refonte stratégique / 2020
Refonte complète d'une plateforme institutionnelle : audit, charte graphique et Design System, puis maquettes HD. Objectif : faire passer GreenLobby d'une image d'ONG à un cabinet de conseil crédible auprès des décideurs B2B.
Cadrage du projet.
GreenLobby souhaitait sortir d'une image d'ONG pour s'imposer comme un cabinet de conseil institutionnel crédible auprès de décideurs B2B. La mission couvrait la refonte complète de la charte graphique, le Design System, les maquettes HD animées et des supports réseaux sociaux.
Survolez le tableau
Empathy MapProfil décideur B2B.
Ce qu'ils disent
- « Je ne comprends pas exactement ce qu'ils proposent. »
- « Ça ressemble plus à une association qu'à un cabinet de conseil. »
- « Les couleurs sont trop agressives, ça ne fait pas sérieux. »
- « J'aurais aimé voir des exemples de missions concrètes. »
Ce qu'ils pensent
- Est-ce qu'ils ont vraiment l'expertise sur mon secteur spécifique ?
- Si le site est brouillon, le conseil l'est peut-être aussi.
- Je n'ai pas la preuve qu'ils ont déjà réussi quelque chose de concret.
Ce qu'ils font
- Scrollent la page d'accueil en diagonale sans s'arrêter.
- Copient l'adresse email dans le footer au lieu d'utiliser le formulaire.
- Comparent avec le site d'un concurrent.
Ce qu'ils ressentent
- Incertitude : l'offre n'est pas claire, difficile de se projeter.
- Manque de confiance.
- Frustration : ne pas trouver les informations clés rapidement.
- Fatigue cognitive : trop de texte, pas assez de structure.
Arborescence actuelle.
L'architecture héritée du site avant refonte : quatre rubriques pensées comme une vitrine d'ONG, où l'offre de conseil et les preuves de résultats restent difficiles à situer.
- 01Notre accompagnementOffre peu lisibleImpactContenu du plaidoyerRHStratégie de lobbying
- 02Nos référencesManque de preuvesIls nous font confianceIls en parlent mieux que nous
- 03Notre équipePhoto & nomDescription
- 04Contactez-nousFormulaire
01Découverte02Exploration03Questionnement04Comparaison05Contact06Décision
CuriositéDouteIncertitudeMéfianceFrustrationDéception
Envie initialeManque de clartéPeu de preuvesPerception négativeParcours peu fluidePerte de confiance
Un manque de clarté, de preuves et de structure
entraîne une perte de confiance progressive
et une sortie prématurée du site.
01CuriositéEnvie initialeDécouverte
02DouteManque de clartéExploration
03IncertitudePeu de preuvesQuestionnement
04MéfiancePerception négativeComparaison
05FrustrationParcours peu fluideContact
06DéceptionPerte de confianceDécision
Un manque de clarté, de preuves et de structure
entraîne une perte de confiance progressive
et une sortie prématurée du site.
Audit du site existant.
Un site qui ne reflète pas la qualité de l'offre. L'audit a révélé deux problèmes structurels : une palette de couleurs incohérente créant des soucis d'accessibilité, et une hiérarchie de l'information quasi inexistante. Un prospect B2B ne pouvait pas comprendre en quelques secondes ce que fait GreenLobby ni à qui l'offre s'adresse.
Manque d'harmonie
Hiérarchie de l'info inexistante.
L'offre était présentée de façon confuse. Un visiteur ne comprenait pas rapidement ce que fait GreenLobby ni à qui la société s'adresse.
Ateliers de co-conception.
Aligner le positionnement avant de toucher à la maquette. Plusieurs sessions avec les cofondateurs et la responsable communication, pour comprendre la culture de GreenLobby, clarifier ce qui les distingue d'un cabinet classique et poser les bases du registre visuel.
Objectifs.
Comprendre la culture et les valeurs de GreenLobby
Clarifier le positionnement : entre cabinet institutionnel et acteur engagé
Identifier les cibles prioritaires et leurs attentes
Définir le bon registre visuel : sérieux sans être froid, écologique sans être militant
Prioriser les contenus et l'architecture du futur site
Questions clés.
- Perception
« Comment voulez-vous être perçus par un dirigeant qui visite votre site pour la première fois ? »
- Différenciation
« Quelle est votre offre la plus différenciante par rapport à un cabinet classique ? »
- Frustrations
« Qu'est-ce qui vous frustre dans votre identité actuelle ? »
- Cibles
« Quels sont vos 3 clients idéaux ? »
Les deux cibles
Personas B2B.
Deux décideurs B2B aux attentes distinctes, un seul site pour les convaincre. La directrice RSE d'un grand groupe, qui évalue la crédibilité avant tout contact, et le dirigeant de PME engagée, qui cherche une expertise concrète et des preuves de résultats. Ces profils ont guidé toute l'architecture et le contenu.
Directrice RSE
Dirigeant PME
GreenLobbyFiche persona
Sophie
42 ans · Directrice RSE — grand groupe industriel
Niv. 3 — exigeante & informée
« Je cherche un partenaire qui comprend à la fois les enjeux réglementaires et notre réalité opérationnelle. »
Exigence de crédibilité 5/5
Connaissance réglementaire 4/5
Temps disponible 2/5
Objectifs
- Comprendre rapidement l'expertise de GreenLobby sur son secteur.
- Voir des références concrètes : clients, cas d'usage, résultats.
- Contacter facilement un interlocuteur clairement identifié.
Freins
- Méfiance vis-à-vis du greenwashing et des promesses vagues.
- Peu de temps pour évaluer un cabinet en profondeur.
- Exige des preuves mesurables avant tout engagement.
Besoin — une crédibilité prouvée, et vite
GreenLobbyFiche persona
Bernard
55 ans · Dirigeant — PME agroalimentaire
Niv. 1 — novice du lobbying
« Je ne connais pas le lobbying — j'ai besoin qu'on m'explique simplement comment ça fonctionne. »
Besoin de pédagogie 5/5
Sensibilité au ROI 4/5
Familiarité du sujet 1/5
Objectifs
- Comprendre l'offre simplement, sans jargon.
- Voir des preuves de résultats concrets et chiffrés.
- Un parcours progressif : comprendre → s'informer → contacter.
Freins
- Le jargon institutionnel le perd rapidement.
- Doute du retour sur investissement pour une PME.
- Besoin d'être rassuré avant le moindre engagement.
Besoin — qu'on lui explique simplement
Benchmark concurrentiel.
S'inspirer des codes visuels des cabinets institutionnels de référence. Analyse de Relians et Anthenor Public Affairs : typographie sobre, palette restreinte, mise en avant des expertises métier et des preuves de résultats. Ces repères ont servi de cadre non négociable pour l'exploration identitaire.
Identité visuelle.
Exploration large puis convergence : deux familles de couleurs et une tension serif / sans-serif, EB Garamond × Montserrat. Trois piliers, au fil du scroll.
01 / 03La couleur.
#1C223ANavy 900Textes, fonds, éléments clés
#2F3654Navy 700Fonds secondaires, survols
#DEBB59Or 500Accents, badges, surlignages
- Contrastes WCAG AA
Tous les ratios validés, condition non négociable pour un cabinet qui revendique l'accessibilité.
01 / 03
Navy + Or
WCAG AA
La couleur.
Deux familles — navy institutionnel et or d'accent — avec des contrastes tous validés WCAG AA.
02 / 03Typographie & polices.
Aa
EB Garamond pour le prestige institutionnel, Montserrat pour la clarté fonctionnelle.
EB Garamond
Titres hero, citations, mises en avant
Montserrat SemiBold
Titres de sections, labels, navigation
Montserrat Regular
Corps de texte, descriptions
Montserrat Light
Légendes, métadonnées
02 / 03
EB Garamond
Montserrat
Typo & polices.
Tension serif / sans-serif — EB Garamond × Montserrat — et l'exploration des familles serif : héritage, modernité, élégance.
03 / 03Les éléments UI.
Boutons
Bouton principalBouton principal
Bouton secondaireBouton secondaire
Lien texte →Lien texte →
Iconographie
03 / 03
Composants
États & icônes
Les éléments UI.
Boutons, états et iconographie sectorielle, cohérents avec la charte de marque.
Arborescence cible.
Un parcours pensé pour répondre, écran après écran, aux questions implicites du visiteur B2B : qui êtes-vous, que faites-vous, et pourquoi vous faire confiance ?
- 01GreenLobbyPositionnement clairLe cabinetNos ValeursL’équipe
- 02OffresCœur de conversionAccompagnementFormationsAudit stratégique
- 03ExpertisesAgriculture & alimentationÉconomie circulaireÉnergie, climat & mobilitéSolidarité
- 04ActualitésPublicationsIls parlent de nous
- 05Contactez-nousFormulaire
La nouvelle interface.
Un site qui inspire confiance dès les premières secondes. La refonte traduit le repositionnement de GreenLobby : d'un site associatif générique à une interface de cabinet de conseil institutionnel.
Résultats mesurés
Ce que la refonte a changé.
Lisibilité (WCAG)
AAA
Avant : niveau A
Clé
Temps sur site
+0%
Engagement renforcé
Demandes contact
2.4×
3 mois post-launch
Itérations design
0
Cycles de tests modérés
Votre prochain projet
mérite mieux.
30 minutes pour explorer votre problématique et voir concrètement comment Vanta Studio peut y répondre.
Réserver 30 min · GratuitOu par email : contact@vanta-studio.fr