Ajouter

Lorem ipsum

Lorem ipsum

Diffly x Gemeos

Refonte complète du site diffly.co par Gemeos : direction artistique, UX/UI, visuels produit, intégration Webflow bilingue et SEO technique. Diffly est la plateforme de win-loss analysis et de buyer feedback pour les équipes Revenue B2B.

Diffly, La vérité des décisions d'achat, enfin visible

Diffly aide les entreprises B2B à comprendre pourquoi elles gagnent, perdent ou churnent : interviews acheteurs menées par des experts neutres, questionnaires, croisement avec le CRM et les call recordings, analyse IA. Une promesse forte, +22 % de win rate en moyenne, portée par un site qui ne la reflétait plus : monochrome, chargé en dégradés, structuré comme un SaaS générique, et surtout incapable de faire comprendre en quelques secondes ce que Diffly fait vraiment.

Gemeos a repris le site de zéro : nouvelle architecture orientée problème plutôt que fonctionnalités, direction artistique construite en trois pistes, UI kit et design de l'ensemble des pages, une vingtaine de visuels produit, intégration Webflow en français et en anglais, puis recette SEO technique et formation des équipes. Douze semaines entre le brief et la mise en ligne.

Industrie

Services

Branding

Le brief était clair : conserver le nom Diffly, garder une place au bleu sans en être prisonnier, sortir des dégradés qui dataient l'identité, et rendre visible l'humain au cœur du produit. Plutôt qu'une refonte complète du logo, Gemeos a fait évoluer l'identité par le système qui l'entoure.

ÉlémentÉvolution
PaletteUn bleu nuit structurant, un bleu électrique pour l'action, un jaune signal pour surligner ce qui compte, réchauffés par des beiges et un orange brûlé
TypographieSans serif lisible et volontairement peu grasse pour le corps et les titres, complétée d'une écriture manuscrite pour les annotations
Gestes graphiquesSurlignage des mots-clés dans les titres, annotations manuscrites qui ponctuent les sections, motifs géométriques superposés aux photographies
IconographiePhotographies de vraies personnes au travail plutôt que des illustrations abstraites, pour incarner les interviews humaines
DéclinaisonsSystème appliqué au site, aux visuels produit et aux ressources (webinars, livres blancs), avec un UI kit Figma comme référence unique

Le résultat est une marque plus chaude et plus lisible, qui garde son ancrage tech mais ne ressemble plus à un SaaS interchangeable.

No items found.

Direction Artistique

Le brief tenait en une phrase : « pas trop froid, pas trop data, mais rigoureux et premium ». Diffly voulait garder le bleu sans en être prisonnier, sortir des dégradés corporate et rendre visible ce qui fait sa différence : des humains qui parlent à des humains pour obtenir la vérité. Les références citées (Batch, Gong, Mercateam) allaient toutes dans le même sens, une identité bold, une palette riche, de la chaleur.

Trois pistes, trois lectures du même produit

Plutôt qu'une seule proposition, Gemeos a construit trois territoires visuels complets, chacun avec sa palette, sa typographie et une homepage maquettée de bout en bout.

La direction retenue

Diffly a choisi la piste Le signal comme socle, enrichie des gestes les plus forts des deux autres : le surlignage des mots-clés dans les titres, les annotations manuscrites qui ponctuent les sections, les photographies humaines rehaussées de motifs géométriques. Le résultat : un bleu nuit structurant, un jaune signal qui attire l'œil sur ce qui compte, des photos de vraies personnes au travail, et une typographie lisible qui laisse la place au message.

Le signal

Une tension entre chaud et froid : une palette ancrée dans la chaleur humaine, contrebalancée par un bleu primaire qui évoque la rigueur technologique. Illustrations au trait légèrement pixelisées, ni organiques ni digitales, et typographie sans serif noble, non grasse, pour une dimension premium adressée au C-level.

Entre les lignes

Voir à travers le bruit, lire entre les lignes, révéler ce qui est flou. Des photographies travaillées avec des motifs superposés qui évoquent l'assemblage de sources multiples, un flou partiel pour le « avant Diffly », des mots manuscrits qui rappellent les experts humains derrière la plateforme. Palette inspirée des consoles de développement : couleurs vives sur fond sombre.

Confrontation

La piste la plus affirmée émotionnellement. Des couleurs choisies loin des codes IA, sans gris ni dégradé corporate, des icônes dessinées à la main et des mots-clés encapsulés dans les titres comme surlignés au marqueur. Formes rondes et compositions aérées pour un univers chaleureux : des humains qui parlent à des humains pour obtenir la vérité.

Look&Feel

UX / UI Design

L'audit du site existant a fait ressortir trois problèmes. La proposition de valeur était trop abstraite : on parlait de win-loss analysis avant d'avoir posé le problème. Le produit n'était pas compris assez vite : SaaS, service d'interviews, cabinet d'étude ? En réalité les trois, mais rien ne le disait. Et la navigation était « feature driven », calquée sur un SaaS classique, alors que Diffly vend un changement stratégique côté Revenue.

Une architecture orientée problème

Gemeos a reconstruit l'arborescence avec les équipes Diffly, en partant du hook plutôt que des fonctionnalités : « 90 % des raisons de perte dans votre CRM sont inexactes ». Le site s'organise ensuite par produit, par cas d'usage et par persona, avec des pages dédiées pour chaque combinaison.

SectionPagesObjectif
HomeHomepage FR/ENPoser le problème, montrer le produit en action, prouver par les clients
ProduitPlatform, Live Interviews, AI Insights & Alerts, IntegrationsFaire comprendre que Diffly = SaaS + service + IA
Solutions par use caseWin-loss analysis, Customer Experience, Retention, Customer Adoption, Competitive Intelligence, Product ResearchCapter les requêtes métier et parler à chaque enjeu
Solutions par personaSales, Marketing, Product, Customer SuccessAdresser directement les décideurs et utilisateurs
CustomersCas clients avec filtres par industriePreuve sociale (Adobe, Workday, Didomi, Skillup…)
ResourcesBlog, Toolbox (webinars, livres blancs), ROI Calculator, DiagnosticAlimenter le SEO et la génération de leads
Pricing / DemoPages dissociéesUn parcours clair pour comparer, un autre pour convertir
AboutQui sommes-nous, Careers, Partner ProgramIncarner l'équipe et ouvrir le canal partenaires

UI kit et design des pages

Un UI kit complet a été conçu avant les pages : couleurs, typographies, composants (cartes, tabs, tableaux de pricing, témoignages, FAQ, bandeaux CTA), états et déclinaisons responsive. L'ensemble des templates a ensuite été designé en desktop et mobile dans Figma, en version anglaise (langue par défaut du site) puis déclinée en français. Chaque section clé embarque un visuel produit pour ne jamais laisser le visiteur sur une promesse abstraite.

Product Design

Diffly ne disposait d'aucun design system produit ni de visuels exploitables sur le web. Or le brief insistait sur un point : faire comprendre en un coup d'œil que Diffly est une source unique de vérité multi-sources, et que son IA permet de poser n'importe quelle question sur ses deals. Gemeos a donc conçu une bibliothèque de visuels produit dédiée au site, à partir des écrans réels de la plateforme et d'une liste de fonctionnalités à illustrer fournie par Diffly.

FamilleVisuelsCe qu'ils montrent
Diffly AIBarre de recherche, « Ask Diffly AI » (question, bibliothèque de questions, résultat), AI reco sur un deal en coursPoser n'importe quelle question, obtenir une réponse sourcée
InsightsDashboards critères de décision (gagné, perdu, satisfaction, churn), critères sur une interview, deal page / post-mortemLa profondeur des insights récupérés à chaque interview
OrganisationAI Tag, page Tag global, catégories de tagsComment Diffly structure et agrège les feedbacks
CampagnesChoix du format, personnalisation des séquences, critères de déclenchementLancer une collecte de feedback en quelques clics
ÉcosystèmeMulti-source (interviews, surveys, call recordings, CRM), battle card générée par IA, intégrationsDiffly comme source unique de vérité

Chaque visuel a été redessiné dans le style du site (cartes, ombres, palette, typographie) plutôt que capturé tel quel, pour que le produit paraisse aussi soigné que le discours. Les visuels existent en anglais et en français, et plusieurs ont été déclinés en versions animées pour les sections hero.

No items found.

Intégration Webflow

Un site bilingue, une architecture à trois niveaux (produit, use case, persona), un hub de ressources et un blog à migrer : l'intégration Webflow de Diffly était un projet dense, mené en parallèle de la finalisation du design pour tenir la mise en ligne début juillet.

LivrableDétail
Intégration des pagesUne trentaine de templates statiques et dynamiques intégrés pixel-perfect depuis Figma, desktop et mobile
Multilingue FR/ENWebflow Localization sur l'ensemble du site : pages statiques, CMS, title tags et meta descriptions traduits, gestion des visuels par langue
Architecture CMSCollections cas clients (avec catégories d'industries), blog et auteurs, ressources Toolbox (webinars, livres blancs), témoignages sélectionnables page par page, logos clients
Composants sur mesureSections à onglets, sliders de témoignages, tableaux de pricing, blocs FAQ, hub Toolbox
AnimationsMicro-interactions et transitions au scroll, visuels produit animés dans les hero, optimisés pour ne pas dégrader le chargement
Hub Toolbox & landing pagesMigration des LP webinars et livres blancs vers un template unique, réutilisable pour les campagnes emailing
Redirections & mise en lignePlan de redirections 301 depuis l'ancien site, recette SEO, bascule du domaine sans interruption
FormationSérie de vidéos : gestion du multilingue, sections tabs, ajout de logos, édition du blog, remplacement des visuels et sélection des avis

Une QA à quatre mains

Diffly a challengé l'intégration de près : plus de 140 commentaires remontés avant mise en ligne, traités un par un. Cette exigence a payé : le site est parti en production avec un contenu validé mot par mot dans les deux langues, et les équipes Diffly gèrent aujourd'hui seules pages, ressources, cas clients et traductions.

SEO technique

La refonte changeait tout : domaine conservé mais URLs, arborescence et langue par défaut repensées. L'enjeu SEO était double : ne rien perdre du référencement acquis, et poser les bases pour capter les requêtes métier (win-loss analysis, voice of customer, churn analysis, buyer feedback) en français comme en anglais.

ChantierDétail
Plan de redirectionsCartographie ancien site → nouveau site, redirections 301 page à page, contrôle des 404 après bascule
Structure sémantiqueUn H1 par page, hiérarchie Hn cohérente avec l'architecture use case / persona, maillage interne entre solutions, produit et cas clients
Balises & métadonnéesTitle tags et meta descriptions rédigés et traduits pour chaque page statique, balises hreflang FR/EN via Webflow Localization
Données structuréesSchema Organization sur le site, Article et auteurs sur le blog
PerformanceImages optimisées (WebP, lazy loading), animations légères, scripts tiers limités
Stratégie de contenuRecommandations sur la fréquence d'articles, la fraîcheur des dates de publication, les pages auteurs et l'usage d'outils d'aide à la rédaction

Pensé pour les moteurs et pour les LLM

Les pages solutions et personas ont été rédigées avec des verbatims clairs, structurés en questions-réponses et en définitions courtes : le format que reprennent ChatGPT, Perplexity ou les AI Overviews de Google lorsqu'ils citent une source. Combiné aux données structurées et à une architecture lisible, ce travail positionne Diffly pour être cité comme référence sur le win-loss analysis en Europe, pas seulement classé.

NOS dernières réalisations

+250 entreprises
accompagnées

Des sites designés et développés avec

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez notre collaboration...