Jour 2 : De l'idée au prototype

Hello la team,

L’objectif de la deuxième journée est de valider les fonctionnalités que nous allons développer.

Avant de se lancer tête baissée dans la création de maquettes (wireframes), il est crucial de bien définir l’objectif de l’application. Je vais vous montrer ma méthode en 4 étapes clés pour définir un parcours utilisateur fluide et s'assurer que l'on ne construit que des fonctionnalités utiles.

AU MENU :

• Etape 1 : La collecte des données

• Etape 2 : L’impact mapping

• Etape 3 : Les spécifications

• Etape 4 : Le wireframing

• Liens utiles

Bonne lecture !

Vibecoding
Étape 1 : La centralisation des données

Le point de départ est de tout rassembler au même endroit. On centralise l'ensemble des connaissances sur le projet pour avoir une vision claire.

Dans mon cas, j'ai réuni dans la base de connaissance de notebookLM :

• Le Google Sheet initial du projet.

• Le transcript de la vidéo de présentation.

• Un brief qui résume les objectifs.

N'hésitez pas à ajouter à cette base tout contexte utile, comme des retranscriptions d'entretiens, des études de marché ou des analyses concurrentielles. Pensez aussi à inclure vos propres notes : réflexions, contraintes techniques ou hypothèses à vérifier.

Vibecoding
Étape 2 : La cartographie (Impact Mapping)

Une fois le contexte établi, il faut traduire votre objectif global en fonctionnalités concrètes. Pour ça, j'utilise l'Impact Mapping dans notebookLM.

C'est une technique de visualisation qui connecte directement les objectifs business aux fonctionnalités à développer. Elle vous force à répondre à 4 questions structurantes :

1. Pourquoi ? (L'objectif principal à atteindre)

2. Qui ? (Les acteurs qui peuvent vous aider à atteindre cet objectif)

3. Comment ? (Les changements de comportement que vous voulez provoquer chez ces acteurs)

4. Quoi ? (Les fonctionnalités concrètes à livrer pour générer ces changements)

En créant cette carte, on s'assure que chaque fonctionnalité proposée est directement liée à un objectif mesurable. C'est le meilleur moyen d'éliminer le superflu et de prioriser logiquement le travail.

Vibecoding
Étape 3 : La spécification (User Stories & Specs)

Avec une carte des impacts validée, on peut passer à la description détaillée du produit.

1. Les User Stories (US) : On traduit chaque fonctionnalité de la carte en "User Story". Ce format simple décrit le besoin du point de vue de l'utilisateur. La structure est toujours la même : « En tant que [Acteur], je veux [Action/Fonctionnalité] afin de [Bénéfice/Impact] ».

1. Les Spécifications Fonctionnelles : C'est ici qu'on ajoute le niveau de détail qui fait toute la différence. Pour chaque User Story, on décrit le "comment" technique et comportemental de la fonctionnalité, pour que rien ne soit laissé au hasard (déroulement idéal, règles de gestion, cas d'erreurs, etc.).

Vibecoding
Étape 4 : Le Wireframing

C'est la dernière étape, celle où le projet prend enfin une forme visuelle. Les User Stories et leurs spécifications nous servent maintenant de cahier des charges pour créer les wireframes.

Un wireframe est un squelette de votre interface. Son but n'est pas d'être beau, mais de définir la structure des écrans, la place des éléments et de valider les parcours utilisateurs.

Des outils comme Stitch alternative à Figma permettent, à partir des User Stories de créer plusieurs écrans.

Cette approche assure une traçabilité parfaite : chaque élément visuel est justifié par une User Story, elle-même liée à un objectif.

Annexes
Ressources utiles

• Episode 0 : Tuto Google Stitch

• Episode 1 : Construire le Poc VaaS

• Article précédent : Veo 3 la révolution