Prototype fonctionnel et test utilisateur pour chefs de produit et designers.
Testez un parcours où le prix se recalcule à chaque choix et où chaque réponse arrive dans une collection. Vous le modifiez entre deux sessions sans attendre que l'équipe de développement se libère, en partant d'une description ou de vos écrans importés.
Mis à jour le
Démo : Lumen Stores, fabricant fictif de stores sur mesure à Toulouse, et le configurateur que sa cheffe de produit met à l'épreuve, construit avec Kubbler.
Les sections, nommées
L'arborescence de l'accueil : chaque ligne désigne une section (le récit, les trois produits, les étapes de la cote à la pose, les questions) avec son composant à droite.
Un prix relié à la règle
Dans la page en cours d'édition, la phrase de la règle montre ses variables (perSqm, motorPrice, depositPercent) : l'accueil lit la règle en base au lieu de recopier des chiffres.
Lire la règle, la recalculer
Le bloc configurator lit la règle par la route getRule et envoie la commande par checkout, qui refait le calcul côté serveur avant d'écrire dans la collection configurations.
La règle, écrite sur l'accueil
L'accueil publié énonce la règle v3 (180 € le m², +190 € pour le moteur, +12 % pour l'occultant) et chiffre un store banne de 400 x 300 cm, toile écrue, manivelle : 2 160 €.
Lumen Stores, une démo construite avec Kubbler.
Lumen Stores fabrique et pose des stores bannes, des volets roulants et des stores intérieurs sur mesure depuis son atelier de Gabardie, à Toulouse. Sa cheffe de produit, Claire Fabre, y teste un configurateur avant de le confier à une agence : le prix suit chaque cote et chaque option, et un acompte de 30 % se paie par carte.
3 produits, 5 coloris, des cotes bornées par produit (store banne de 150 à 600 cm de large)
Une règle en 4 valeurs : prix au m², moteur, supplément occultant, acompte
4 versions de la règle, de 160 à 180 € le m², chacune gardée avec ses configurations
Lumen Stores, Claire Fabre et les testeurs sont fictifs, les configurations sont des données de démonstration et l'acompte passe par Stripe en mode test.
Le site en entier, page par page
Chaque vignette est une page complète de la démo, telle qu'un visiteur la voit. Sur ordinateur, passez dessus pour la faire défiler.
Une session de test, suivie depuis Kubbler.
Ce que votre testeur a sous les yeux, et ce que Kubbler vous en montre au même moment : vous n'avez plus à reconstituer la session à partir de vos notes.
Le testeur pose ses cotes
Store banne, 450 cm de large et 270 cm d'avancée, réglés au curseur. Le dessin à l'échelle suit, et le cadre de droite chiffre déjà la toile : 450 x 270 cm à 180 € le m², 2 187 €.
L'accueil, dans l'Atelier
Vous voyez l'arborescence de la page à gauche et la page à droite, avec les expressions qui la relient aux données. Entre deux sessions, un titre, une photo ou une réponse de la FAQ se reprend ici, en Dev.
Il lit le calcul, ligne par ligne
Toile occultante brique, moteur radio : 2 187 € de toile, 262 € pour l'occultant, 190 € pour le moteur, 2 639 € au total. Le testeur réagit à ce prix-là, plus à une maquette figée sur 640 €.
La règle de prix, en quatre champs
Prix au m², moteur, supplément occultant, acompte : Claire Fabre passe le m² de 180 à 165 € et voit l'effet sur quatre configurations types avant de publier. La v4 met le store banne de 400 x 300 cm à 1 980 € au lieu de 2 160 €.
Coordonnées, puis acompte
Camille Roques, Toulouse, 31500 : le code postal sert au relevé de cotes à domicile, en Haute-Garonne et dans les départements voisins. « Payer l'acompte de 792 € » règle 30 % par carte, et le solde de 1 847 € se paie à la pose.
Une configuration, une version
La configuration entre dans la collection configurations : référence LS, cotes, surface, toile, coloris, moteur, prix, acompte, état du paiement et ruleVersion, le numéro de la règle qui l'a chiffrée. En production, la table se lit sans pouvoir rien y modifier.
Captures : Lumen Stores, configurateur d'un fabricant fictif de Toulouse construit avec Kubbler, configurations de démonstration, acompte en mode test Stripe.
Chaque configuration reçue porte le numéro de la règle qui l'a chiffrée.
Entre deux sessions, Claire Fabre publie une nouvelle version de la règle ; le testeur suivant voit le nouveau prix, et sa configuration arrive en haut de cette table avec ce numéro. En une semaine, trois versions (160, 170 puis 180 € le m²) ont chacune reçu leurs configurations, et l'écran les met côte à côte. Le serveur recalcule chaque prix avec la règle en vigueur : le montant affiché dans le navigateur ne décide pas de ce qui est encaissé.
21 configurations reçues
En haut : 21 configurations, 13 acomptes payés, 7 101 € encaissés en acomptes, 1 540 € de panier moyen.
Les versions comparées
La v3 en vigueur (180 € le m²) compte 10 configurations et 1 562 € de panier moyen, la v2 8 configurations à 1 622 €, la v1 3 à 1 248 €.
Signée v3, acompte payé
Olivier Gaubert, à Pibrac : store intérieur de 160 x 240 cm à 964 €, 289 € d'acompte payés, et la pastille v3 en bout de ligne.
Ce qui est en place avant la première session, ce que vous changez entre deux.
Pour qu'un testeur ouvre votre parcours depuis chez lui, il faut un hébergement, une base de données et un bandeau cookies conforme. Ils sont déjà là : votre préparation porte sur le parcours.
Notre part
Ce qui ne figure dans aucun de vos tickets, et doit pourtant marcher dès la première session.
Une base pour régler, une pour tester
Vous réglez le parcours sur l'aperçu, qui a sa propre base. Les réponses des testeurs arrivent dans la base en ligne, que Kubbler affiche en lecture seule.
Un lien à envoyer
Publié en HTTPS depuis les serveurs d'OVHcloud en France, le parcours écrit dans une base qui n'appartient qu'à votre projet, sauvegardée automatiquement.
Le consentement des testeurs
Le bandeau cookies refuse tout par défaut, puis applique le choix du testeur sur chaque écran du parcours.
Votre part
Ce que les sessions vous apprennent, et que vous corrigez avant la suivante.
La règle de prix
Tarif de base, supplément par option, plafond : les valeurs du calcul se changent dans l'Atelier, et la session suivante teste la nouvelle version.
Les étapes et les libellés
Une question en moins, un libellé plus court, un bloc déplacé : vous le faites dans l'Aperçu, ou vous le demandez à l'IA.
Votre design
Vos couleurs et vos polices dans la charte graphique, ou vos écrans importés depuis un fichier HTML, un .zip ou Figma.
Le testeur change une option, le prix affiché ne bouge pas.
Vous préparez cinq sessions de test sur un nouveau parcours de souscription. Dans le prototype, le tarif reste celui que vous avez dessiné, quels que soient les choix du testeur, et les champs n'acceptent aucune saisie. Alors vous lui demandez d'imaginer le reste, et ce que vous observez devient sa réaction à une maquette.
Faire calculer ce prix demande un développeur, et l'équipe est prise jusqu'au trimestre prochain. Un outil de prototypage sans code peut brancher une formule, au prix d'un outil de plus à apprendre et d'un parcours que le développement refera de toute façon. Une agence peut le faire, sur devis, pour un parcours qui changera après la première session. Les outils qui génèrent une app par IA donnent un parcours qui calcule dès le premier soir, mais personne ne sait dire où partent les réponses des testeurs, ni ce que l'équipe technique pourra en reprendre.
Dans Kubbler, le parcours est une application : les étapes sont de vrais écrans, la règle de prix une valeur calculée que vous lisez et modifiez dans l'Atelier, et chaque réponse s'enregistre dans une collection de votre projet. Entre deux sessions, la nouvelle règle s'essaie sur l'aperçu avant d'être republiée pour le testeur suivant. Quand le développement s'en saisit, il ouvre le même projet et y lit les mêmes règles.
Ce que ça coûte
Un projet et 500 sparks par mois, le budget qui paie les générations de l'IA. Des packs s'ajoutent si vous en voulez plus.
Avec votre nom de domaine : 44 € HT par mois.
Sans engagement. Le nom de domaine lui-même se paie à part.
Voir tous les tarifsCe qu'il faut préparer
Le parcours à tester, étape par étape, avec ce que le testeur saisit à chacune.
La règle de calcul, même approximative : un montant de départ, puis chaque choix qui l'augmente ou le réduit.
Les questions que chaque session doit trancher, et ce que vous comparerez d'une version à l'autre.
Vos écrans en fichier HTML ou dans Figma, si vous partez d'un design existant.
Des contenus réalistes (vrais libellés, textes longs, cas limites) pour éprouver la mise en page.
Rien d'autre : ni cahier des charges, ni maquette.
Les questions qu'on nous pose.
Y compris celles dont la réponse est « pas encore ».
Un prototype cliquable enchaîne des images d'écrans. Ici, chaque champ accepte une saisie et la contrôle, le montant se calcule à partir des réponses, et chaque parcours terminé est enregistré. Figma reste l'outil pour explorer, et vos écrans peuvent servir de point de départ.
Oui, dans un projet existant, avec un jeton Figma et la clé du fichier. Un fichier HTML, ou un .zip jusqu'à 16 Mo, fonctionne aussi. Les écrans deviennent des sections modifiables aux couleurs du projet, et l'import signale ce qu'il n'a pas su convertir : prévoyez une passe de reprise dans les éditeurs.
Oui, avec la brique Paiement : le testeur paie par carte via Stripe et reçoit son reçu par e-mail. Sans elle, le parcours s'arrête au récapitulatif et à l'envoi de la réponse, ce qui permet déjà de tester la compréhension de l'offre et la réaction au prix.
Pas encore : il n'y a dans l'application ni outil de mesure d'audience, ni entonnoir, ni enregistrement de session. Vous avez les réponses enregistrées : en les comparant au nombre de testeurs invités, vous savez qui est allé au bout, sans savoir où les autres se sont arrêtés.
Le Starter, 29 € HT par mois, comprend un projet. Le parcours en ligne demande en plus un hébergement : 15 € HT mensuels avec votre propre nom de domaine, 5 € HT mensuels avec une adresse kubbler.app. Sans engagement : vous pouvez arrêter une fois la campagne de tests terminée.
Préparez la prochaine session de test sur un parcours qui calcule.
Vous partez d'une description du parcours ou de vos écrans importés. Vous relisez chaque étape et sa règle de calcul, puis vous envoyez le lien à vos testeurs.
Elle rejoint le projet dans Kubbler, avec le rôle que vous lui donnez : lecteur, éditeur ou administrateur. Dans l'Atelier, elle lit la règle de prix, les champs obligatoires et la chaîne jusqu'aux collections, et elle peut exporter la description de l'API en OpenAPI 3.0 ou en collection Postman. Le code, lui, ne s'exporte pas.