Étude de cas · 2026

Caline

Une application mobile douce et rassurante pour suivre la santé et protéger son animal de compagnie.

Caline
Rôle
Product designer et porteur du projet : cadrage, UX, UI mobile, documentation produit
Durée
Depuis septembre 2026
Équipe
Solo, avec Claude Code pour le développement
Outils
Figma · Notion · Expo / React Native · Supabase
Statut
En cours
Contexte

Le problème de départ.

Le carnet de santé, les rappels de vaccins, les ordonnances et la fiche de recherche d'un animal perdu vivent rarement au même endroit. Caline les réunit dans une seule application mobile, avec une contrainte de ton forte : rassurer sans jamais diagnostiquer, et ne jamais remplacer un vétérinaire.

Pourquoi ce projet

Le cadre et les enjeux.

Le produit s'adresse d'abord aux propriétaires d'animaux, avec un lancement visé au Maroc. Il touche à des données sensibles (santé, localisation, documents) et à des moments émotionnels (un animal malade, un animal perdu). Chaque écran doit donc être chaleureux, lisible par quelqu'un de stressé, et irréprochable sur la confidentialité.

Analyse UX

Les frictions identifiées.

Friction 01

Un propriétaire dont l'animal est perdu est en panique : il ne lit pas, il ne remplit pas de formulaire.

Impact

Le mode animal perdu doit tenir en trois interactions, avec de gros boutons et presque aucun texte à lire.

Friction 02

Le vocabulaire médical et les alertes rouges culpabilisent ou inquiètent inutilement.

Impact

Une charte de ton explicite : jamais « alerte », « anomalie » ou « diagnostic », jamais de rappel « en retard » en rouge.

Friction 03

Une application de santé qui demande tout au départ fait fuir.

Impact

Au démarrage, seuls le nom et l'espèce de l'animal sont obligatoires. Le reste vient plus tard, une seule invitation de complétion à la fois.

Friction 04

Partager la fiche d'un animal perdu peut exposer son propriétaire.

Impact

La fiche publique suit une liste blanche stricte : aucune adresse, aucune donnée médicale, un contact choisi explicitement.

Process

Comment le projet a été mené.

  1. 01Cadrage : documenter avant de dessiner
  2. 02Principes : un ton et des interdits
  3. 03Maquettes : quatre parcours, un fichier Figma
  4. 04Suite : du Figma au code
Cadrage : documenter avant de dessiner

Avant la première maquette, le périmètre est posé par écrit : une documentation produit complète et neuf décisions d'architecture (ADR), toutes acceptées. Notion sert de source de vérité produit, le dépôt Git de source de vérité technique. Rien n'est inventé : ce qui n'est pas décidé est marqué « à définir ».

Principes : un ton et des interdits

La règle la plus visible du produit est l'écriture. Caline appelle l'animal par son prénom, n'écrit jamais de jargon clinique, n'affiche aucun score ni pourcentage de complétion, et ne crée jamais un rappel à la place de l'utilisateur. La charte « Care & Family » vise un produit chaleureux, familial et sérieux, jamais froid ni anxiogène.

Maquettes : quatre parcours, un fichier Figma

Le fichier Figma couvre l'onboarding de la découverte à la première action utile, l'accueil et le carnet de santé, la protection (fiche d'urgence, animal perdu, fiche publique), puis le partage avec un vétérinaire et les réglages. Chaque écran respecte la même règle : trois interactions maximum pour une tâche courante, et un compagnon actif toujours visible.

Suite : du Figma au code

Le socle technique est choisi : Expo, React Native et TypeScript pour l'application, Supabase pour l'authentification, le stockage privé et les règles d'accès. Le développement démarre par le modèle de données et la sécurité, avant l'interface.

Key decisions

The trade-offs that mattered.

Décision 01

Demander le rôle de l'utilisateur à la création du compte ou déduire son usage plus tard

Arbitrage
Un choix « Propriétaire / Compagnon » ambigu embrouille l'onboarding. Aucun choix rend impossible la distinction entre propriétaires et vétérinaires.
Choix retenu
Un rôle de compte explicite : « Mon compagnon » ou « Les animaux des autres », définitif pour ce compte.
Pourquoi
Le choix reflète un vrai usage (soigner son animal ou suivre ceux des autres) et simplifie les droits d'accès. L'écran dit clairement que ce choix est définitif.
Décision 02

Demander la permission de notification au lancement ou au premier rappel

Arbitrage
Au lancement, l'utilisateur ne voit pas encore l'intérêt et refuse. Plus tard, on risque de la demander trop tard.
Choix retenu
Au moment de créer le premier rappel, avec une phrase d'explication et un « Pas maintenant » toujours possible.
Pourquoi
La demande a un sens concret (« Être prévenu le jour J ? »). En cas de refus, le rappel reste visible dans l'application : le refus ne casse rien.
Décision 03

Créer automatiquement le prochain rappel après un vaccin, ou le proposer

Arbitrage
L'automatisme fait gagner un tap mais décide à la place de l'utilisateur, et Caline ne doit pas calculer de dates médicales.
Choix retenu
Le rappel est proposé, jamais créé sans l'utilisateur, avec une date choisie avec son vétérinaire.
Pourquoi
Respecte la règle fondatrice du produit : Caline ne remplace pas le vétérinaire et n'invente aucune recommandation.
Décision 04

Rendre la fiche d'un animal perdu la plus complète possible ou la plus sobre

Arbitrage
Plus d'informations aident à reconnaître l'animal, mais exposent aussi le propriétaire et son animal.
Choix retenu
Une liste blanche stricte : photo, nom, espèce, race, couleur, signes distinctifs, puce, zone approximative, date, contact choisi.
Pourquoi
Aucune adresse, aucune donnée médicale, et un lien désactivable en un tap qui devient immédiatement invalide. La sécurité passe avant l'exhaustivité.
Exploration UI

Les écrans finaux, et leur intention.

Onboarding : un écran d'ouverture cuivré et sa promesse (« Avec eux, à chaque instant. »), puis deux actions, un compte créé en moins d'une minute, puis un premier compagnon présenté avec seulement son nom et son espèce comme champs obligatoires. L'accueil ne dépasse jamais cinq éléments.
Onboarding : un écran d'ouverture cuivré et sa promesse (« Avec eux, à chaque instant. »), puis deux actions, un compte créé en moins d'une minute, puis un premier compagnon présenté avec seulement son nom et son espèce comme champs obligatoires. L'accueil ne dépasse jamais cinq éléments.
Santé et confidentialité : un carnet organisé par rubriques sans interprétation, une permission de notification demandée seulement au premier rappel, et un écran « Vos données, vos choix » où chaque consentement se révoque séparément.
Santé et confidentialité : un carnet organisé par rubriques sans interprétation, une permission de notification demandée seulement au premier rappel, et un écran « Vos données, vos choix » où chaque consentement se révoque séparément.
Protection : fiche d'urgence consultable hors ligne, activation d'une fiche animal perdu en trois interactions, puis fiche publique à liste blanche stricte. La palette reste chaude : cet écran ne doit jamais ressembler à une alarme.
Protection : fiche d'urgence consultable hors ligne, activation d'une fiche animal perdu en trois interactions, puis fiche publique à liste blanche stricte. La palette reste chaude : cet écran ne doit jamais ressembler à une alarme.
Résultats

Ce qui a été livré, ce que j'ai appris.

3
interactions max
pour activer la fiche d'un animal perdu
4
onglets
Accueil, Santé, Protection, Réglages
9
ADR acceptées
chaque décision structurante est documentée
Ce que je ferais autrement

Documenter avant de dessiner a évité les écrans décoratifs : chaque maquette répond à une règle écrite. Le risque principal du produit n'est pas technique mais éditorial : un seul mot mal choisi peut transformer un outil rassurant en source d'angoisse. À ce stade, aucun test avec de vrais propriétaires n'a encore eu lieu et toutes les données des maquettes sont fictives. La prochaine étape est de livrer le socle Expo et Supabase, puis de tester le mode animal perdu avec cinq propriétaires pour mesurer le temps réel d'activation.