Créer des prototypes et itérer avec l'IA : Le retour d'expérience de Lovable chez Payfit
Payfit est une solution de paie et SIRH pour TPE/PME en France, Angleterre et Espagne (18 000 clients). Sandrine combine les responsabilités de Product Manager et de développeur en JetLang (langage propriétaire de Payfit).
Le problème initial
La page des éléments de rémunération variable (primes, frais, avantages) présentait des défauts :
- Trop de boutons
- Espaces vides
- Manque de hiérarchie de l'information
- Difficulté à visualiser rapidement les éléments d'un employé
Les questionnements de Payfit :
Voici les questions que se posaient Payfit avant de démarrer l'expérimentation de Lovable :
- Est ce que l'IA peut générer des idées auxquelles on a pas pensé?
- Est ce que l'IA peut faire gagner du remps sur la phase d'iétration ?
- Est ce que l'IA peut faire gagner du temps en phase de convergence ?
Le choix Lovable
Lovable, c'est un outil d'IA prototyping qui peut être cliquable qui ressemble à ça :
Les 5 étapes de mise en place de Lovable
1. Valider les spécifications Design & Content sur Figma
Pour commencer, il est hyper important de collaborer avec le.les designer pour définir le cadre et faire une première version du prototype notamment car il est aujourd'hui impossible d'intégrer le design system dans Lovable
2. Importer les spéc de Figma sur Lovable
Utiliser le plugin Builder.io de Figma et l'exporter en un clic vers Lovable.
Résultat : quelques imperfections dans le rendu mais base solide obtenue
3. Itérer sur Lovable
Planifier ses objectifs et savoir ce qu'on veut tester générer.
Les objectifs de Sandrine chez Payfit :
- Génération d'illustrations
- Regroupement par rubriques
- Fonctionnalité "expandable/collapse"
Bonnes pratiques identifiées:
- Prompts simples et concis en français
- Les screenshots fonctionnent bien
- Faire une demande à la fois
- Exploitation de la fonction chat pour discuter avec l'IA
4. Arbitrer sur ce qu'on conserve et coder
- Sélection des éléments à conserver
- Développement en JetLang
- Collaboration avec l'équipe Brand Design pour les illustrations
- Validation en équipe avant mise en production
5. Mesurer l'impact et itérer
- Mise en production avec possibilité de rollback
- Mesure de la satisfaction, feedbacks, temps passé sur la page
- Itération continue basée sur les retours utilisateurs
Les résulats pour Payfit
Sandrine a évalué l'outil sur 3 critères, tous remplis :
- Interface reorganisée par rubriques avec les fonctionnalités expand/collapse
- Amélioration de la lisibilité et de la hiérarchie de l'information
- Gain de temps significatif sur les itérations (48 secondes de vidéo pour tout le processus)
- Génération d'idées auxquelles l'équipe n'avait pas pensé
Figma Make ou Lovable ?
Test rapide effectué : Figma Make propose des widgets non compatibles avec JetLang (langage Payfit), mais génère des idées intéressantes comme l'utilisation d'icônes.
Les Tips de Sandrine, en résumé
- Valider les spécifications design/contenu en amont
- Importer les spécifications pour éviter de partir de zéro
- Avoir une idée claire de ce qu'on veut tester
- Utiliser des screenshots et faire une demande à la fois
- Considérer l'IA comme un générateur d'idées et de brouillons
- Tester plusieurs outils (V0, Bolt.new, Claude, ChatGPT)
