PBYweb
Refonte complète du site d'une agence d'acquisition full-funnel SEO & Ads.
En bref
PBYweb est une agence d'acquisition full-funnel (SEO & Ads). Son ancien site, monté sur systeme.io, parlait comme un freelance : des packs et des promesses, mais peu de preuves. Pour une agence qui vend de la performance, le site devait être à la hauteur de ce qu'elle promet. J'ai construit le Design System et les maquettes, puis intégré le site moi-même dans Framer. Le parti pris : parler résultats plutôt que prestations, avec une seule promesse, les preuves dès le premier écran et une seule action, réserver 30 minutes.
- Client
- PBYweb
- Année
- 2026
- Rôle
- UI/UX Design
- Design System
- Intégration
- Outils
Le problème
Un discours de freelance
Le site promettait beaucoup sans le montrer : un titre à emoji, « Satisfait ou remboursé » et une photo de banque d'images. Il ressemblait à l'offre d'un freelance, pas à celle d'une agence structurée.
Peu de preuves
Cinq petits logos et trois avis, aucun cas client ni résultat : rien pour rassurer un prospect qui compare des agences.
Aucun design system
Cinq libellés de bouton pour un seul objectif, des titres et des styles qui changent d'une section à l'autre, des contrastes trop faibles : aucune règle commune.
UX : structure et parcours
Le client avait esquissé les sections qu'il voulait ; je leur ai donné forme et cohérence, du plan du site au parcours jusqu'à la prise de rendez-vous.
Plan du site
- Vous êtes ?
- Entrepreneur
- Start-up
- Scale-up
- Société
- Services
- Accompagnement SEO
- Accompagnement Ads
- Full funnel
- Cas clients
- AMEO
- Mon Invest
- Le Rêve chez vous
- Wiloo
- Ressources
- Blog
- E-book
- Tarifs
- Rendez-vous
Wireframe de l'accueil
- HeroUne promesse, des résultats mesurés, un seul bouton
- Logos clientsLa preuve, dès le premier écran
- PérimètreSEO, Search Ads, Social Ads, illustrés par des tableaux de bord
- MéthodologieComment ça se passe, en cinq étapes
- Sans / Avec pby.Pourquoi changer, en un coup d'œil
- Cas clientsDes projets réels, à consulter
- Avis clientsLa parole des clients (Trustpilot)
- FAQLever les dernières objections
- Appel à l'actionPasser à l'action
Parcours principal
- Comprend l'offreLa promesse et le périmètre, dès l'accueil
- Se rassureLogos, cas clients et avis
- Lève ses doutesMéthode, tarifs et FAQ
- Prend rendez-vous30 minutes, depuis le bouton présent sur chaque page
Design System
Construit dans Figma puis repris tel quel dans Framer : les mêmes couleurs, la même échelle, les mêmes composants, sur tout le site.
Couleurs
- CrèmeFond#FCF7EF
- SableSections#F4E1C3
- AnthraciteTexte, boutons#282725
- BrunCartes sombres#3A362F
- GrisTexte secondaire#686461
- Gris clairTexte sur fond sombre#CBCBCA
- DoréAccent, CTA#E0AA5C
- RougePoints négatifs#E05C5C
Typographie
Bold
Regular
Ronzino
Titres et texte · Regular · Bold
Échelle typographique
H146/51 · Bold
Générez du trafic qualifié
H240/52 · Bold
La méthodologie de notre agence
H330/36 · Bold
Audit & structuration stratégique
Sous titre18/18 · Regular
Nos experts acquisition sont à votre service
Paragraphe16/19 · Regular
Chaque euro investi génère un ROI mesurable
Label14/17 · Medium
Avis clients
Arrondis
- 4 pxBoutons
- 10 pxFAQ
- 12 pxCartes
- PiluleBadges, sélecteur
Composants · fond clair
Quelle différence entre pby. et une agence classique ?
Nous déployons une stratégie d'acquisition full-funnel qui combine SEO, publicité en ligne (Google Ads, Meta Ads) et optimisation de conversion.
Composants · fond sombre
- Netlinking piloté (budget inclus)
- Stratégie sémantique & contenu
- Développement technique SEO continu
- Budgets publicitaires gaspillés sans vision globale
- Visibilité organique stagnante
- Leads mal qualifiés ou perdus en cours de route
- Chaque euro investi génère un ROI mesurable
- Performances trackées et optimisées en continu
- Visibilité organique en croissance constante
Accessibilité
Mesuré avec axe (WCAG 2.2 AA) sur la page d'accueil : l'ancien site et le nouveau.
- Images sans attribut alt
- Après : 0Avant : 23
- Contraste des boutons
- Après : 7,1:1Avant : 2,0:1
- Titres de la page
- Après : 1 H1, 7 H2Avant : 3 H1, 0 H2
Des boutons lisibles
Le blanc sur doré ne passait pas. Le texte anthracite sur le même doré dépasse le niveau AAA, sans changer la couleur de marque.
Avant
Après
Une page qui se lit dans l'ordre
Les lecteurs d'écran naviguent de titre en titre. Avant, le seul H1 était sur des articles de blog ; maintenant la page a un vrai plan.
Avant
- H3Commerces de proximité
- H3Startups
- H1Pourquoi dit-on que le SEO n'est pas…
- H1Le référencement de sa fiche…
- H1Comment améliorer le référencement…
Après
- H1Générez du trafic qualifié
- H2Le périmètre de notre accompagnement
- H3SEO · Search Ads · Social Ads
- H2La méthodologie de notre agence
- H2+60 entreprises accompagnées
Les couleurs du design system, vérifiées
- Texte sur crème13,9:1 · AAA
- Texte secondaire sur crème5,4:1 · AA
- Texte secondaire sur sable4,5:1 · AA
- Bouton doré7,1:1 · AAA
- Bouton anthracite14,9:1 · AAA
- Texte sur carte sombre12,0:1 · AAA
- Texte secondaire sur fond sombre9,1:1 · AAA
- Doré sur fond sombre7,1:1 · AAA
Interfaces
Choisissez une page et une résolution.
Avant / après
Glissez la poignée pour comparer l'ancien site et le nouveau.
