KGM Technologies — Landing IA & Acquisition LegalTech

Le contexte

KGM Technologies développe une future plateforme de travail basée sur l'intelligence artificielle destinée aux cabinets d'avocats.

L'ambition du produit est de centraliser une grande partie du quotidien du cabinet dans une interface conversationnelle unique : dossiers, documents, échéances, missions, informations métier et aide juridictionnelle.

Le projet consistait à créer la première présence publique de KGM, alors que le produit était encore en développement.

L'objectif dépassait donc largement la création d'une simple landing page.

Le site devait être capable de présenter une vision produit ambitieuse, de rassurer un public professionnel particulièrement exigeant et de commencer immédiatement à transformer les visiteurs en premiers prospects qualifiés.

La proposition centrale autour de laquelle toute l'expérience a été construite est devenue :

« Tout votre cabinet. Une conversation. »

Le défi

KGM s'adresse à des avocats, un public pour lequel la puissance d'un outil ne suffit pas.

La confiance, la traçabilité, la vérification des informations et le contrôle humain sont indispensables.

Il fallait donc trouver un équilibre entre une expérience suffisamment moderne pour matérialiser l'ambition technologique du produit et une identité suffisamment sérieuse pour rester crédible dans un environnement juridique.

Je voulais également éviter les codes traditionnels des landing pages consacrées à l'intelligence artificielle :

• succession de blocs marketing ;
• captures d'écran fictives ;
• promesses abstraites autour d'une « IA révolutionnaire » ;
• longues listes de fonctionnalités ;
• démonstrations laissant croire qu'un produit est déjà totalement commercialisé.

Certaines fonctionnalités de KGM étant encore en développement, les interfaces présentées sur le site devaient également rester transparentes sur leur nature.

Les démonstrations sont donc de véritables simulations interactives, conçues spécifiquement pour la landing, et non des captures destinées à faire croire à l'existence de fonctionnalités déjà disponibles.

Enfin, le site ne devait pas être uniquement esthétique.

Il devait devenir une première infrastructure commerciale réellement utilisable par l'équipe KGM.

Notre approche

La landing a été pensée comme une démonstration progressive du futur produit.

Plutôt que d'expliquer KGM avec de longs paragraphes, le visiteur découvre différents scénarios proches du quotidien d'un cabinet :

• brief quotidien ;
• recherche dans un dossier ;
• consultation d'une information ;
• analyse documentaire ;
• ouverture et vérification d'une source ;
• vue globale du cabinet ;
• gestion de l'aide juridictionnelle ;
• validation humaine avant une action.

L'objectif est de faire comprendre progressivement ce que pourrait apporter KGM sans demander au visiteur d'imaginer lui-même le fonctionnement du produit.

Le site devient ainsi une première expérience du logiciel plutôt qu'une simple présentation commerciale.

Un hero conçu comme une démonstration

Le hero constitue la première mise en situation.

Une console conversationnelle centrale représente KGM tandis que différents éléments du cabinet apparaissent autour d'elle : dossier, audience, mission d'aide juridictionnelle ou information contractuelle.

Le scroll fait progressivement évoluer la composition et donne l'impression que les différentes informations du cabinet viennent se structurer autour d'une seule interface.

Cette séquence permet d'introduire immédiatement la promesse centrale :

Tout votre cabinet. Une conversation.

Le hero a également été adapté spécifiquement aux petits écrans afin de conserver la hiérarchie et la compréhension de la scène sans simplement réduire la version desktop.

Une interface produit plutôt que des screenshots

Un choix important a été de ne pas utiliser de simples captures d'écran.

Les interfaces visibles dans les démonstrations sont directement développées en React.

Elles peuvent donc réellement réagir aux actions du visiteur et simuler différentes situations.

Il est notamment possible de représenter :

• la sélection d'une priorité ;
• l'ouverture d'une source ;
• la consultation d'un dossier ;
• la navigation entre différentes informations ;
• le changement de mode d'analyse documentaire ;
• des interactions avec l'agent ;
• des validations avant exécution d'une action.

Cette approche permet de montrer les principes du futur produit beaucoup plus précisément qu'avec une série de maquettes statiques.

La vérification au cœur de l'expérience

Les sources occupent volontairement une place importante dans les démonstrations.

Une réponse produite par une intelligence artificielle dans un contexte juridique ne doit pas simplement sembler correcte.

Elle doit pouvoir être vérifiée.

Les références et sources sont donc volontairement visibles et interactives dans plusieurs parties de l'expérience afin de matérialiser cette philosophie.

Cette décision de design permet de communiquer une partie importante du positionnement de KGM directement à travers l'interface, sans devoir l'expliquer dans un long discours commercial.

Une expérience pensée comme une narration

L'ensemble de la landing repose sur une logique de storytelling produit.

Les sections ne sont pas traitées comme des blocs indépendants mais comme différentes étapes d'une même démonstration.

Un travail important a notamment été réalisé sur :

• le sticky storytelling ;
• les révélations progressives ;
• les cartes flottantes ;
• la profondeur liée au déplacement du pointeur ;
• les connexions entre différentes informations ;
• les transitions entre un dossier et son document ;
• les halos et effets lumineux ;
• les changements de rythme entre sections ;
• les micro-interactions.

Les animations sont utilisées pour accompagner la compréhension du produit plutôt que comme de simples éléments décoratifs.

La page alterne également entre univers sombres et sections plus claires afin d'éviter une expérience visuellement monotone et de laisser respirer les contenus plus explicatifs.

Une direction artistique dédiée

L'identité visuelle a été pensée pour s'éloigner des codes habituels des logiciels juridiques.

L'interface repose principalement sur :

• des tons graphite ;
• du noir ;
• du blanc chaud ;
• du violet iris ;
• le cyan associé à l'identité KGM ;
• de grandes typographies ;
• des interfaces très épurées ;
• des bordures fines ;
• des effets de profondeur maîtrisés.

L'inspiration se rapproche davantage de produits numériques modernes comme Linear ou de certaines interfaces Apple que des codes traditionnels de la LegalTech.

Le résultat cherche à transmettre simultanément technologie, précision et maîtrise.

Desktop, mobile et accessibilité

Le comportement des animations a été adapté en fonction du support utilisé.

Sur desktop, l'expérience exploite davantage le scroll, la profondeur, les mouvements progressifs et les interactions au pointeur.

Sur mobile, les comportements deviennent volontairement plus directs afin de conserver une expérience fluide et naturelle sur écran tactile.

Le projet prend également en compte prefers-reduced-motion afin de réduire ou supprimer les animations lorsque l'utilisateur l'a demandé au niveau de son système.

L'objectif n'était pas de reproduire exactement la même expérience sur tous les supports, mais de conserver la même intention avec des interactions adaptées au contexte.

Acquisition et demandes de démonstration

La landing constitue également la première véritable infrastructure d'acquisition de KGM.

Un prospect peut effectuer une demande de démonstration directement depuis le site en renseignant ses coordonnées, son cabinet et la problématique qui l'intéresse.

Le formulaire déclenche plusieurs traitements côté serveur.

Après validation :

• la demande est enregistrée ;
• le prospect reçoit un email transactionnel de confirmation ;
• l'équipe KGM reçoit une notification ;
• les informations sont ajoutées au système de suivi commercial ;
• la messagerie Zimbra permet de distribuer les demandes aux membres concernés.

L'objectif était de conserver un parcours extrêmement simple pour le visiteur tout en fournissant immédiatement suffisamment de contexte à l'équipe pour traiter le lead.

Newsletter et double opt-in

La newsletter intègre un véritable mécanisme de double opt-in.

Une simple saisie d'adresse email n'est pas considérée comme une inscription définitive.

Après sa demande, l'utilisateur reçoit un lien de confirmation signé et limité dans le temps.

Son adresse n'est ajoutée à la liste marketing qu'après confirmation explicite.

Les contacts confirmés sont ensuite synchronisés avec Resend.

Un mécanisme de désinscription est également disponible.

Cette architecture permet de distinguer clairement :

une intention d'inscription d'un consentement effectivement confirmé.

Un mini-CRM dans Google Sheets

Plutôt que d'introduire immédiatement un CRM SaaS supplémentaire, j'ai développé un système léger reposant sur Google Sheets et Google Apps Script.

Chaque demande de démonstration est automatiquement enregistrée avec les différents événements associés au contact.

Le fichier a progressivement évolué vers un véritable outil opérationnel pour l'équipe KGM.

Il comprend notamment une fiche de recherche permettant de retrouver un utilisateur à partir de son nom ou de son adresse email et d'afficher son historique complet.

Un dashboard dédié permet également de suivre les principaux indicateurs d'acquisition.

Le système permet notamment d'analyser :

• les nouveaux contacts sur 7 jours ;
• les nouveaux contacts sur 30 jours ;
• les nouveaux contacts sur 90 jours ;
• les demandes de démonstration ;
• les inscriptions newsletter ;
• les confirmations de double opt-in ;
• les conversions par source ;
• le délai moyen de confirmation ;
• l'évolution du funnel commercial.

Le funnel suit plusieurs états :

Nouveau → Contacté → RDV → Démo → Pilote

Un score de chaleur pour prioriser les prospects

Un score de chaleur sur 100 complète le mini-CRM.

Il est calculé à partir de différents signaux associés au contact et permet d'identifier rapidement les prospects présentant le plus fort niveau d'engagement.

L'objectif n'est pas de remplacer l'analyse humaine mais de fournir à l'équipe une information immédiatement exploitable pour organiser ses priorités commerciales.

La landing devient ainsi directement reliée au travail de qualification effectué après l'acquisition.

La sécurité intégrée dès la landing

Même s'il s'agit d'un site marketing, la sécurité a été considérée comme une composante de l'architecture dès le début du projet.

Les formulaires utilisent Cloudflare Turnstile afin de limiter les soumissions automatisées.

Les échanges entre la landing et Google Apps Script sont authentifiés par HMAC-SHA256.

Chaque requête est également associée à un timestamp disposant d'une durée de validité courte afin de limiter la réutilisation arbitraire du webhook public.

Les informations saisies par les utilisateurs sont neutralisées avant leur insertion dans Google Sheets afin d'éviter les injections de formules.

Les secrets nécessaires au fonctionnement des différents services restent exclusivement côté serveur.

Cette approche était particulièrement importante pour KGM puisque le futur produit métier est destiné à manipuler des informations juridiques autrement plus sensibles.

SEO, partage et continuité

Le SEO a été traité comme une fonctionnalité à part entière du projet.

La landing comprend notamment :

• métadonnées structurées ;
• canonical URLs ;
• Open Graph ;
• Twitter Cards ;
• données structurées Schema.org ;
• sitemap ;
• robots.txt ;
• manifest ;
• gestion des anciennes URLs ;
• redirections sémantiques.

Le précédent site disposant déjà d'URLs connues par les moteurs de recherche, des redirections ont été mises en place afin de conserver autant que possible cette continuité lors du changement de site.

Une preview sociale spécifique au format 1200 × 630 a également été conçue afin de conserver une présentation cohérente lors du partage de KGM sur les réseaux sociaux et messageries.

Stack technique

Le projet repose principalement sur :

• Next.js 16 avec App Router ;
• React 19 ;
• TypeScript ;
• Tailwind CSS 4 ;
• CSS personnalisé ;
• Motion ;
• GSAP et ScrollTrigger ;
• Lenis ;
• Nodemailer ;
• SMTP OVH / Zimbra ;
• Resend ;
• Google Apps Script ;
• Google Sheets ;
• Cloudflare Turnstile ;
• Nginx ;
• systemd ;
• VPS ;
• déploiement automatisé via GitHub.

Une première infrastructure commerciale

Le projet est progressivement passé d'une idée de landing page à une première couche complète d'acquisition pour KGM.

Le site ne sert pas uniquement à présenter le produit.

Il permet désormais de :

• présenter la vision de KGM ;
• simuler certaines expériences du futur produit ;
• générer des demandes de démonstration ;
• envoyer les communications transactionnelles ;
• gérer le consentement newsletter ;
• synchroniser les abonnés confirmés ;
• centraliser automatiquement les prospects ;
• conserver leur historique ;
• suivre les performances d'acquisition ;
• qualifier les opportunités commerciales ;
• préparer les premières étapes du funnel de vente.

L'ensemble reste suffisamment modulaire pour évoluer progressivement avec le futur produit KGM.

Résultat

KGM dispose désormais d'un premier point de contact complet avec ses futurs utilisateurs.

La landing permet de présenter un produit encore en construction sans masquer cet état, tout en donnant une représentation concrète de ce que pourrait devenir l'expérience finale.

Le projet m'a demandé de travailler à l'intersection de plusieurs disciplines : product design, storytelling, frontend avancé, backend, sécurité, infrastructure, acquisition, SEO et automatisation commerciale.

L'enjeu n'était finalement pas simplement de construire une landing page esthétique.

Il était de construire le premier point de contact crédible entre KGM et ses futurs utilisateurs, tout en donnant à l'équipe les premiers outils nécessaires pour transformer cet intérêt en opportunités commerciales.