Skip to content

Diffly x Gemeos

Complete redesign of diffly.co by Gemeos, a web agency dedicated to B2B SaaS: art direction, UX/UI, product visuals, bilingual Webflow integration, and technical SEO. Diffly is the win-loss analysis and buyer feedback platform for B2B revenue teams.

Diffly website on a phone: “90% of loss reasons in your CRM are inaccurate,” on a gray concrete block

Diffly, the truth behind buying decisions, finally visible

Diffly helps B2B companies understand why they win, lose, or churn: buyer interviews conducted by neutral experts, questionnaires, cross-referencing with CRM and call recordings, and AI analysis. A strong promise, an average 22% increase in win rate, supported by a site that no longer reflected it: monochrome, heavy on gradients, structured like a generic SaaS, and, above all, unable to convey what Diffly actually does in a few seconds.

Gemeos rebuilt the site from scratch: new architecture focused on problems rather than features, art direction developed through three concepts, a full UI kit and page designs, around twenty product visuals, Webflow integration in French and English, followed by technical SEO QA and team training. Twelve weeks from brief to launch.

Industry
Saas
Services
Branding
Artistic Direction
UX/UI Design
Development
Product Design
SEO
Diffly visual: smiling woman and a card comparing the CRM's loss reason with the buyer's own account

Branding

The brief was clear: keep the name Diffly, retain a place for blue without being trapped by it, move away from the dated gradients, and make the human element at the heart of the product visible. Rather than a complete logo redesign, Gemeos evolved the identity through the surrounding system.

ElementEvolution
PaletteA structuring midnight blue, an electric blue for action, a signal yellow to highlight what matters, warmed up by beiges and a burnt orange
TypographieA legible, deliberately light sans serif for body and headings, paired with handwriting for annotations
Gestes graphiquesKeywords highlighted in headings, handwritten annotations punctuating sections, geometric patterns layered over photographs
IconographiePhotographs of real people at work rather than abstract illustrations, to embody human interviews
ApplicationsSystem applied to the site, product visuals and resources (webinars, white papers), with a Figma UI kit as the single reference

The result is a warmer, more readable brand that maintains its tech roots while no longer looking like an interchangeable SaaS.

  • Diffly type specimen: main font with full alphabet and large white "Aa" on a blue background
  • Diffly color palette in five bands: yellow, orange, purple, dark blue and light blue, with hex codes
MacBook Pro on a concrete block against a blue backdrop, showing the Diffly home page “Your prospects & customers know why you lose deals”

Art Direction

The brief was summed up in one sentence: "not too cold, not too data-heavy, but rigorous and premium." The art direction had to deliver on it. Diffly wanted to keep the blue without being defined by it, move away from corporate gradients, and highlight what makes them different: humans talking to humans to uncover the truth. The cited references (Batch, Gong, Mercateam) all pointed in the same direction: a bold identity, a rich palette, and warmth.

Three concepts, three interpretations of the same product

Rather than a single proposal, Gemeos built three complete visual territories, each with its own palette, typography, and a fully mocked-up homepage.

The chosen direction

Diffly chose the Signal concept as its foundation, enhanced by the most impactful elements of the other two: highlighting keywords in headings, handwritten annotations punctuating sections, and human-focused photography accented with geometric patterns. The result: a structural midnight blue, a signal yellow that draws the eye to what matters, photos of real people at work, and a legible typeface that lets the message shine.

  1. Signal

    A tension between warm and cold: a palette rooted in human warmth, balanced by a primary blue that evokes technological rigor. Slightly pixelated line illustrations, neither purely organic nor digital, and a sophisticated, light sans-serif typeface for a premium feel tailored to the C-suite.

  2. Between the lines

    Seeing through the noise, reading between the lines, revealing what is blurred. Photographs layered with patterns that evoke the assembly of multiple sources, partial blurring for the "pre-Diffly" state, and handwritten words that recall the human experts behind the platform. A palette inspired by developer consoles: vibrant colors on a dark background.

  3. Confrontation

    The most emotionally assertive direction. Colors chosen far from typical AI tropes, with no corporate grays or gradients, hand-drawn icons, and keywords encapsulated in headings as if highlighted with a marker. Rounded shapes and airy compositions create a warm universe: humans speaking to humans to uncover the truth.

Diffly homepage mockup: headline “Your buyers know why you lose deals” above a product screenshot
Concept 1
Laptop showing the Diffly website Figma file, with web page mockups and layers on a yellow background

UX / UI Design

The audit of the existing site highlighted three main issues. The value proposition was too abstract: it focused on win-loss analysis before defining the problem. The product wasn't understood quickly enough: was it a SaaS, an interview service, or a research firm? It was actually all three, but nothing communicated that. Finally, the navigation was "feature-driven," modeled after a standard SaaS, even though Diffly sells a strategic shift for Revenue teams. The web design had to bring these business challenges to the forefront before showing the software screens.

A problem-oriented architecture

Gemeos rebuilt the site structure with the Diffly team, starting with the hook rather than the features: "90% of the reasons for loss in your CRM are inaccurate." The site is now organized by product, use case, and persona, with dedicated pages for every combination.

SectionPagesObjectif
HomeHomepage FR/ENState the problem, show the product in action, prove it through customers
ProduitPlatform, Live Interviews, AI Insights & Alerts, IntegrationsMake it clear that Diffly = SaaS + service + AI
Solutions by use caseWin-loss analysis, Customer Experience, Retention, Customer Adoption, Competitive Intelligence, Product ResearchCapture industry searches and speak to each challenge
Solutions by personaSales, Marketing, Product, Customer SuccessSpeak directly to decision-makers and users
CustomersCase studies with industry filtersPreuve sociale (Adobe, Workday, Didomi, Skillup…)
ResourcesBlog, Toolbox (webinars, livres blancs), ROI Calculator, DiagnosticFeed SEO and lead generation
Pricing / DemoSeparate pagesOne clear path to compare, another to convert
AboutAbout us, Careers, Partner ProgramPut faces on the team and open the partner channel

UI kit and page design

A complete UI kit was designed before the pages: colors, typography, components (cards, tabs, pricing tables, testimonials, FAQs, CTA banners), states, and responsive variations. All templates were then designed for desktop and mobile in Figma, first in English (the site's default language) and then adapted into French. Every key section includes a product visual to ensure visitors are never left with an abstract promise.

  • Diffly UI card "Automated collection": 100% of deals analyzed, Salesforce, Gong and Typeform sources
  • Diffly visual: man using a laptop with an "Automated collection" UI card listing Salesforce and Gong
  • Diffly ROI calculator "Watch your revenue take off" with deal sliders and €945,000 in extra revenue
Diffly product screen: TBWA Corporate deal page, interview feedback and positive/negative Decision drivers card

Product Design

Diffly had no product design system or web-ready visuals. However, the brief was clear: communicate at a glance that Diffly is a single source of truth for multiple data streams and that its AI can answer any question about your deals. Gemeos therefore created a library of product visuals for the site, based on actual platform screens and a list of features provided by Diffly.

FamilleVisuelsWhat they show
Diffly AISearch bar, “Ask Diffly AI” (question, question library, result), AI recommendation on an ongoing dealAsk any question, get a sourced answer
InsightsDecision criteria dashboards (won, lost, satisfaction, churn), criteria on an interview, deal page / post-mortemThe depth of insights gathered from each interview
OrganisationAI Tag, global Tag page, tag categoriesHow Diffly structures and aggregates feedback
CampagnesFormat choice, sequence customization, trigger criteriaLaunch feedback collection in a few clicks
EcosystemMulti-source (interviews, surveys, call recordings, CRM), AI-generated battle card, integrationsDiffly as the single source of truth

Each visual was redesigned to match the site's style (cards, shadows, palette, typography) rather than simply captured as-is, ensuring the product looks as polished as the messaging. The visuals are available in both English and French, with several animated versions created for the hero sections.

  • Diffly tag categories UI: "Product feedback" category with yellow tags and counts, on a purple background
  • Diffly product visual: tag category menu (Feature, Relationship, Pricing & GTM) over a customer quote
  • Diffly NPS stats card: score 5.00, 9 passives, 6 promoters and a bar chart of ratings from 0 to 10
  • Diffly "Vos call recordings" card with an automated collection widget: Salesforce, Gong, Typeform sources
Laptop showing the Diffly website testimonials section: key figures (+150, 100%, 48h, +22%) and review carousel

Webflow integration

A bilingual site, a three-tier architecture (product, use case, persona), a resource hub, and a blog to migrate: Diffly’s Webflow integration was a complex project, carried out in parallel with the final design stages to meet the early July launch deadline.

LivrableDetails
Page buildAbout thirty static and dynamic templates built pixel-perfect from Figma, desktop and mobile
Multilingue FR/ENWebflow Localization across the whole site: static pages, CMS, translated title tags and meta descriptions, visuals managed per language
Architecture CMSCollections for case studies (with industry categories), blog and authors, Toolbox resources (webinars, white papers), testimonials selectable page by page, client logos
Custom componentsTabbed sections, testimonial sliders, pricing tables, FAQ blocks, Toolbox hub
AnimationsMicro-interactions and scroll transitions, animated product visuals in the heroes, optimized so loading doesn't suffer
Hub Toolbox & landing pagesWebinar and white paper landing pages migrated to a single template, reusable for email campaigns
Redirections & mise en ligne301 redirect plan from the old site, SEO acceptance testing, domain switch with no downtime
FormationVideo series: managing languages, tab sections, adding logos, editing the blog, replacing visuals and selecting reviews

Collaborative QA

Diffly challenged the integration closely: over 140 pieces of feedback were submitted before launch, each addressed one by one. This high standard paid off: the site went live with content validated word-for-word in both languages, and the Diffly team is now fully autonomous in managing their pages, resources, case studies, and translations.

  • Laptop showing the Diffly website carousel “Resources and profiles related to this use case” on a blue background
  • Diffly mobile homepage on a smartphone: “Your prospects & clients know why you lose deals” headline in French
  • iPhone on a blue background, showing the Diffly mobile page “See what teams achieve with Diffly” and its industry filters
MacBook Pro on a concrete slab against an orange backdrop, showing the Diffly blog hub

Technical SEO

The redesign changed everything: the domain was kept, but the URLs, site structure, and default language were completely rethought. The SEO challenge was twofold: to retain all existing search rankings while laying the groundwork to capture industry-specific queries (win-loss analysis, voice of customer, churn analysis, buyer feedback) in both French and English.

ChantierDetails
Redirect planOld site → new site mapping, page-by-page 301 redirects, 404 checks after the switch
Semantic structureOne H1 per page, a heading hierarchy consistent with the use case / persona architecture, internal linking between solutions, product and case studies
Tags & metadataTitle tags and meta descriptions written and translated for every static page, FR/EN hreflang tags through Webflow Localization
Structured dataOrganization schema on the site, Article and authors on the blog
PerformanceOptimized images (WebP, lazy loading), lightweight animations, limited third-party scripts
Content strategyRecommendations on article frequency, freshness of publication dates, author pages and the use of writing assistance tools

Designed for search engines and LLMs

The solution and persona pages were written using clear, verbatim language, structured as Q&As and concise definitions, the exact format ChatGPT, Perplexity, and Google’s AI Overviews pull from when citing sources. Combined with structured data and a readable architecture, this approach positions Diffly to be cited as a reference for win-loss analysis in Europe, rather than just ranked.

  • iPhone on a yellow background, showing the Diffly mobile blog: “Everything you need to become a Go-To-Market expert” and the latest article
  • iPhone on a purple background, showing the Diffly article “Win-loss analysis: why are qualitative interviews so important?”

Our latest projects

+250 companies supported

Websites designed and developed with

See all projects

You're going to working with us, guaranteed

Ready to launch your business?

get a quote

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