Un site 100% Nocode au secours des jeunes en détresse
Alors que la nouvelle promotion de l’Alegria.academy a fait sa rentrée, il est l’heure, pour les premier·es formé·es d’intégrer leur entreprise d’alternance pour les 9 prochains mois.
Pour clôturer en beauté ces trois premiers mois de formation, nous devions nous assurer qu’ils étaient prêts à se jeter dans le grand bain (non, il ne s’agit pas d’une seconde piscine !). Et pour ça, rien de tel qu’un hackathon.
Un hackathon, quésako ?
Le principe ? Les différentes équipes conçoivent et créent « from scratch » une solution digitale répondant à un besoin et un cahier des charges préalablement établis. Puis vient le pitch de présentation devant l’équipe pédagogique qui les départage.
La stack technique ? Pour ce hackathon, les étudiant·es doivent utiliser les outils Nocode Webflow, Airtable et Make.
A l'issue de deux jours de développement en mode projet, le grand gagnant a été annoncé. Il s’agit du projet Side by Side porté par le groupe de Léna, Magali et Hélène !
Ces trois étudiantes aux parcours très différents, ont réussi à créer une véritable synergie en associant leurs différents points forts en Nocode afin de proposer le site SidebySide.
Cette plateforme en ligne, venant en aide aux jeunes de 14 à 25 ans en difficulté, permet d’être redirigé vers des organismes dédiés (associations, foyers, professionnels de santé…) notamment en cas d’urgence.
L’idée du projet vient de Léna, jeune femme de 22 ans qui a été exposée à ces situations de détresse et souhaitait mettre le Nocode au service de cette cause. Hélène et Magali ont immédiatement adhéré au projet.
Un trio 100% féminin, aux parcours variés
Passionnée par l’informatique et la culture japonaise, Léna commence à coder ses premiers sites à l’âge de 12 ans, de manière autodidacte. Puis elle effectue des études de design en école d’art. Les périodes de confinement perturbent cette formation. Elle découvre alors le Nocode et décide de se former à ses outils.
Hélène est quant à elle designer d’espace (ou architecte d’intérieur) et experte en immobilier professionnel. Attirée par le digital, le Nocode est pour elle une porte d’entrée vers la création d’outils digitaux. À terme, elle souhaiterait en faire une activité à part entière qu’elle aimerait croiser avec son activité originelle de conseil en design.
Magali est en cours de reconversion professionnelle. Après avoir exercé 10 ans en tant que conseillère Pôle Emploi mais également comme recruteuse IT, elle a décidé de se doter elle-même de ces compétences et devenir Nocode Maker.
Quelles solutions pour aider des jeunes en détresse ?
Un parcours centré sur l’accessibilité
1. Penser ‘mobile first’ - Webflow
Une chose est sûre pour les trois étudiantes : l’accessibilité est le critère de réussite #1.
Ce point de départ les fait opter pour un site plutôt qu’une app mobile qui nécessiterait une installation, éventuellement une connexion WiFi, etc.
Leur priorité est de créer rapidement une plateforme pour aider les jeunes en difficulté. Webflow est l’outil idéal pour développer un site web sans coder.
Le site doit charger rapidement et être responsive, voire ‘mobile first’. Elles utilisent donc Webflow pour construire leur projet.
La prise de contact est la motivation d’une visite sur cette page. Ainsi, les numéros d’urgence à contacter doivent être particulièrement visibles et actionables. *
2. UX/UI : Se mettre à la place des jeunes en difficulté pour un parcours intuitif - Figma
Après avoir rédigé les “user stories”, les trois étudiantes admettent que Side by Side doit couvrir un spectre ambitieux de cas de figure : de l’urgence à la recherche d’aide sur la durée.
Les portes d’entrée aussi doivent être identifiables très rapidement : les utilisateurs et utilisatrices doivent spontanément reconnaître leur situation et être bien guidés.
Sur la base de leurs user stories, Magali, Hélène et Léna font des premières maquettes de leur page et du parcours sur site sur l’outil de design Nocode Figma :
La page d’accueil du site Side by Side est à double entrée : soit on cherche de l’aide soit on veut en apporter.
Les étudiantes Hélène, Magali et Léna ont prévu un parcours adapté aux cas d’usage réels pour apporter des réponses adéquates.
Le clic sur la recherche d’aide propose 3 cas de figure qui englobent toutes les situations possibles :
- Avoir un besoin d’aide URGENT
- Rechercher un accompagnement plus ou moins durable
- Trouver le type de professionnel ou d’association adaptés à une situation précise
Les coulisses de la solution : la création de scénarios réalistes
Avant de se lancer dans une maquette, Hélène, Magali et Léna posent à plat les différents cas de figure dans un flowchart sur figma qui leur permet de détailler les différentes procédures de contact et les étapes de chaque processus.
1. Recherche d’aide : collecter des informations pour répondre - Tally x Airtable
Pour aider les jeunes en difficulté, l’enjeu est double : il faut d’une part collecter un minimum de données pour apporter une réponse adaptée et d’autre part limiter le nombre d’étapes à suivre pour ne pas décourager la recherche d’aide.
La solution choisie par Hélène, Magali et Léna est l’envoi automatisé d’un formulaire Tally qui alimente une base de données hébergée sur Airtable.
D’un point de vue utilisateur, le clic sur la recherche d’aide ouvre directement un formulaire à remplir par la personne en détresse.
2. Apporter une présence rassurante et instantanée grâce à des automatisations bien configurées - Airtable x Make x Gmail
Grâce à un scénario configuré sur l’outil d’automatisation de processus Make (ex-Integromat), le ou la jeune reçoit une réponse immédiate qui confirme la prise en charge de sa demande d’aide.
L’équipe de Side by Side est informée par email et reçoit une notification selon les réponses sélectionnées par le jeune et le degré d’urgence identifié.
Et c’est là que ça se corse ! Hélène, Magali et Léna ont dû connecter Webflow (site builder dans lequel elles ont créé leur page), Tally (l’outil de formulaire), Airtable (la base de données qui collecte les données du formulaire) et Gmail pour envoyer les messages au jeune et à l’équipe Side by Side.
C’est un process bien pensé par les trois étudiantes et habilement configuré dans Make :
L’élégance de leur solution est dans l’identification du degré d’urgence et de besoin d’aide qui permet de personnaliser la suite des événements.
En effet, les équipes seront notifiées plus ou moins rapidement selon le degré d’urgence. Pour ce faire, elles ont utilisé une option de “multiselect” de types d’aides recherchées et Make iterator pour traiter les réponses sélectionnées.
3. Des réponses immédiates pour les cas d’urgence - Bot automatique x Airtable / Make x Gmail
Certaines situations ne permettent pas d’attendre d’avoir renseigné un formulaire.
Hélène, Magali et Léna ont donc adapté leur scénario de prise de contact au cas de l’urgence extrême en remplaçant le formulaire par un chat instantané allégé avec l’outil Landbot.
Le processus complet est de nouveau établi sur Make pour connecter les étapes :
- Les données échangées sur le chat automatique alimentent le Airtable
- Les équipes sont immédiatement notifiées de la situation d’urgence
- L’appel à l’aide est pris en charge par les équipes dès la réception du message
4. Transmettre des renseignements pratiques de manière 100% automatique - Tally x Airtable/Make x GMail
Grâce à la base de données construite sur Airtable et alimentée par les bénévoles qui s’inscrivent directement sur la plateforme, Side by Side dispose d’un réseau bien catégorisé d’aidants.
Lorsqu’un·e jeune demande des renseignements sur les aidants adaptés à sa situation via un formulaire, sa requête est analysée automatiquement sur Make et il reçoit instantanément une réponse par mail avec une liste d’aidants selon 2 catégories (professionnels ou associations) et qui correspondent à sa zone géographique.
Une solution très complète, 100% Nocode mais freinée par la réalité administrative
Les lauréates du premier hackathon de l’Alegria.academy ont réalisé en 3 jours seulement (à temps partiel qui plus est !) une très belle solution stable et fluide qui répond à un besoin humanitaire réel.
Elles ont tiré le maximum de chaque outil Nocode en personnalisant les scénarios grâce à des automatisations sur Make, utilisant des outils différents pour alimenter une base de données Airtable (formulaire ou chatbot) et ont eu une approche très “user-centric” en partant des cas d’usage grâce aux user stories et la réalisation de maquettes sur Figma.
Le petit plus de leur site qui lui donne une crédibilité supplémentaire et ajoute un degré de professionnalisme est l’utilisation du CMS de webflow pour intégrer du “rich content” soit de la documentation et des ressources sur le thème de leur action.
En effet, elles ont même pensé à intégrer des verbatims de jeunes et des lectures sur des sujets d’actualité. Chapeau !
Malheureusement, il n’est pas certain que Side by Side voit le jour et apporte aux jeunes en difficulté le niveau d’aide visé par les trois jeunes femmes.
En effet, elles se sont vite heurtées à des contraintes pour obtenir des autorisations. En particulier, le traitement des données médicales, notamment pour les mineurs, pose problème. Leur mission doit rester 100% bénévole et elles espèrent lui donner une chance à échelle locale pour commencer.
.webp)
.svg)
