Branchette
Concevoir l’arbre généalogique que toute la famille comprend.
Produit, design et tech : un site complet, mené de bout en bout avec l’IA.
Contexte
Branchette est un site d’arbre généalogique familial et privé. On y construit l’arbre de sa famille, puis on le partage : chacun, de 7 à 97 ans, y voit qui est qui, et son propre lien avec chaque personne.
J’ai mené le projet de bout en bout, de l’idée à la mise en ligne : le produit, le design et la tech. L’IA m’a accompagné là où je n’avais pas les connaissances.

La page d’accueil de Branchette, à l’ordinateur et au téléphone.
Le projet en bref :
• Mon rôle : tout le projet. Produit, recherche, UX, UI, rédaction, design system et tech.
• Avec : Claude Code, l’agent de code d’Anthropic, pour écrire le code ; Astro et Cloudflare pour le site.
1. Le problème : des outils faits pour les chercheurs
Les grands sites de généalogie (Geneanet, MyHeritage, Filae…) sont pensés pour le passionné qui fouille les archives. La famille qui veut simplement regarder son arbre s’y perd : du jargon (Sosa, souche, individu), des menus partout, du petit texte, et une offre payante à chaque écran.
Personne ne servait la famille qui regarde. C’est la place de Branchette : sa différence ne se joue pas sur la liste des fonctions, mais sur la simplicité.
2. Approche : une promesse, et des principes pour la tenir
Ne pas vendre un outil pour faire sa généalogie, mais l’outil pour montrer sa famille. Une promesse en découle :
Elle a guidé chaque arbitrage. Elle vise la personne qui organise, et qui a une occasion : une cousinade, les 80 ans d’une grand-mère, Noël, une naissance. Puis tous ceux qui regardent, y compris les plus âgés, sur leur téléphone.
Les principes
• Regarder d’abord, modifier ensuite. L’arbre s’affiche tout de suite ; les outils de modification n’apparaissent que là où on en a besoin.
• Aucun jargon. « Ta cousine », « ton arrière-grand-père » ; jamais « individu » ni « Sosa ». Le site tutoie, en phrases courtes.
• Le déclic avant le compte. Pour regarder, ni compte ni mot de passe.
• Lisible à tout âge. Aucun texte sous 16 px, des boutons faciles à toucher.
• Des mots qui respectent les familles. Dans une famille, le mot « caché » fait naître le soupçon. L’interface ne l’emploie jamais, ni « masqué », ni « secret » : un lien que l’arbre ne montre pas à tous est « présenté autrement ».
3. Méthode : construire avec l’IA
L’IA m’a servi là où je n’avais pas les connaissances : l’architecture, la sécurité, les bases de données, l’hébergement. Je lui ai apporté ce qu’elle n’a pas : la connaissance du produit et des utilisateurs. Savoir ce qui compte pour une famille, trouver les mots justes, juger si un écran est évident pour une grand-mère comme pour un enfant.
Pour que ce savoir se retrouve dans chaque écran, j’ai mis en place une méthode simple.
Des règles écrites, avant le code
J’ai écrit les règles du projet, en français : le ton (on tutoie, en phrases courtes), la lisibilité, la confidentialité, ce qui est interdit. L’IA les suit à chaque changement.
Chaque décision écrite
Chaque choix est écrit, avec son contexte et les options écartées. C’est la mémoire du produit : avant de toucher à un sujet, l’IA relit ce qui a été décidé.
Des revues pour trancher
Après chaque chantier, l’IA me présente une page de revue : ce qui a changé, des captures au téléphone, et les questions ouvertes, avec deux ou trois options illustrées. Sa recommandation est marquée « Conseillé », ce qui existe déjà « En place ». Je réponds en un clic, avec une remarque si besoin : l’IA propose, je tranche.

Une question de revue : deux pieds de page à comparer, puis mon choix.
Le terrain, le jour même
Les retours des premiers utilisateurs reviennent dans le produit le jour même. Un testeur voyait tous les prénoms d’un aïeul sur sa carte, « Louis Marcel », alors que la famille l’appelait Marcel : le jour même, Branchette savait ce qu’est un prénom d’usage.
4. Solutions : chaque fonction tient la promesse
« C’est toi » : l’arbre vu depuis sa place
L’arbre s’ouvre sur la personne qui le regarde, marquée « C’est toi ». Un toucher sur quelqu’un, et Branchette dit le lien en mots : « Ta grand-tante. C’est la sœur de ton grand-père Robert. » Personne n’a besoin de connaître le vocabulaire de la généalogie.
Pour une vue d’ensemble, l’éventail range les ancêtres en anneaux autour de soi, le côté du père d’un côté, celui de la mère de l’autre.

L’éventail, et le lien dit en mots dans la fiche d’une personne (famille fictive).
Partager sans compte ni mot de passe
Branchette se partage par un lien, ou par un carton à imprimer et à offrir. On le prépare dans le site : pour qui, son droit, le titre, un mot. Dedans, l’arbre de la famille et un QR code : scanné avec l’appareil photo du téléphone, il ouvre l’arbre, sans compte ni mot de passe.
Les droits restent fins : qui regarde, qui peut modifier, qui gère. Et quand un proche ajoute quelqu’un, l’arbre se met à jour en direct chez les autres.

Le carton de Claire, ouvert, tel qu’on le prépare avant de l’imprimer (famille fictive).
L’IA dans le produit : « Remplir avec tes documents »
Remplir un arbre est la tâche la plus longue, et la plus décourageante. J’ai donc conçu une fonction qui lit les papiers de famille : un livret de famille, des actes, un vieil arbre en PDF, un croquis, ou simplement un proche qui raconte. La personne les donne à son propre assistant IA (ChatGPT, Claude, Le Chat…), avec des consignes écrites par Branchette. L’assistant répond par un bloc que Branchette lit : les personnes trouvées apparaissent dans l’arbre, marquées « Nouveau ».

Copier les consignes, choisir son assistant, puis valider l’aperçu dans l’arbre (famille fictive).
Deux choix de design font la différence :
• Rien ne part de Branchette. C’est la personne qui donne ses documents à son assistant : le site n’envoie aucune donnée de famille à un tiers, et l’IA ne coûte rien au produit.
• L’IA peut se tromper, donc on relit. Rien n’entre dans l’arbre sans un aperçu à valider, personne par personne, et l’ajout s’annule d’un geste.
Le terrain a affiné la fonction. Un utilisateur a signalé que son assistant n’avait rempli le sexe de personne, et qu’il lui faudrait « pas mal de temps » pour tout reprendre : le jour même, les consignes demandaient de toujours le déduire, du rôle ou du prénom.
Un design system pour 7 à 97 ans
Chaque écran s’assemble à partir d’un design system documenté dans un catalogue vivant : une typographie ronde, des couleurs chaudes, des textes jamais sous 16 px, des boutons faciles à toucher et des contrastes vérifiés. Et une mascotte, en dix expressions, pour accueillir, féliciter ou adoucir une erreur.

Extraits du catalogue : la typographie, les couleurs, les boutons, et les dix expressions de la mascotte.
Être trouvé sur Google
Une famille découvre Branchette en cherchant une réponse : « cousin issu de germain, c’est qui ? ». Sur ces questions, Google ne proposait que des dictionnaires. J’ai donc conçu un calculateur de parenté et des articles, des pages de parenté et des guides de généalogie, chacun avec un arbre d’exemple et ses sources.

Une page de parenté : la réponse, puis le chemin dans un arbre d’exemple (famille fictive).
Une vidéo pour le raconter
Pour présenter les nouveautés, j’ai conçu une vidéo de 42 secondes, en un seul plan : la caméra parcourt un canevas sans jamais couper, et chaque chose devient la suivante. Des papiers de famille deviennent des personnes, une date manquante se trouve dans l’Insee, un carton s’ouvre et se scanne au téléphone. Chaque passage part d’une intention (« Des papiers de famille ? », « Il manque une date ? »), montre ce qu’elle donne, puis glisse dans le suivant.
La vidéo des nouveautés, 42 secondes en un seul plan (famille fictive). Musique : « A Gentle Kind of Wonder », ROVADOR (Pixabay).
J’en ai fait la direction : l’idée du plan-séquence, le déroulé, ce que montre chaque passage, les transitions et le rythme, calé sur la musique. L’IA m’a assisté pour la fabrication : à partir de mes intentions, elle a écrit l’animation en code et l’a rendue image par image. Je l’ai guidée passage par passage, et j’ai revu chaque version jusqu’à ce que tout s’enchaîne sans à-coup.
5. Résultats & impact
18 jours
de l’idée au produit complet, en ligne
177
décisions écrites et tranchées
40
articles qui répondent aux questions des familles
1 020
impressions sur Google, trois jours après l’ouverture
📈 Résultats & impact :
• Un produit complet : création d’arbre, partage par lien ou par carton, droits par personne, arbre en direct, historique, photos, import et export GEDCOM, jusqu’à 1 000 personnes par arbre.
• Des données utiles : les 28 millions de fiches de décès de l’Insee, mises à jour chaque mois, proposent les dates qui manquent.
• Lisible à tout âge : aucun texte sous 16 px, et l’accessibilité (WCAG 2.2 AA) vérifiée à chaque changement.
• Rapide : l’essentiel s’affiche en moins de 2 secondes, même sur un téléphone lent.
• Privé : des arbres chiffrés, sans publicité, et aucune mesure d’audience dans l’arbre.
• Visible sur Google : des pages de parenté et des guides de généalogie, chacun avec son arbre d’exemple et ses sources.
Conclusion
Le site est en ligne, gratuit et sans pub, sur branchette.com. Les premières familles y ont créé leur arbre, et il évolue avec leurs retours.
L’IA m’a permis de construire ce que je n’aurais pas su coder seul. Ce qui rend Branchette simple vient de mon métier : comprendre ceux qui s’en servent, choisir les mots, trancher.


