MakeBetter — Case study motion design
MakeBetter, fais grandir et évoluer ta communauté à l'aide d'outils modernes et intuitifs.
Rôle
Motion designer -- Animation d'interface, Parcours utilisateur, Interactivité
Logiciels utilisés
After Effects
Illustrator
Chronologie & Statut
2 mois de réalisation, Lancé en avril 2024
Aperçu
MakeBetter est une plateforme développant des outils numériques (SaaS) pour créateurs de
contenu dans l'objectif de créer, améliorer et personnaliser sa communauté sur les
réseaux
sociaux.
Suite à la refonte de la plateforme, j’ai été chargé à la conception de l’animation de
mise
en avant de l’outil principal de la plateforme, le créateur d’embeds.
L’objectif est de valoriser de manière dynamique les différents points clef de l’outil.
Il était une fois...
Diose est un collectif de passionnés qui met en oeuvre différents projets
numériques afin de
répondre à des besoins tels que la gestion, la personnalisation d’identité,
l'amélioration
de performances et autres...
En janvier 2023 né le projet MakeBetter.
D’une volonté partagée de faciliter et valoriser les interactions entre créateurs
de
contenu
et communauté, la plateforme propose progressivement des outils spécialisés.
C’est en octobre 2023 qu’est annoncée la version 2.0 de MakeBetter, cette refonte complète de la plateforme promet des améliorations aussi bien au niveau de ses outils, de ses fonctionnalités et de son expérience utilisateur.
Des intégrations sur Discord ?
Un embed est un élément intégré à l’application Discord, utilisé afin de proposer des messages plus riches en informations et en contenu. Ce format améliore et facilite les interactions entre les utilisateurs, par exemple en automatisant l’organisation d’un serveur, ou en permettant de partager efficacement des informations. Le créateur d’embeds est un outil mis au point afin de faciliter la création et la personnalisation de ces embeds.
L'interface complexe du créateur d'embeds fait peau neuve.
L’ensemble des plateformes de Diose sont pensées afin de donner les clés en main pour
créer
les meilleurs projets selon tout type de communauté.
L’infinité de personnalisation proposées par le créateur d'embeds font de sa nouvelle
interface avancée un concentré de fonctionnalités connectées difficiles à
représenter.
Le plus gros challenge derrière cette animation fut donc le suivant :
Mettre en scène un fil conducteur intuitif pour promouvoir la richesse et la
pluralité
de fonctionnalités du créateur d’embeds.
Pour maintenir une cohérence avec la charte de MakeBetter et garantir au spectateur une narration intuitive dans l’UI du créateur d’embeds, nous avons choisi d’adopter plusieurs aspects techniques au sein de l’animation :
L’univers visuel et interactif sélectionné est volontairement similaire à celui du créateur d’embeds. La vidéo, présentée directement sur la page de présentation de l’outil, permet alors d’introduire au spectateur la manière dont celui-ci doit naviguer pour utiliser le créateur d’embeds.
L’animation met en place un point d’accroche principal chez le spectateur, que celui-ci va suivre tout du long de l’animation. De cette sorte, on parcourt l’ensemble de l’interface en guidant avec fidélité l’oeil vers les éléments mis en avants.
La navigation se retrouve simplifiée avec une continuité dans les interactions de la souris. Cela rend l’animation plus linéaire et intuitive vis à vis des évènements qui rentrent en jeu tel que les sous-menus, pop-ups...
Une expérience innovante au goût du jour.
Le créateur d’embeds remis à neuf apporte son lot de nouveautés, l’objectif de l’animation est de mettre en avant ces fonctionnalités par le biais de mises en situation :
L’enregistrement, le partage et l’utilisation de templates permet de
facilement
créer et
personnaliser chaque embed selon les besoins de l’utilisateur.
Une intelligente artificielle est intégrée afin d’améliorer la qualité
rédactionnelle de son
embed.
L’édition collaborative en équipe permet de modifier en temps réel ses
propres
embeds.
Accompagné d’un système de permissions avancées.
La possibilité d’envoyer ses messages au travers de webhook permet de
simplifier et
automatiser l’envoi de certaines informations vers Discord.
Donner vie au créateur d'embeds.
La première étape de conception fut la reproduction et l’adaptation de l’interface de l’outil. L’objectif est d’individualiser chaque élément de l’interface afin de rendre celle-ci entièrement flexible. Cela va permettre par la suite de faciliter les processus de création et d’animation.
On commence par quoi ?
L’enjeu autour du storyboard est de planifier un parcours utilisateur intuitif et immersif. Avec les nombreuses fonctionnalités à montrer, nous avons donc réalisé un plan logique selon les étapes de conception nécessaires d’un embed MakeBetter ainsi que de leur disposition dans l’interface.
Storyboard final :
Les dessous de l'animation
Quelques extraits de ce qu'il se passe avec chaque calque derrière le visuel :
Statistiques : 366 calques - 2071 images clés
MakeBetter, vraiment pour tout le monde.
Le créateur d'embeds se veut d'être un outil ouvert à l'international. Nous avons donc pour terminer réalisé une version déclinée traduite en anglais.
