Contexte
Dans le cadre de mon alternance chez Aplim en 3eme année d’un Bachelor Webdesign, j’ai travaillé sur la création de tutoriels pour présenter des fonctionnalités de leurs logiciels, notamment EcoleDirecte.
EcoleDirecte est un portail web et une application qui permet de mettre en relation les élèves, parents, professeurs et personnels d’un établissement scolaire et il compte 4 millions d’utilisateurs. L’application permet de voir les notes, les devoirs, les mots dans le cahier de correspondance, les absences de l’élèves, de payer la cantine, parler avec les professeurs…
Mais avec autant de fonctionnalités, l’utilisation de l’application peut être difficile pour certains personnels ou familles… Donc pour aider le plus grand nombre d’utilisateurs, nous avons lancé un projet de tutoriels vidéo. Ces vidéos expliqueraient rapidement et simplement une fonctionnalité d’EcoleDirecte.
Dans ce projet, j’ai travaillé avec Pierre Bretaudeau sur la partie technique (enregistrement d’écran, motion design, montage…) et Emilie Charles et Frédérique Bernard pour la partie explication de fonctionnalités du tutoriel.
1. La construction d’un cahier des charges
Pour commencer le projet, nous avons avec Pierre travaillé sur un cahier des charges qui regroupait à la fois des recommandations pour la vidéo (par exemple la création de sous-titres), mais aussi une présentation de la « structure type » d’un tuto. Voici la structure d’un tuto :
- INTRO (5-10s) : Titre et présentation du tuto en animation
- EXPLICATION (2-3 min) : Le formateur présente une fonctionnalité d’EcoleDirecte
- CALL-TO-ACTION : Mise en avant du fait qu’on puisse télécharger l’ application sur les playstores
- OUTRO : clôture de la vidéo avec le logo d’Aplim et des vidéos recommandées
De plus, nous avons dû trouver un outil de capture vidéo et l’expliquer à nos experts EcoleDirecte pour qu’ils puissent réaliser les tutos de façon autonome. Nous avons choisi OBS studio, car c’est un outil libre très populaire et facile à prendre en main.
2. Le motion design
Pour captiver rapidement les viewers, j’ai décidé de créer plusieurs motions design au début et à la fin des tutoriels.
Les techniques que j’ai eu à utiliser sont :
- L’incrustation vidéo (vidéo du portable avec EcoleDirecte dessus)
- Un peu de 3D d’After effects (quand le PC s’ouvre et se ferme au début et à la fin de la vidéo)
- Le déplacement de caméra 3D
- Des motion design en 2D (animation de texte ou de forme vectoriel)
3. La création de « templates »
Afin de pouvoir réaliser des tutoriels le plus rapidement possible, j’ai créé des templates After Effects pour l’introduction, le call to action et l’outro de la vidéo. Ils sont facilement modifiables et permettent de gagner beaucoup de temps dans la production d’un tutoriel, car il n’y a pas d’animation à refaire à chaque fois. Par exemple, j’ai pu monter et sous-titrer le deuxième tutoriel EcoleDirecte (gestion des post-it) en une matinée de travail !
Le résultat
Pour l’instant, nous avons réalisé deux tutoriels sur l’application EcoleDirecte, découvrez les ci-dessous :
Le premier tutoriel EcoleDirecte (première connexion) est sortie le 8 juin 2020. Il a fait plus de 500 vues, ce qui est un très bon chiffre en moins d’un mois… Mais nous pourrons mieux connaitre l’impact de ces tutoriels en début septembre pour la rentrée scolaire.