Développer une plateforme coûte cher : ergonomie, design, développement, gestion de projet … La facture peut très vite s’alourdir lorsqu’on fait appel à des freelances, à une agence, ou qu’on recrute une équipe. Plus l’investissement en temps et en argent est important dans un MVP, plus le risque est important. Ça tombe bien, il existe une multitude d’outils qui vous permettent de réaliser un MVP totalement fonctionnel sans savoir coder.

Par MVP, je ne parle pas d’une simple landing page. Je parle d’une plateforme totalement fonctionnelle et utilisable, avec “base de données”, notifications SMS, gestion via Google Sheet … Alors oui, ce n’est pas scalable ni optimisé. Ça demande plus de temps de main d’oeuvre de maintenir ce type de plateforme plutôt qu’un site qui aura été développé exactement pour vos besoins.

Mais ce n’est pas un problème, bien au contraire, et ce pour plusieurs raisons :

• Ça vous aura coûté 50x moins cher de réaliser votre MVP (au bas mot).
• Vous gèrerez manuelle toute les étapes, qui seront plus tard automatisées par un algorithme, ce qui est indispensable pour bien comprendre le besoin de vos clients.
• Puisque les fonctionnalités sont limitées lorsqu’on réalise ce type de plateforme, vous serez obligé de vous concentrer sur votre proposition de valeur.

Si les mots proposition de valeur, MVP, besoin client sont vagues pour vous, n’hésitez pas à vous inscrire à la formation gratuite en 7 jours (en bas de page). On y parle des bases du MVP, et de l’état d’esprit indispensable à avoir pour monter ce genre de projet (c’est totalement gratuit).

Pour vous prouver que c’est possible, on va se baser sur le modèle d’un site bien connu : AirBnb (donc une plateforme de location). On ne va bien entendu pas refaire leur ergonomie, ou toutes les petites fonctionnalités liées à l’espace membre. On va se concentrer sur leur proposition de valeur : proposer des logements de qualité en location à leur client, avec une expérience très simple. De notre côté, on ne va pas louer des maisons, mais des bateaux (et notre projet va donc s’appeler BnBoat).

L’idée est donc de développer une plateforme de location de bateaux, avec tout le process qui va avec (gestion des réservations, du catalogue, paiement, notifications des clients et propriétaires …). On ne veut pas une vitrine toute bête, on veut un site fonctionnel, qui puisse être exploité pour tester une idée très rapidement.

Très important : nous réalisons ici un MVP. L’unique objectif de ce MVP est de valider notre idée par l’apprentissage. Nous proposons au client un produit qui teste notre proposition de valeur. Ce produit peut faire l’affaire pour gérer vos premiers 500 clients, mais si votre idée est validée, il faudra passer sur un site développé spécifiquement pour vous.

Déroulement de l’expérience

Voilà les différentes étapes de la réalisation de notre MVP

1. Introduction, cadrage et coût
2. Créer un site responsive avec Webflow
3. Gérer les contenus avec Webflow
4. Créer les formulaires (réservation & propriétaire)
5. Gérer les disponibilités avec Google Sheet
6. Développer le process de réservation
   1. Affichage des réservations dans Google Sheet
   2. Notification des admins
   3. Paiement et validation réservation
   4. Implémenter le process manuel
   5. Synchroniser les disponibilités avec Webflow
7. Mise en place d’un dashboard de suivi

1. Introduction et coût

1.1. Cadre fonctionnel : le product backlog

Pour cadrer un minimum les fonctionnalités de notre MVP, nous avons réalisé un product backlog très rapide. Pour rappel, le product backlog est un tableau qui doit être fait pour tout MVP, et qui permet de regrouper et prioriser toutes les fonctionnalités en restant centré sur l’utilisateur. On liste donc les fonctionnalités, sous le format suivant : “En tant que [cible], je peux [action]”. On regroupe ensuite ces fonctionnalités par grande catégorie, et on met tout ça dans un tableau (comme Trello par exemple).

Pour voir ce à quoi ressemble le product backlog de BnBoat : https://trello.com/b/74Yb3E8V/bnboat

On doit donc :

• Proposer une liste de bateaux, regroupés par port, aux clients
• Pouvoir gérer ces listes facilement
• Recevoir les demandes de façon automatisée
• Gérer toutes les étapes liées à la réservation
• Centraliser les locations dans un Google Sheet

1.2. Les outils et services

Vous l’avez bien noté, on ne veut pas coder pour réaliser ce MVP. On va donc devoir trouver des outils qui vont nous permettre de réaliser chacune des “micro-tâches” de notre produit. Pour connecter ces outils entre eux, il existe un super service (qui sera votre meilleur ami pour de nombreux MVPs), nommé Zapier. Pour finir, pour réaliser le site, nous allons utiliser l’outil Webflow.

Petite note : cette sélection est totalement subjective. Ce sont selon moi les meilleurs outils pour réaliser le MVP attendu, mais il existe bien entendu des dizaines d’autres services sur le marché.

On va donc commencer par les plus “gros” outils (qui seront aussi fatalement les plus chers). Petite note sur cette notion de coût : il est souvent beaucoup plus rentable de payer un service qui fait les choses bien, plutôt que d’essayer d’arriver au même résultat avec des outils gratuits. Souvent, l’investissement fait dans un outil vous gagnera tellement de temps que la question des 10-20-30$ par mois ne se pose même pas. Gardez également en tête qu’un MVP est temporaire : en 3 mois, vous êtes fixés sur la prochaine étape (est-ce que je fais développer un site ou est-ce que j’abandonne).

Webflow – Créer un site sans coder

Webflow n’est pas juste un outil permettant de construire un produit en drag & drop. C’est un véritable outil qui vous permet de créer un code propre et réutilisable, puisque vous réalisez votre site en pensant comme un développeur (mais toujours sans coder). Ça vous parait flou ? On en verra plus au moment de réaliser le site !

Webflow propose pas mal de fonctionnalités, mais pour nous, l’offre à 36$/mois est largement suffisante. Pour ce prix, vous aurez accès à toute l’interface de création de site, à toutes les fonctionnalités (sauf le e-commerce), et aurez un hébergement.

À prévoir également, l’achat d’un nom de domaine (de l’ordre de 10€/an).

Vous pouvez créer un compte gratuit pour tester l’outil directement à l’adresse suivante.

Zapier – La logique de votre MVP

Zapier est certainement l’outil le plus important pour la réalisation d’un MVP. Étant moi-même développeur, je l’utilise quasiment tous les jours pour automatiser des tâches pour lesquelles je n’ai pas le temps de développer un algorithme.

Zapier pour se résumer en cette phrase : “Si il se passe ça, fais ceci”. En gros, vous allez pouvoir connecter des milliers de service entre eux. Au hasard :

• Quand j’ajoute une entrée dans Google Sheet, rajouter un élément dans Webflow
• Quand je valide un formulaire sur Google Forms, envoyer une notification SMS
• Quand quelqu’un s’inscrit à ma newsletter, l’ajouter dans une audience Facebook Ads

C’est Zapier qui sera le coeur de notre MVP, et qui automatisera tout un tas de tâches que nous aurions normalement du faire manuellement.

Zapier propose une offre gratuite, mais elle est insuffisante pour un MVP en cours de test. Il faudra s’orienter vers l’offre à 20$ par mois, qui autorise un total de 1000 tâches par mois (donc une trentaine par jours).

Les autres outils

Nous allons également utiliser les outils et services suivants :

Google Sheet : tableur en ligne de Google, utile pour gérer les locations.
Google Forms : système de formulaire de Google, pour noter tunnel de réservation.
Slack : messagerie en ligne qui nous permettra de centraliser les informations, d’échanger en équipe et d’être notifié dès qu’une action a lieu.
Plivo : service d’envoi de SMS, pour les notifications client et propriétaire.

Avec tous ces outils, nous allons pouvoir réaliser un MVP fonctionnel.

1.3 Coût du MVP

En terme de coût, voilà ce que ce MVP va représenter :

Zapier : 20$ par mois pour 1000 tasks (soit ~30 par jour)
Plivo : 0.07$ par SMS
Webflow : 36$ par mois
Domaine : 10€
Slack : Gratuit
Gmail : Gratuit
Google Form : Gratuit
Google Drive : Gratuit

Tous les mois : 20$ + 36$ = 56$ = 49€
Au début du projet = 10€ = 10€
Variables (base de 300 SMS envoyés) = 0.07$ par SMS * 300 = 21€ = 21€

Donc, 10€ à sortir au début du projet puis 49€ tous les mois. Pour 3 mois de tests, ça nous fait un MVP sous la barre des 200€. Ajoutez à ça un peu de SEA pour booster votre acquisition, et vous arrivez dans 300-400€ (soit une demie-journée d’un bon développeur).

À titre de comparaison, en passant par des freelances, ce type de projet coûte au minimum 10.000€ (et bien plus si vous passez par une agence).

2. Créer le site avec Webflow

Commençons par créer notre site, par rapport au product backlog réalisé plus tôt. Première étape, réaliser l’arborescence de notre futur site. On va se contenter d’un nombre très réduit de pages :

• Une page d’accueil, qui montre les dernières annonces, la liste des ports et met en avant la proposition de valeur.
• Une page « port », qui regroupe toutes les annonces relatives à un port.
• Une page « annonce », qui montre les détails d’un bateau.
• Le tunnel de réservation et de paiement sera fait avec Google Form, donc rien à faire sur Webflow pour ce point.

Avant tout, remémorons-nous les bases du MVP avec deux citations :

1 – Si vous n’êtes pas embarrassé par la première version de votre produit, c’est que vous l’avez sorti trop tard (Reid Hoffman)
2 – Il vaut mieux crée quelque chose qu’un petit nombre de personnes adore plutôt que quelque chose que beaucoup de monde apprécie (Sam Altman)

Donc, ce qu’on a faire ne sera pas la version parfaitement finalisée et optimisée de notre service. C’est seulement la version nécessitant le moins de temps et d’argent qui permet de tester notre proposition de valeur. Si celle-ci est validée, libre à nous de développer une solution bien plus complète (mais avec beaucoup moins de risques).

2.1. Création du projet & prise en main de Webflow

Pour commencer, inscrivez-vous sur Webflow :

Créer un compte Webflow gratuit

Connectez-vous et cliquez sur le bouton « New Project ». Vous allez alors devoir choisir un thème, payant ou gratuit. Vous avez 2 possibilités :

1 – Soit vous choisissez un thème payant avec des éléments déjà réalisés, qui vous permettront de faire quelque chose de graphiquement plus convaincant en moins de temps.
2 – Soit vous partez sur un thème gratuit et léger que vous personnaliserez.

Je vous recommande la solution 2, il est très difficile de trouver un thème qui colle parfaitement à notre besoin. Il vaut mieux partir sur un thème très léger mais aussi beaucoup plus facile à personnaliser.

N’oublions pas que le design n’est pas l’élément le plus important de votre projet : si votre design est magnifique mais que votre proposition de valeur est mal comprise, votre produit ne marchera pas. À l’inverse, si votre proposition de valeur fait mouche mais que votre design laisse à désirer, vous aurez des clients.

Je vous recommande donc d’utiliser le template « Business Wireframe », qui propose pas mal d’éléments. On peut ensuite très facilement repasser sur ces éléments pour les faire coller à notre identité graphique.

Vous arriverez ensuite sur l’interface de création du site. Dans la sidebar, cliquez sur le bouton « All layouts », et vous verrez la liste des éléments déjà prêts, à intégrer à votre site.

Il ne vous reste qu’à réaliser les différents blocs de votre site. Pour vous inspirer, vous pouvez aller sur https://dribbble.com et rechercher des exemples d’UI sur des thématiques proches de votre site.

Il vous faudra également des images libres de droits pour constituer votre site : https://unsplash.com et https://www.pexels.com sont de super sites pour en trouver de qualité.

Webflow vous propose de réaliser un site en drag & drop, mais ce qui le rend si puissant est sa façon de vous faire réfléchir comme un développeur lors de la réalisation du site. Comme tous les outils puissants, une petite période de prise en main est nécessaire pour savoir bien l’utiliser. Ça serait bien trop long de faire un tuto complet dans cet article, mais voici quand mêmes quelques point importants :

Il est possible d’intégrer plusieurs types de blocs, afin de construire votre page. Ils sont accessibles en cliquant sur le bouton « + » dans la sidebar, et leur ajout se fait au drag & drop.

Lorsque vous cliquez sur un élément, la sidebar de droite vous proposera 4 onglets. Ceux qui nous intéresseront dans un premier temps sont les deux premiers. Le pinceau sert à définir le style de notre élément, et la roue crantée permet de régler sa logique.

Note très importante : il est important de nommer chaque élément de votre page dans le champs « Selector ». Webflow utilisant un système d’arborescence et d’héritage pour gérer le style des éléments (par exemple, pour faire en sorte que tous les titres aient le même style sur toutes les pages), il faut absolument nommer vos éléments différemment dès que vous en modifiez le style. Si vous ne le faites pas, vous vous retrouverez avec des effets de bords sur d’autres pages où le composant est utilisé. Dans notre exemple, l’image s’appelle « BoatCardImage » et est utilisée uniquement dans les « cards » bateau.

3. Gérer les contenus avec Webflow

3.1. Création des collections

Comme je vous le disais plus haut, si Webflow n’est pas loin d’être l’outil parfait pour créer un MVP, c’est parce qu’il va bien plus loin que la simple landing page.

Par exemple, Webflow propose un système de CMS (Content Management System), qui nous permet de réaliser des collections personnalisées, de leur attribuer des champs, et de les lier entre elles. On peut donc, par exemple, très facilement créer un blog avec deux types de collections : les articles de blogs (constitués d’un titre et d’un texte), et les catégories (constituer d’un titre et comprenant des articles de blog).

Dans notre cas, on a besoin de deux collections différentes :

• Les bateaux
• Les ports

Résumons un peu : notre site est composé de pages, qui vont afficher des blocs que nous aurons défini, mais aussi des éléments dynamiques du système de CMS de Webflow.

Pour créer une collection, c’est très simple : on clique sur le bouton « base de donnée » dans le menu de gauche (menu « CMS Collections »), et on clique sur le bouton « + ». On arrive ensuite dans une interface qui nous permet de créer le modèle de données.

On peut lui donner un nom (ici « Boats »), et lui attribuer des champs de différents types (textes, images, liaisons …). Dans notre cas, notre collection « bateau » est constituée de :

• Name – le nom de l’annonce
• Description – la description de l’annonce
• Day price – le prix à la journée
• Image – l’image de l’annonce
• Available – est-ce que le bateau est disponible immédiatement
• City – lien vers le port où est le bateau
• Book link – lien vers le formulaire de réservation

3.2. Affichage des collections

Une fois une collection créée, une nouvelle page va être ajoutée à la liste de vos pages. Il s’agit de la page détail d’une collection (« CMS Collection Pages »).

Pour afficher des informations en dynamique sur la page d’un élément de collection, il suffit de se rendre dans le menu « engrenage » de la colonne de droite une fois un élément sélectionné, de cocher la case « Get text from … », et de choisir l’entrée de la collection à afficher.

Pour finir avec les indispensables de Webflow, vous pouvez ajouter un élément « Collection List » à n’importe quelle page, et afficher dynamiquement les éléments d’une collection. La mise en page est modifiable, il est possible de les classer ou filtrer suivant différents critères … Bref, quasiment tout est possible.

3.3. Résultats !

En une petite demi-heure, j’ai réalisés une landing avec une sélection de bateaux, et la liste des ports.

 

J’ai également créé une page détail pour un bateau, qui affiche en dynamique le nom, la description, le prix, si le bateau est disponible, et les bateaux dans le même port.

Graphiquement, ça reste très simple mais c’est amplement suffisant pour seulement tester l’idée (d’autant plus qu’avec Webflow, il est facile de faire évoluer le design petit à petit). Pour information, je suis parti du thème gratuit « Business Wireframe », que j’ai ensuite modifié et personnalisé.

4. Créer les formulaires avec Google Forms

À l’heure actuelle, notre site est capable d’afficher une sélection de bateaux que nous avons ajouté dans le back-office Webflow, mais il est impossible de passer une réservation. Nous allons donc nous attaquer au formulaire de réservation client.

Il aurait été possible de faire le formulaire directement sur Webflow (l’outil propose un outil pour ça), mais je préfère partir sur une solution plus complète et indépendante de Flow. Ça permettra de vraiment personnaliser le tunnel de réservation et de ne pas être tributaire à 100% de Webflow. J’ai choisi Google Form, mais il existe de nombreuses autres solutions (Typeform est par exemple une alternative très utilisée).

4.1. Créer un formulaire Google Form

Je vais donc me connecter à mon compte Gmail, me rendre sur la page de Google Form (https://docs.google.com/forms/u/0/) et créer un nouveau formulaire.

On ajoute les blocs grâce au menu latéral, et notre formulaire est prêt en quelques minutes.

Dans mon cas, les informations que je demande au client sont les suivantes :

• Date de la réservation
• Durée de la réservation
• Identifiant du bateau
• Nom et contact de la personne (pas présents dans les screens car je les avais oublié, ahaha …)

Concernant le dernier champs, c’est une petite « subtilité ». Lors d’une réservation, on a besoin de savoir quel bateau est concerné, pour faire le lien entre l’annonce et la demande. On ne peut pas envoyer le nom du bateau, puisque s’il y a plusieurs bateaux du même nom, on ne saura pas lequel prendre. On va donc mettre en place un système d’identifiant « produit ». Ce champs sera pré-rempli avec l’identifiant voulu dès l’ouverture du formulaire par le client. Faire un MVP sans coder, c’est aussi trouver des solutions alternatives pour arriver à ses fins !

Allez hop, on ajoute un peu de style pour que ça colle au site et on a notre formulaire.

On retrouve ensuite toutes les demandes de réservation dans l’onglet « Réponse » de Google Form, mais on va automatiser tout ça pour ne pas avoir à consulter cette page toutes les 2h !

4.2. Lier le formulaire Google Form à Webflow

On a donc notre site fonctionnel, et notre Google Form prêts à accueillir les premières réservations. Il faut maintenant lier le site au Google Form, pour qu’au clic sur « Réserver ce bateau », le client arrive sur un formulaire déjà pré-rempli.

On va donc utiliser un petit « tips » Google Form pour obtenir l’URL qui nous permettra de pré-remplir notre formulaire. On va cliquer sur le bouton avec les trois petits points en haut à droite, puis sur le bouton « Obtenir le lien ».

On va ensuite laisser tous les champs vides, sauf le champs « Identifiant du bateau » où on va écrire « TEST ». On clique ensuite sur « Obtenir le lien », une notification apparait en bas à gauche, et on clique sur « Copier le lien ».

On se retrouve donc avec un lien de ce type :

https://docs.google.com/forms/d/e/1FAIpQLSfI0A7--rZShRcOWbkfwBgF3ZkLYqymzmWP6fP18b8gmrl_QA/viewform?usp=pp_url&entry.1200063944=TEST

On voit que l’URL est composée de entry.1200063944=TEST. Ce petit bout d’URL, c’est tout simplement la clé qui vous permet de pré-remplir un champs dans Google Form. Google Form reprend la valeur de  entry.1200063944, et la met dans le champs « Identifiant » que nous avons pré-défini.

Tout ce que nous avons à faire, c’est reprendre cette URL, remplacer la clé ci-dessus par un identifiant unique, et coller cette URL dans le champs « lien de réservation » sur Webflow.

Au clic sur le bouton « Réserver ce bateau », on arrive bien sur le Google Form avec le champs pré-rempli de l’identifiant du bateau sélectionné.

Pour finir avec Google Forms, on va devoir faire en sorte que chaque réponse soit enregistrée dans une feuille de calcul. On clique donc sur le bouton vert « Spreadsheet » dans l’onglet « Réponses » de Google Forms, et on créé une feuille de calcul. Toutes les réponses seront automatiquement ajoutées dans ce document.

5. Gérer les disponibilités avec Google Sheet

5.1. Pourquoi Google Sheet ?

Je suis un grand fan de Google Sheet. Je fais tout avec Google Sheet, du classique tableau prévisionnel à la base de données de MVP.

Concernant notre projet, on est tous d’accord pour dire que c’est bien plus simple de gérer les réservations dans un Google Sheet plutôt que dans l’interface CMS de Webflow. On va donc créer un Google Sheet « base de données » lié à Webflow et à Google Forms, pour gérer tout ça bien plus facilement.

5.2. Création de la feuille de calcul

On va donc créer un nouveau document, avec 3 onglets :

• Dashboard, un résumé des KPIs importants à suivre.
• Locations, qui regroupera la liste des demandes.
• Disponibilités, qui permettra de mettre à jour les disponibilités immédiates de chaque bateau dynamiquement.

On ne va pas trop s’attarder sur la composition de chaque colonne puisqu’on ne sait à ce stade pas encore précisément ce qui est automatisable ou non.

6. Développer le processus de réservation avec Zapier

Voilà la partie la plus importante ! Nous avons toutes les composantes de notre application, et nous devons maintenant les faire communiquer entre elles. Pour ce faire, on a Zapier !

 

Zapier, c’est un outil qui va vous permettre d’automatiser tout un tas de choses sur vos différents services. Comme je le dis plus haut, Zapier pour se résumer en cette phrase : “Si il se passe ça, fais ceci”. En gros, vous allez pouvoir connecter des milliers de service entre eux, sans écrire une ligne de code.

6.1. Enregistrer les demandes de location

Pour le moment, les demandes sont stockées directement dans Google Forms. Pas très pratique pour suivre tout ça. On va donc, dans un premier temps, faire rentrer toutes données saisies dans Google Form directement dans notre Google Sheet.

On va donc se connecter sur Zapier, et connecter l’événement « Nouvelle réponse au formulaire » de Google Forms à l’action « Créer une nouvelle ligne » de Google Sheet.

On clique sur « Make a Zap » (les automatisations s’appellent des Zaps sur Zapier), et on suit les différentes étapes : on sélectionne notre compte Google, on choisi le bon Spreadsheet lié à notre Google Form, puis on le lie à l’action « Create Spreadsheet Row » de Google Sheet. On définit less bons champs du Spreadsheet en fonction des données remontées par le Google Form, et on valide.

6.2. Notifier un administrateur en cas de nouvelle demande

Les locations arrivent dans notre Google Sheet, c’est très bien. Cependant, il faudrait qu’un administrateur soit notifié lorsque ça se produit, et que le client reçoive un email de confirmation, non ?

On va donc retourner sur la page d’édition de notre Zap, et simplement cliquer sur le bouton « Add a step », et choisir « Email ».

On renseigne les différents champs en fonction des informations qu’on veut remonter dans le mail, et on valide.

À ce stade, l’administrateur va recevoir un email lui indiquant qu’une nouvelle demande de location a été faite, et celle-ci sera présente dans son document Spreadsheet de suivi.

6.3. Notifier le client de la bonne réception de sa demande

Le client vient de remplir un formulaire de réservation / demande d’information, donc il faudrait pouvoir lui envoyer un email l’informant qu’il sera re-contacté sous peu.

Ici, on a de nombreuses options :

• On peut utiliser un service externe comme Mailchimp.
• On peut utiliser le connecter Zapier « SMTP », qui permet d’utiliser un serveur mail externe pour envoyer l’email (et donc ne pas utiliser d’email en @zapiermail.com)
• On peut utiliser le même connecter « email » que celui utilisé pour la notification admin, mais ceux-ci seront envoyés depuis une adresse @zapiermail.com.

De notre côté, on va utiliser la dernière option, qui est plus facile à mettre en place et largement suffisante pour seulement tester notre idée.

On ajoute donc de nouveau une étape (bouton « Add a Step »), et on renseigne les différents champs en fonction des informations qu’on veut remonter au client dans l’email de validation.

6.4. Valider une réservation & encaisser le paiement

Les demandes de location remontent, il faut maintenant les traiter. Partons du principe qu’une demande peut avoir 2 issues :

• Soit elle est validée, et le client doit payer.
• Soit elle est annulée.

On va donc mettre en place un Zap qui va surveiller l’évolution du Spreadsheet des locations et « réagir » en conséquences. Ici, nous allons envoyer une notification lors de la validation d’une demande de location avec un appel à paiement.

On se rend sur Zapier, on clique sur « Make a Zap », on choisit l’action « New or Updated Google Sheets Spreadsheet Row » comme déclencheur. On définit bien le bon document et le bon onglet. Pour finir, on indique à Zapier que l’automatisation ne doit avoir lieu que si la colonne « Statut » est modifiée.

Ici, l’action ne se déclenchera que lorsque la colonne « Statut » sera modifiée. On doit désormais dire à Zapier de ne déclencher l’action que si « Statut » vaut une certaine valeur. On va donc cliquer sur « Add a Step », puis sur Filter, afin de ne garder que les actions pour lesquelles le statut est « waiting-payment ».

On ajoute ensuite de nouveau une étape envoi d’email, et on renseigne les différents champs (on commence à avoir l’habitude !).

À cette étape, la petite subtilité est de permettre au client de régler sa commande, sans interface. Pour ce faire, il y a encore une fois de nombreuses solutions, comme Stripe Checkout ou Paypal.me. Dans notre cas, on va utiliser Paypal.me, qui permet de réaliser des appels à paiement simplement à partir d’une URL. Il suffit de se créer un compte Paypal, de se rendre sur https://www.paypal.me/, et de cliquer sur « Créer mon lien Paypal.me ».

À partir de là, vous aurez un lien de ce format : https://www.paypal.me/[UTILISATEUR]/[MONTANT] que vous pourrez partager pour encaisser des paiements. Par exemple, si je veux facturer 200€ à un client, je lui envoie ce lien : https://www.paypal.me/bnboat/200.

Bien sûr, cette solution n’est pas idéale : pas de suivi de paiement, obligation de suivre manuellement le compte Paypal pour suivre les transactions … Ce n’est bien entendu pas viable sur un business qui ferait des dizaines de réservations par jour. C’est cependant largement suffisant dans notre cas, puisque nous avons pour objectif de valider notre idée.

Retournons sur Zapier : on remplit les différents champs, et on renseigne notre adressse paypal.me en prenant soin de rajouter le montant présent dans le Spreadsheet pour l’appel à paiement.

Pour finir, il pourrait être intéressant d’envoyer un SMS au client pour l’informer qu’on est en attente de son paiement. Vous commencez à comprendre le principe : on clique sur « Add a Step », on choisit le connecteur « Plivo », l’action « Send SMS », et on remplit tous les champs comme désiré.

De la même façon, nous pouvons créer un Zap pour notifier le client en cas d’annulation de sa demande, simplement en remplaçant le filtre par une vérification du statut « cancelled ».

6.5. Implémenter le process manuel

Certaines étapes ne peuvent pas (ou ne doivent pas) être automatisées. Dans notre cas, il est indispensable de prendre contact personnellement avec chacun de nos clients & propriétaires, pour leur expliquer le fonctionnement de la plateforme et les rassurer. Gardons en tête que l’objectif d’un MVP est de valider son idée par l’apprentissage, et échanger avec son client est la meilleure manière de collecter de l’apprentissage.

Certaines choses doivent donc être faites manuellement, mais organiser ces choses peut être automatisé. Dans notre cas, nous allons utiliser Trello pour définir les tâches à faire.

On se rend donc sur Trello, et on créé un nouveau tableau « Gestion Bnboat », et on lui donne plusieurs colonnes :

• En attente – les nouvelles tâches arriveront ici.
• À faire – Tristan – les tâches assignées à Tristan seront ici.
• À faire – Joseph – les tâches assignées à mon associé imaginaire seront ici.
• Fait – une fois terminées, les tâches seront ici.

Sans grande surprise, on se rend sur Zapier, on sélectionne le Zap « Notifier client si demande validée », et on ajoute une nouvelle étape. On choisit ensuite la tâche « Create Card » de « Trello ».

À chaque fois qu’une demande sera validée dans le document Excel, une entrée sera créée dans Trello. La personne qui s’en occupe déplacera la carte dans sa colonne, puis dans « Fait » une fois terminée.

On peut ajouter tout un tas de choses à cette automatisation :

• Une attribution automatique des cartes à une membre précis.
• Une date limite de réalisation des cartes.
• Un détail du process ou de la réservation dans la description.
• …

6.6. Mise à jour des disponibilités dans Webflow

Il est maintenant temps d’attaquer la dernière partie de l’automatisation : faire communiquer le Google Sheet avec Webflow.

Pour ce faire, il y a une petite spécificité à prendre en compte. Webflow utilise un système d’identifiant unique en interne, lié aux différents items des collections. Cet identifiant est indispensable pour modifier un élément avec l’action Webflow dans Zapier (en d’autres termes, vous ne pouvez pas rechercher un élément d’une collection par titre, mais uniquement par identifiant). Une action Zapier permettant de faire cette recherche est sur la roadmap mais pas encore développée.

On va donc devoir récupérer cet identifiant unique pour pouvoir faire des modifications dans Webflow. Le seul hic, c’est que cet identifiant n’est accessible que par l’API. On a 2 solutions

Solution 1 : on pourrait très bien utiliser un outil comme Postman pour faire une requête à l’API de Webflow (qui est très bien documentée https://developers.webflow.com), mais ça reste assez tech.

Solution 2 : on utilise un petit outil que j’ai développé rien que pour vous, qui va vous permettre de récupérer tous les identifiants des éléments d’une collection. Voilà le lien pour y accéder : https://academy.mvpjungle.fr/tools/webflow-items-ids.

C’est donc parti pour la solution 2 :

Étape 1 – Récupérer la clé d’API

Lorsque vous créez un site sur Webflow, on vous met à disposition ce qu’on appelle une clé d’API. Pour faire simple, c’est une clé qui remplace votre identifiant / mot de passe mais qui permet de vous identifier sur toutes les requêtes d’API qui vont être faites (donc de récupérer vos informations et pas celles du voisin).

Connectez-vous à votre compte Webflow, rendez-vous sur l’éditeur de votre site, cliquez sur « Project Settings » en haut à droite, rendez-vous dans l’onglet « Integrations », puis cliquez sur le bouton « Generate new API token ».

Notez bien cette clé car elle ne s’affichera qu’une fois, et surtout, ne la partagez à personne.

Étape 2 – Récupérer les IDs d’éléments

Rendez-vous sur la page https://academy.mvpjungle.fr/tools/webflow-items-ids et copiez/collez y votre clé. Vos sites/collections/items s’affichent.

Vous l’aurez compris, la clé, c’est le chaine de caractères à droite du nom de l’item.

Étape 3 – Remonter les clés dans le Google Sheet

On va se rendre dans notre document Google Sheet, onglet « Disponibilités », et copier les noms et identifiants des différents éléments. On va également rajouter une colonne « internal_id », qui nous permettra de stocker l’identifiant produit présent dans le Google Form.

Étape 4 – Créer l’automatisation Zapier

On a maintenant toutes les informations pour faire les relations entre nos différents outils. On va donc encore une fois se rendre sur Zapier, et créer un nouveau Zap.

On choisit Spreadsheet comme déclencheur; puis l’action « New or Updated Spreadsheet Row ». On prend notre document, la feuille « Disponibilités », et on définit bien la colonne « available_now » comme unique colonne à surveiller (= l’automatisation ne se déclenchera que si la valeur de cette colonne a changé).

Une fois le déclencheur Google Sheet terminé, on clic sur « Add a Step », et on choisit Webflow. Concernant l’action, on va prendre « Update Live Item », pour modifier un article sans qu’il passe par l’état « Brouillon ».

On choisit ensuite le site, la collection, et on remonte l’identifiant fraichement récupéré dans le champs « Item ». Pour finir, il faut modifier l’élément en fonction de la nouvelle disponibilité. On  va donc se rendre au niveau de la clé « Available », cliquer sur « Add a Custom Value » pour pouvoir remonter une variable, et sélectionner la clé « available_now ».

On valide notre Zap, on l’active, et c’est tout bon ! Dès qu’une modification d’état sera faite dans le Google Sheet, l’élément Webflow lié sera modifié.

Attention, il faut que la colonne « available_now » du Google Sheet soit égale à yes ou à no uniquement (ce sont les 2 seules valeurs acceptées par Webflow pour l’utilisation de champs de type booléens).

6.7. Résumé des automatisations en place

Voilà donc comment se déroule l’ajout d’un bateau sur la plateforme :

• L’admin créé l’élément dans Webflow,
• Il récupère l’ID de l’élément avec l’outil https://academy.mvpjungle.fr/tools/webflow-items-ids,
• Il créé une ligne dans le Google Sheet disponibilités avec le nom, l’ID et la disponibilité immédiate du bateau,

Lorsqu’une demande de location a lieu :

• Le client fait sa demande de réservation sur le site, via GForms,
• Il reçoit un email de confirmation,
• Une entrée dans Google Sheet se créé,
• L’administrateur reçoit une notification,
• Une carte Trello indiquant de prendre contact est créée

Un administrateur doit ensuite gérer la suite du process :

• Un administrateur doit prendre contact avec le client et déplacer la carte Trello,
• Un administrateur doit valider ou annuler la réservation,
  • Si il valide dans le Google Sheet, le client reçoit un email et un appel à paiement,
  • Si il refuse, le client reçoit un email de notification,
• Si besoin, l’administrateur met à jour la disponibilité du bateau dans le Google Sheet,

On pourrait imaginer la suite du process :

• Un administrateur surveille si le paiement passe sur Paypal,
• Si le paiement est fait, l’admin change le statut de la réservation à « booked » sur Spreadsheet,
• Lorsque le statut est changé, le client est notifié sur sa réservation est validée.

Ça serait très facile à mettre en place, exactement de la même façon que les étapes précédentes.

Il y a bien entendu encore des manipulations manuelles à faire, mais celles-ci sont assez réduites pour que vous puissiez gérer un bon nombre de réservations en parallèle. Et je le répète une unième fois : un MVP ne soit pas être scalable, sa seule raison d’être est de valider votre idée par l’apprentissage.

7. Création du dashboard de suivi

Un des intérêts de travailler avec Google Sheet est aussi de pouvoir suivre bien plus facilement les KPIs nous intéressent. On va donc se rendre dans notre doc Google Sheet, onglet « Dashboard. »

Comme vous vous en doutez, nous allons utiliser les formules Google Sheet pour créer le dashboard. On aura besoin de 3 formules uniquement :

• COUNTIFS – compte les éléments si des conditions sont validées,
• SUMIFS – additionne les éléments si des conditions sont validées,
• SUM – fait la somme d’éléments si une condition est validée.

Récupérer le nombre de demandes

=COUNTIFS(Locations!A2:A200; »<> ») – On prend la colonne A de la feuille « Location », et on utilise la condition « <> » qui teste si le champs n’est pas vide.

Récupérer les demandes d’un certain type

=COUNTIFS(Locations!A2:A200;« <> »;Locations!J2:J200;« =waiting ») – même structure que la condition du dessus, mais on ajoute une deuxième condition qui teste la colonne J pour s’assurer que la valeur est « waiting ». On peut bien entendu faire la même chose pour « waiting-payment », « booked » …

Nombre de bateaux disponibles

=COUNTIFS(‘Disponibilités’!D2:D200;« =yes ») – toujours la même méthode, on prend la colonne D de la feuille « Disponibilités », et on compte les éléments qui sont égaux à « yes ». On peut faire la même chose pour « no » et calculer un ratio de disponibilité.

Total reversé

=SUM(Locations!H:H) – très simple, on additionne les valeur de la colonne H de la feuille « Locations ».

Autres possibilités

Partant du fonctionnement du COUNTIFS, on peut créer des KPIs bien plus précis en utiliser le SUMIFS. Par exemple, on pourrait calculer le montant en attente de paiement en additionnant les montants des locations uniquement si le statut est « waiting-payment ».

On peut également répartir toutes ces données par date. C’est même indispensable pour voir l’évolution de vos metrics tout au long de votre test de MVP.

Pour finir, il est possible de styliser un peu son dashboard et de créer des graphiques pour rendre l’information plus lisible.

Il y aurait énormément de choses à dire sur le dasshboarding avec Google Sheets, ça sera l’occasion de faire un article spécialisé à ce sujet !

8. Et maintenant ?

Vous avez désormais une idée plus claire sur une des méthodes pour créer un MVP sans écrire une seule ligne de code. Ça demande des efforts, c’est parfois du bricolage, mais ça fonctionne. Ça vous permettra de tester vos idées sans avoir à faire appel à un développeur.

8.1. Note aux développeurs

Petite notes aux développeurs qui penseraient que cet article ne leur est pas destiné : je suis moi-même développeur, et je peux comme tout développeur fullstack créer n’importe quel produit si on me donne du temps. Malgré ça, j’ai quand même recours à des méthodes dans le genre de celle décrite dans cet article pour créer des MVPs. Pourquoi ? Tout simplement parce que développer un produit prend du temps, donc de l’argent.

Ce que je veux vous dire, c’est que perdre du temps ou de l’argent revient strictement au même : si vous êtes développeur, et que vous perdez 2 semaines sur un projet que vous auriez pu faire en 2 jours, c’est 2 semaines de freelance perdues, par exemple.

J’utilise également très régulièrement Zapier, même si techniquement je suis capable d’utiliser les APIs pour refaire la même chose sans avoir à payer.

8.2. Un MVP oui, mais pas n’importe comment

Vous savez désormais comment créer un MVP. Cependant, créer un MVP doit se faire dans une démarche précise, avec une méthode bien définie. Il ne suffit pas de mettre le projet en ligne et de faire un peu de publicité.

J’espère que ce (long) guide vous aura été utile !