Jonathan Duclos
Prototype avec I.A.
Création d'un prototype de haute fidélité en utilisant l'intelligence artificielle afin de tester rapidement avec les utilisateurs et faciliter la remise au développeur.
Voir le prototype
Mon champ d'activité
Repensez la façon de concevoir des produits et des prototypes.
Contexte et objectif
Les prototype Figma complexes sont long à créer et souvent, ne représente pas exactement le produit finale. Les tests utilisateurs requiert également plus de temps et d'explication. Les problèmes que rencontre l'utilisateur peuvent être causé par la maquette et créer de la friction et ne nous donne pas la bonne compréhension du produit.
Le prototypage haute fidélité avec l'I.A. permet de générer des prototypes complexes rapidement et de les tester tout aussi rapidement. Nous avons un flux de travail optimisé, pour tester, mais aussi pour remettre au développeur. Les intéractions sont intégré et réduit les aller retours.
Fonctionnement
Connecter Claude Code à Figma permet de garder une cohérence entre le design et le développement et réduit grandement les demandes à Claude.
GitHub permet de garder une trace des modifications apportées aux prototypes et de faciliter la collaboration entre les équipes. Ne jamais permettre à Claude de faire les push directement sur la branche principale pour éviter au maximum les risques de conflits.
Le backend est gérer par Firebase et permet de créer des prototypes dynamiques et interactifs en temps réel et de partager facilement le lien au testeur.
Après la connection, Claude Code peut générer des prototypes directement à partir des maquettes Figma, en intégrant les éléments de design et les interactions définies. Le résultat est identique à ce que nous voulons tester et ce fait en une fraction du temps.
Le prototype comporte un menu de 15 repas. L'utilisateur doit sélectionner un minimum de 6 repas, il peut changer le format sur chaque repas, changer son accompagnement, voir la description, les valeurs nutritives ainsi que les allergènes. Le prototype permet tout ça et respecte les règles et l'utilisateur ne peut pas passer à la prochaine étape sans remplir tous les critères.
Résultats
On passe plus rapidement en test et on réduit le temps de développement.
Approche et rôle
Basé sur le design system, créer des composants réutilisables et adaptables pour garantir une cohérence visuelle et fonctionnelle pour les prototypes.
Notre approche a consisté à formuler des hypothèses claires sur les besoins des utilisateurs et à les valider rapidement à travers des prototypes interactifs. Dans ce cas, comparer les cartes produits actuel à une version épurée afin de réduire la charge cognitive de l'utilisateur.
Valider les hypothèses à travers des tests utilisateurs pour s'assurer que le prototype répond aux besoins réels. Structure du questionnaire en quelques étapes simples.
Collecter des données sur l'utilisation du prototype et itérer rapidement en fonction des retours utilisateurs.