Aller au contenu

Synapse : refonte du site d'un SaaS IA pour l'industrie

Synapse développe un copilote IA qui aide les PME industrielles à exploiter leurs données, notamment dans la métallurgie. Le site devait expliquer un produit technique sans perdre les décideurs métier.

Gemeos a mobilisé son expérience d'agence web pour l'industrie pour concevoir la direction artistique, les parcours UX/UI et l'intégration Webflow du projet.

Page d’accueil Synapse sur un ordinateur portable : « PME industrielles, pilotez votre activité » et tableau de bord

Faire comprendre un copilote IA aux directions industrielles

Synapse développe une solution SaaS destinée aux PME industrielles, notamment dans la métallurgie, pour mieux exploiter leurs données opérationnelles. Son positionnement se situe entre les outils de pilotage métier et l'intelligence artificielle : un sujet qui peut sembler abstrait à des dirigeants concentrés sur la production. Le site devait expliquer la valeur d'un copilote IA avec un vocabulaire concret, centré sur les difficultés rencontrées dans les ateliers.

Gemeos a travaillé la direction artistique en conciliant les codes de l'industrie et ceux d'un logiciel innovant. Les maquettes UX/UI présentent les problèmes métier, le fonctionnement de la solution et les bénéfices attendus dans un parcours progressif. L'intégration Webflow a permis de transformer ces maquettes en une landing page responsive, dotée de composants réutilisables et d'interactions adaptées à la démonstration du produit.

Industrie
Saas
Industrie
Services
DA
UX/UI Design
Intégration
Maquettes du site Synapse sur fond bleu : accueil « Le copilote des PME industrielles » et tableau de bord

Direction Artistique

Synapse opère à l’intersection du monde industriel et de la tech IA. La direction artistique devait refléter cette double identité : la rigueur et la crédibilité de l’industrie, combinées à l’innovation et la fluidité d’un produit SaaS moderne.

Une identité visuelle tech & industrielle

La charte graphique de Synapse, fondée sur des tons bleus avec dégradés, a servi de point de départ pour une DA inspirée des meilleures références SaaS B2B (Stripe, Airtable, Typeform) : typographies précises, visualisations de données et éléments évoquant les connexions et la centralisation des flux d’information.

Le logo au cœur du design

Le logo Synapse, avec ses deux formes symétriques évoquant l’embranchement neuronal, la lettre S et l’idée de connexion, a été intégré comme fil conducteur de la DA : ses codes (symétrie, flux, connexion) se retrouvent dans les patterns graphiques, les illustrations et les animations du site.

Pilier DAChoix créatifMessage transmis
CouleursBleu gradient, tech premiumInnovation & confiance
TypographieSans-serif précis & lisibleExpertise & clarté
VisuelsConnexions, flux de données, IAIntelligence & performance
RéférencesStripe, Airtable, TypeformSaaS B2B premium
  • Écran Pro Display XDR sur un bloc de béton devant un fond bleu cobalt, ouvert sur l'accueil Synapse « PME industrielles, pilotez votre activité avec clarté » et son tableau de bord
  1. Concept 1 : Dark & Structuré

    Un univers sombre sur fond bleu nuit qui installe Synapse comme un outil tech sérieux et ambitieux. Le hero splitté texte/interface démontre le produit dès le premier fold. La section "problème vs solution" joue sur deux cards contrastées, gestion morcelée en sombre vs pilotage sans friction en bleu vif, pour matérialiser visuellement la transformation promise. Les sections features suivantes détaillent les cas d'usage en liste sur fond sombre avec captures produit. Une direction premium et percutante pour les dirigeants de PME industrielles exigeants.

  2. Concept 2 : Blanc & Épuré

    Un design clair et aéré qui mise sur la lisibilité et la clarté du message. Le hero centré avec forme organique en dégradé chaud en arrière-plan apporte douceur et modernité sans alourdir. La mécanique "problème / solution" est traitée en texte direct et percutant, "Trop d'infos. Trop d'outils. Trop de doutes.", avant d'introduire la plateforme. Les captures produit sur fond blanc respirent et permettent une lecture fluide et progressive. La direction la plus accessible et pédagogique des trois.

  3. Concept 3 : Gradient & Tech

    Un hero bleu-violet en dégradé qui crée une atmosphère tech premium sans tomber dans le cliché dark mode. L'interface produit flotte dans cet environnement lumineux avec élégance. Le bandeau d'intégrations, Stripe, Zapier, Slack, Perplexity, installe immédiatement la dimension connectée et ouverte de la plateforme. Les sections alternent fond blanc et blocs violets pour rythmer la lecture. Une direction moderne et différenciante qui positionne Synapse comme l'outil de pilotage de la prochaine génération de PME industrielles.

Maquette de page d’accueil Synapse sur fond bleu nuit : titre « Le copilote des PME industrielles » et tableau de bord
Concept 1
Laptop affichant dans Figma les maquettes desktop et mobile de la landing page Synapse, sur fond bleu nuit

Design UX/UI

La landing page de Synapse devait convaincre des dirigeants et directeurs opérationnels de PME industrielles, souvent peu familiers des outils SaaS modernes, que Synapse était la solution la plus simple, la plus intelligente et la plus adaptée à leurs réalités terrain.

Simplifier la proposition de valeur

Nous avons structuré l’architecture de la page pour mettre en avant les deux atouts différenciants de Synapse : la simplicité de mise en place (sans bouleverser l’organisation existante) et la puissance de l’IA pour générer des insights actionnables à partir des données de l’entreprise.

Design adapté au secteur industriel

Contrairement aux SaaS B2C grand public, Synapse s’adresse à des décideurs terrain pragmatiques. Le design a été calibré pour inspirer confiance et crédibilité immédiatement, avec des visuels concrets, des cas d’usage clairs et un ton professionnel et direct.

Conversion & lead gen B2B

Les call-to-action ont été pensés pour un processus commercial B2B : demande de démo, prise de contact, accès à une période d’essai. L’architecture UX guide naturellement le visiteur vers l’engagement, avec des zones de réassurance (témoignages, chiffres clés) stratégiquement positionnées.

  • Section « Des cas d'usage concrets » de Synapse : suivi des marges, prévision de trésorerie, suivi opérationnel et analyse des ventes s'allument tour à tour à côté du tableau de bord
Smartphone affichant le site mobile de Synapse : cartes « Gagnez +5h par semaine » et « Décidez avec clarté »

Intégration Webflow

L’intégration Webflow du site Synapse a mis l’accent sur la fidélité au design, les animations soignées et la performance, essentiels pour un SaaS B2B dont le site est le principal vecteur d’acquisition.

Intégration pixel-perfect

La landing page a été intégrée dans Webflow avec une attention maximale aux détails : rendu pixel-perfect des maquettes, animations de scroll, micro-interactions et transitions fluides inspirées des références SaaS premium comme Stripe et Airtable.

Performance & CMS

Une architecture Webflow légère a été privilégiée pour garantir des temps de chargement rapides, critiques pour le SEO et la conversion, avec une structure permettant à l’équipe Synapse de mettre à jour leur contenu (cas d’usage, témoignages, fonctionnalités) sans intervention technique.

CritèreSolutionImpact
PerformanceAssets optimisés, code propreChargement rapide
AnimationsWebflow Interactions IX2Expérience premium
CMSSections éditables en autonomieFlexibilité équipe
ResponsiveMobile-first, 5 breakpointsUX multi-device
  • iPhone appuyé contre un bloc de béton sur fond gris bleu, ouvert sur l'accueil mobile de Synapse

Nos dernières réalisations

+250 entreprises accompagnées

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

Voir tous les projets

Vous allez notre collaboration, c’est garanti

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

demander un devis

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