Construire de meilleures interfaces SaaS plus rapidement (Mobbin)

0:00bon les amis ça faisait un moment que j'avais pas fait de vidéo et aujourd'hui on va parler de d'une technique pour développer des interfaces sas de manière encore plus rapide alors je vais vous expliquer un petit peu le processus par lequel je suis passé en gros je devais designer une nouvelle page de login pour mon produit SAS et je vous avoue que quand j'ai commencé par la faire et bien en fait je suis parti d'une feuille blanche et ce qui s'est passé c'est que j'ai mis j'tais paumé en fait parce que je mettais du temps je fais ok bon je mets ça là je mets ça là

0:28et CEET j'étais pas très très content résultat et en fait je me suis souvenu d'un site qui s'appelle mobine que j'ai découvert il y a quoi il y a quelques semaines et qui m'a permis de développer une interface que j'ai trouvé assez Cali finalement à la fin du résultat de manière ultra rapide alors je vais vous expliquer un peu le process derrière je vous expliquer c'est quoi mobine et je vais vous expliquer en fait une technique qui va vous permettre de pouvoir en fait développer des interfaces plus rapidement et avec un meilleur résultat à la fin parce que finalement c'est ça le l'objectif alors il y a un truc dans la vie qui est

1:01vachement important c'est que quand on a l'information quand on a de la bonne information on exécute plus rapidement et surtout on exécute mieux d'accord et ça ça vaut pour tout l'information c'est quelque chose qui est critique donc au lieu de partir tête baissere comme moi très souvent il est plus simple il est plus efficace de prendre quelques secondes pour ou même plutôt quelques heures ou quelques minutes ou quelques dizaines de minutes pour pouvoir prendre l'information et après exécuter on va exécuter plus rapidement et on va exécuter mieux mobine qu'est-ce que c'est mobine c'est un site qui est vachement bien fait qui réunit et bien tout simplement plein d'interface et qui

1:39va vous permettre de pouvoir très facilement par exemple et bien dans mon cas récupérer toutes les pages qui sont pour faire un login OK et donc voilà on les à toutes on clique dessus et avec les flèches de la souris on va pouvoir switcher et en fait on prend une feuille de papier on note tous les trucs qui sont bien ok c ça j'aime bien ça j'aime bien ça j'aime bien et en fait ça va vous permettre de pouvoir récupérer de l'information ok qui va vous aider après derrière dans l'exécution de la page et et surtout de le faire de manière très vite et c'est ce que j'ai fait tout simplement en

2:15regardant et en sauvegardant ici en fait ici on a un petit bouton SAV qui permet de pouvoir voilà j'ai mis dans login on peut faire aussi pour la page de pricing faire pour tout en fait et on sauvegarde ce qu'on aime ok une fois qu'on a sauvegardé ce qu'on aim on se retrouve avec un tas de fichiers et derrière ça va vous permettre de pouvoir bah euh euh exactement mettre les choses bien et en fait pourquoi je dis ça c'est parce qu'il y a plein de petits détails que j'ai mis en place euh avec cette interface euh notamment par exemple un site qui mettait les les clients sur sa

2:41page login et je trouvais ça cool parce que ça incitait à à la à l'inscription euh il y a aussi un site je crois que c'est notion qui avait juste un seul bouton euh de Connect ici avec un un e ce qui permettait d'avoir une écion clair et surtout enprès derrière de afficher le password que après voilà une fois qu'on a tapé l'email hop on récupère le lien vers le password euh et ça permet d'avoir une page encore plus épurée euh et il y avait aussi le le site de un autre SAS qui mettait un back to homeepage ici qui était quand même assez intéressant pour revenirateurs sont

3:13perdu et puis après il y avait un autre qui mettait un badge là j'avais trouvé ça assez cool et d'ailleurs c'est un site de SAS qui est trop stylé euh que je pourrais vous retrouver donc le s en question c'est better stack vous pouvez regarder eux ils sont assez chaud design et honnêtement du coup voilà dans leur sign in page ils ont un back to login ici un back to better stack et et je trouvais ça vraiment très cool donc eux c'est pareil ils ont un un autre style de d'inscription qui est un Magic link euh donc bon moi je suis pas très fan de ce genre de de login ou même

3:45d'inscription mais peut-être que pour certains SAS bah c'est plus pertinent et donc voilà c'est quoi le concept on récupère de l'information on clique et on a quelqu'un en fait qui a qui a fait de la curation pour nous et c'est assez quali et donc ça nous permet de pouvoir récupérer VO toc toc toc toc très très vite toute l'information et derrière on va on va coller une meilleure page de login et donc une meilleure page et surtout une meilleure une page qui va être collée plus rapidement ce que je voudrais dire c'est que il y a un podcast que j'écoute qui assez chouette qui s'appelle silicon carnet et il y a

4:15une personne qui a dit une phrase qui s'appelle marieeleine Delbourg elle a dit l'interface c'est l'art de la persuasion et pour pouvoir persuader faut être fort et surtout et ben en fait en il va falloir se s'inspirer de tout ce qui se fait autour et de récupérer l'info donc par exemple imaginons que dans une page de pricing ok on tape pricing ici et là on va voir toutes les pages de pricing et on va pouvoir regarder une par une et se dire ah tu vois là c'est sympa pay annul pay monly ok euh ici ils indiquent save up tout 46 % là ils disent ils indiquent là il

4:56barrent voilà ils ont un système Enterprise euh ça nous permet vraiment de pouvoir euh avoir euh vraiment de l'information claire et surtout plein d'idées donc j'ai pris un compte pro sur ce machin ça s'appelle mobine et je voudlais qu'on fasse un qu'on prenne un peu quelques secondes pour pouvoir faire un tour d'horizon les de ce qu' propose alors sur mobine ce qui est chouette c'est que vous avez plusieurs sections en haut donc vous avez tout ce qui est iOS donc si vous voulez développer les interfaces iOS ça peut être très pratique vous avez tout ce qui est Android ok donc là ça va être bah des

5:36pour Android et tout ce qui est web donc nous dans le sas on va plutôt s'occuper de la partie web ok ensuite ce qu'on va pouvoir faire c'est que le site il est organisé sous forme de de plusieurs catégories et en gros les catégories elles sont là donc on a les apps les apps en gros c'est si vous avez un un site que vous aimez beaucoup par exemple bah better stack euh donc fa le trouver dans la liste mais si je tape better stack ici je vais le trouver voilà ça va vous permettre de voir à peu près tout ce que fait better stack donc tout ce qui est le onboarding

6:08par exemple on peut voir le unboarding là donc toutes les étapes et cetera on va pouvoir voir aussi comment on connecte à SLAC leur leur produit par exemple et cetera donc là ici vous avez toutes les les informations donc on voit beaucoup de flow on peut voir aussi bah comment créer un fichier et cetera bon bref on peut voir leur pricing aussi voilà et donc ça ici les apps c'est pour voir en fait c'est ça va regrouper toutes les tous les screens d'une application on a ensuite screen alors screen ici ça va être plus quand on va devoir voir bah dans mon cas par exemple toutes les pages de login ici toutes les

6:51pages de subscription page signup checkout voilà donc c'est vraiment des des features page de feedback aussi quel comment est-ce que les différentes interfaces par exemple récupèrent du feedback de leurs utilisateur ça peut être très pratique ça peut donner plein d'idées donc là c'est la partie vraiment écran on a ensuite tout ce qui est marketing donc marketing ça va être essentiellement les ce qui a vocation de conversion en marketing donc par exemple tout ce qui est bahà si on va ici tu voisis on peut on peut aussi les retrouver on va avir tout ce qui est bah pricing forcément tout ce qui est intégration on on est beaucoup sur des

7:30landing par exemple les pages Enterprise ça peut être très pratique si vous développez un jour une partie Enterprise dans votre plateforme dans ça peut-être qu'un moment va falloir développer une page spécifique pour les Enterprise et là à ce momentlah vous cliquez et puis vous pouvez très facilement voir ce que fait ce que gens font et ce qui est intéressant ici par exemple c'est vous avez une partie full page donc soit vous appuyez sur F pour la voir soit et vous faites vous cliquez ici et en fait vous pouvez carrément avoir toute la page en entière quoi donc voilà on peut voir Codaf startup donc là c'est leur page

8:01visiblement pour les Enterprise euh ou celle-ci ici voilà ça va charger et on va on va retrouver la page Enterprise donc c'est vraiment très très intéressant et souvenez-vous toujours avant de foncer tê BC il faut l'information si on a l'information on exécute plus vite et on exécute mieux donc ça vaut le coup de passer un quelques dizaines de minutes à choper l'information noter et derrière exécuter ensuite il y a une autre partie intéressante sur ce site c'est la partie élément ui donc ça peut être par exemple si vous devez designer un tableau là vous pouvez voir un peu comment chaque personne chaque personne a développé un

8:42tableau un sas en SAS donc vous avez par exemple bah voilà on a le tableau classique de dans les CRM pour front on a pour customer et ce donc ça peut vous donner des idées pour différents éléments ui bannière et C et en plus ce qui est intéressant c'est que en faisant ce processl ça va vous permettre de peaufiner les détails et je peux vous garantir que sur plusieurs années cette accumulation de petits détails amélioré ça va faire énormément de différence et surtout bah je fais partie des personnes qui pensent clairement que le design améliore le chiffre d'affaires d'une boîte et ça va être le cas de plus en plus les gens

9:24sont de plus en plus exigeants quand on arrive sur une page euh qui est belle il a l'exemple classique de lin linéire ils ont fait ils ont travaillé à fond les détails de de leur landing page à gogo avec détail partout sur les ombres sur Z sur les ils ont il ont lancé une mode en fait sur ce type de de design je sais pas si c'est eux qui sont initiative mais en tout cas on retrouve beaucoup ce type de design maintenant dans le sas et ça je peux vous garantir que ça fait ça augmente le chi d'affair et ça fait même des fois le marketing parce que les gens

9:55en parlent et se partagent tiens regarde ce landing page elle est belle donc c'est tout tout BF et vous avez enfin une dernière partie dans le dans le le système de mobine c'est les flows et ça c'est aussi très pratique c'est par exemple tout ce qui est onboarding loging logging créer un ACC account tiens par exemple les cancel subscription quand quelqu'un annule sa subscription qu'est-ce qu'on fait on annule juste la subscription ou on va derrière créer un un flow qui va permettre de pouvoir récupérer de l'information ce que fait d'ailleurs très très bien mobine je vous montrerai on fera peut-être une vidéo plus tard mais et par exemple voilà dans vio quand

10:31on cancelle un trial ben en fait on passe par différentes étapes qui nous permettent de pouvoir alors c'est assez léger mais mais qui nous permet de pouvoir bah en fait diminuer ou améliorer derrière euh donc ça ça peut être extrêmement pratique et ce que j'aime bien aussi avec ce site c'est que vous avez un moteur de cherche ici qui est très très bien pensé et qui permett par exemple voilà je vous dis hein vous tapez pricing vous avez soit les pricing section donc qui vont être des ui elements euh dans les pages marketing ou soit euh tout simplement des des pricing page si on tape pricing section ça va

11:15être beaucoup plus court et on voit juste la partie pricing quoi alors que dans pricing page on va voir toute la page donc juste pour résumé moi ce que je fais quand je fais une landing page maintenant ou un j'ai quelque chose à développer je vais sur mobine je tape login par exemple puis après j'enchaîne et je les regardeououououou pas aussi vite bien sûr mais je les regarde et je prends des notes et quand quelque chose me semble intéressant parce que c'est mon style et que je pense que ça convertit mieux ou c'est bien fait et ben derrière je le je le note ou je le sauvegarde ici dans mes

11:44collections et ça me permet à la fin tout simplement d'avoir une landing page qui a ou une page qui a qui un peu de gueule quoi et qui permet tout simplement de de gagner du temps en fait et surtout même des fois de même pas passer par sketch et de la designer direct ça c'est bien quand Onon bootstrap donc voilà petite vidéo très courte sur mobine et sur un processus pour tout simplement développer les interfaces plus rapidement et mieux hésitez pas à mettre en commentaire si vous connaissez d'autres sites dans le même genre c'est probablement le meilleur que j'ai vu sur le sujet donc il est vraiment très très

12:12bien fait il est payant par contre donc vous pouvez vous abonn à moi je sais pas combien ça coûte mais ouis voilà j'ai payé j'ai payé 20 € 20 € pour pouvoir tout simplement accéder à tous le le screenshot et ça peut être extrêmement pratique tout simplement pour aller plus vite voilà bon je souite une agréable journée et à bientôt