SaaS · Identité · Application · Site vitrine · IA · UX/UI
Une idée d’agent IA. Aujourd’hui, un produit complet.
Quoralo donne à une TPE un agent conversationnel qui connaît ses services, ses horaires et ses tarifs : il répond aux visiteurs jour et nuit, prend les réservations et recueille les contacts. On lui a dessiné sa marque, puis construit le site qui le vend, l’application qui le fait tourner et le chat que reçoivent les visiteurs — jusqu’au paiement.
- Client
- Quoralo
- Type
- SaaS B2B · agent IA pour TPE
- Périmètre
- Identité, site public, application, chat, paiement
- Technique
- Astro · Next.js · PostgreSQL · Stripe
Le point de départ
Un produit qui vit de la réponse donnée.
Pendant le coup de feu, le téléphone sonne et personne ne décroche. Et la plupart des questions sont les mêmes : les horaires, l’adresse, les tarifs, une table pour ce soir. Quoralo met un agent à la place du répondeur — l’entreprise le crée en quatre étapes, lui donne ce qu’il doit savoir, et le publie par un lien ou une ligne de code sur son site.
Trois publics, trois exigences. Le visiteur veut sa réponse sans compte et sans attendre. Le patron veut tout retrouver — conversations, réservations, contacts — sur son téléphone autant qu’à son bureau. Et le prospect qui découvre Quoralo doit comprendre l’offre en une page. Trois surfaces, un seul produit, et rien qui se contredise d’une surface à l’autre.
« Elle vit de l’acte qui aboutit — une conversation qui devient un contact ou un rendez-vous — et de l’argent qui suit. Ce qui la tue : un acte perdu, un calcul faux, une trace absente. »
L’identité
Deux bulles qui se répondent.
Un produit qui parle à la place d’une entreprise devait dire, d’un seul coup d’œil, ce qu’il fait. Le symbole le dessine : deux bulles qui se répondent — celle du client en vert profond, celle de l’agent en émeraude — et, là où elles se rencontrent, une troisième couleur, la menthe : la conversation qui aboutit.
Les deux bulles ont la même taille : l’agent parle d’égal à égal, avec les mots de l’entreprise. Leurs queues partent dans des directions opposées, comme deux personnes face à face. Le mot suit en Geist Bold, en minuscules, resserré.
Le client 
L’agent '/%3e%3c/svg%3e)
Quoralo -
Sur papier
-
Sur fond sombre
-
En blanc, sur le vert
-
En noir, sur la menthe
- Vert Quoralo La bulle du client 1A4D45
- Émeraude La bulle de l’agent 1FB57F
- Menthe Leur rencontre 7CFFC4
- Menthe douce Les fonds clairs C8F7DC
- Encre Le mot, les textes 0A0B0A
- Papier Le fond clair F3F4F0
96 64 48 32 24 16 
Le chat
Onze designs, un seul panneau.
Le chat est ce que voient les clients de nos clients : sur la page publique, dans le widget posé sur leur site, dans l’aperçu des réglages, dans la démonstration. Partout, c’est le même composant — ce que le patron choisit est exactement ce que ses visiteurs reçoivent.
Chaque design a sa police, sa mise en page, sa façon de présenter les suggestions. Le patron y pose sa couleur ; si elle rend un texte illisible, le panneau la déplace du minimum nécessaire pour atteindre le contraste qu’exige l’accessibilité (WCAG 2.1 AA, 4,5:1). Une couleur qui passait déjà sort inchangée.
-
Focus
Le défaut : grand titre sur deux tons, liste à icônes.
-
Éditorial
Serif, filets fins, flèches obliques.
-
Bloc couleur
En-tête en aplat, cartes qui le chevauchent.
-
Néo-brutal
Bordures de 2 px, ombres décalées sans flou.
-
Doux
Angles très arrondis, suggestions en tuiles.
-
Nocturne
Sombre, pensé pour les sites sombres.
-
Suisse
Angles droits, filets noirs, carré d’accent.
-
Verre
Translucide, flouté sur la page du client.
-
Papier
Messages sans bulle, liste à chevrons.
-
Graphite
Sombre et monochrome, sans couleur.
-
Bulle
Style messagerie, suggestions en bulles.
-
+ le widget
Le bouton flottant suit le design choisi.
Forme, fond, encre, bordure et ombre se dérivent du panneau : une seule ligne de code à poser sur le site du client.
Un produit à construire, vous aussi ?
Croissance et Référence : vous ne payez qu’une fois que ça vous rapporte 2 demandes via le formulaire, puis la souscription Sans engagement
Le parcours du visiteur
Au téléphone, le chat devient l’application.
Sur un écran de téléphone, le panneau prend l’écran entier : plus de carte posée sur une page. Avant le premier message, le visiteur apprend qu’il parle à une IA et à quoi servent ses messages — c’est le RGPD, et c’est aussi la politesse.
Réserver ne se fait pas au hasard d’une discussion : un panneau monte par-dessus la conversation, la saisie du chat s’efface, et le seul bouton principal n’apparaît qu’à la dernière étape. Le nombre de personnes vient avant la date, parce que c’est lui qui décide des créneaux ; les jours complets ou fermés sont grisés, l’heure déjà prise est barrée.
-
1 · Le consentement
-
2 · L’accueil
-
3 · La date
-
4 · L’heure
Le tableau de bord
Tout ce que l’agent a fait, au même endroit.
Le patron retrouve chaque conversation, chaque réservation, chaque contact. La barre compte ce qui l’attend — conversations non lues, réservations à confirmer — et l’agenda de la semaine ne pose jamais une réservation sur une autre : à partir de trois au même créneau, elles se regroupent en une carte qui dit le nombre de couverts.
Au téléphone, la navigation descend dans la zone du pouce : cinq places, les conversations au centre parce que c’est l’acte qui fait vivre le produit, le compte à droite. Chaque cible fait 48 px, le plancher de Material Design.
-
Conversations
Le fil de chaque échange, l’agent qui l’a tenu, et le contact quand le visiteur l’a laissé.
-
Réservations
La semaine en colonnes, confirmer ou annuler d’un geste, un rappel envoyé au client avant sa venue.
-
Contacts
Un score d’intention, la preuve du consentement, et l’export en CSV, en JSON ou en classeur Excel.
-
Statistiques
Les conversations du mois, les questions restées sans réponse, et ce qu’il reste de la formule.
Données de démonstration : « Le Comptoir » et ses clients n’existent pas — les écrans, si.
Sous le capot
Ce qu’on ne voit pas, et qui tient tout.
Une réservation perdue ou un prélèvement faux ne se rattrapent pas avec une belle interface. Rien de ce qui suit ne se voit à l’écran — c’est pourtant là qu’est passé l’essentiel du travail.
-
Deux clients, une seule table
Les réservations s’écrivent sous un verrou de ligne PostgreSQL, et la table se choisit sous ce verrou. Mesuré sur une vraie base : trente couples lancés au même instant sur six tables, six passent. Sans le verrou, vingt-cinq passaient.
-
Le paiement
Quatre formules, de la gratuite à l’agence, encaissées par Stripe. La formule qui débloque une fonctionnalité se calcule depuis la grille, elle ne se recopie jamais — et le serveur la vérifie à chaque appel.
-
Le RGPD, prouvé
Le consentement d’un contact est horodaté et conservé avec lui. Chaque version des conditions acceptée est enregistrée, une nouvelle version s’annonce trente jours avant de s’appliquer. Base et exécution à Francfort.
-
Le modèle
Gemini 2.5 Flash par défaut, GPT-4o-mini en option, des consignes rédigées en français. Le score d’un contact vient du modèle ; s’il ne répond pas en six secondes, un barème prend le relais. Un contact n’est jamais perdu pour un appel raté.
-
Treize courriels
Confirmation, modification, rappel et annulation d’une réservation, alerte de quota, préavis des conditions : chacun son gabarit, envoyé par Brevo, prestataire français.
-
Deux domaines
Le site sur quoralo.com, l’application sur app.quoralo.com, une session qui traverse les deux. Les adresses déjà imprimées dans des QR codes ou posées sur le site des clients n’ont pas bougé d’un octet.
Le site public
Un site qui ne charge que ce qu’on lit.
Le site public vivait dans la même application que le produit : chaque page expédiait entre 188 et 260 kB de JavaScript, pour du texte. On l’a sorti dans une application Astro à part. Résultat : 36 pages, et aucun fichier JavaScript construit — du HTML et une feuille de style partagée.
Ce que le site et le produit doivent dire pareil — les prix, les volumes, les textes contractuels, la palette, les balises de référencement — vit dans un noyau commun. Un prix n’est écrit qu’une fois : la page Tarifs se construit depuis la grille du produit, et un test refuse qu’un montant soit recopié en dur.
Six pages métier, six guides d’intégration (WordPress, Shopify, Wix, Webflow, Squarespace, PrestaShop), un journal, un centre d’aide. Et un détail qui ne se voit qu’en le mesurant : dessiné pour un écran de 16 pouces, le site se réduit en proportion sur un 14 pouces, sans une ligne de JavaScript.
- 188–260 kB
- de JavaScript par page, avant
- 0
- fichier JavaScript construit, après
- 36
- pages publiques
Le système
Une couleur, une seule définition.
Le vert de Quoralo était écrit 213 fois dans 25 fichiers. Il n’en reste qu’une définition, partagée par le site et l’application, et un test refuse qu’il revienne en dur. Même règle pour chaque couleur de la palette : une valeur figée ne suit pas le mode sombre.
Le mode sombre suit le réglage du système. On n’a pas doublé deux mille classes : on a retourné les jetons, et le contraste de chaque paire se calcule dans les tests plutôt qu’à l’œil.
Ce qu’on a construit
Six mois, dans cet ordre.
Le socle d’abord, la solidité ensuite, la finition en dernier — et à chaque étape, ce qui existait déjà a été remesuré avant d’être touché.
- Mars 2026
Le socle
Créer un agent en quatre étapes, le nourrir d’une base de connaissances, le publier, encaisser l’abonnement. Le premier commit date du 30 mars.
- Mai 2026
Les données passent à PostgreSQL
Toute la base quitte Firestore pour PostgreSQL et Prisma, en une seule bascule. Firebase ne sert plus qu’à l’authentification.
- Septembre 2026
Relu, réservable, lisible partout
Une relecture indépendante en dix passes, la réservation réintégrée, le mode sombre, la navigation au pouce, et le produit sur son propre domaine.
- Fin septembre 2026
Le site passe à Astro
Les pages publiques quittent l’application, un noyau partagé tient la frontière, et le domaine bascule le 30 septembre.
- Octobre 2026
Onze designs, une table sans faille
Le chat public rend le panneau que le client a choisi, et deux réservations simultanées ne prennent plus jamais la même table.
La méthode
Chaque chiffre mesuré, chaque défaut reproduit.
Un produit qui encaisse de l’argent et prend des engagements ne se vérifie pas à l’œil. Une suite de tests tourne à chaque modification ; des bancs mesurent au navigateur ce qu’aucun test ne voit — un débordement, une carte posée sur une autre, un texte trop petit ; et le produit entier a été relu par un agent qui ne connaissait aucune de nos justifications. Une trouvaille n’était corrigée qu’après avoir été reproduite.
- 1 382
- tests automatisés, tous verts
- 11
- bancs de mesure au navigateur
- 110
- trouvailles de la relecture indépendante
- 107
- corrigées, les trois autres documentées
Le résultat
Un site, une application, et un chat que chaque client habille.
Quoralo est passée d’une idée à une marque qu’on reconnaît et à un produit qu’on peut ouvrir — un symbole décliné sur tous les fonds, 36 pages de site, 14 écrans d’application, 39 routes d’API et 11 designs de chat, des réservations et des paiements éprouvés avant d’être affichés.
Ce que cette page ne montre pas : aucun chiffre d’usage — ni conversations réelles, ni réservations, ni revenu. Les écrans du tableau de bord sont remplis de données de démonstration, et on ne remplit pas la place avec des nombres inventés. Ce qui est montré ici se vérifie en ouvrant le site.
Un produit à construire, de la première page au paiement ?
Site, application, IA : comme pour Quoralo. 15 minutes pour en parler.