EdTech · Learning · Intelligence Artificielle
·
France
Vline — Apprentissage vidéo intelligent
J’ai repensé l’expérience web de Vline pour transformer une solution EdTech complexe en une proposition de valeur immédiatement compréhensible. L’objectif : expliquer en quelques secondes comment Vline permet d’extraire l’essentiel d’une vidéo, de mémoriser durablement les connaissances et de réviser au bon moment, tout en créant une expérience digitale immersive capable de refléter l’innovation du produit.
RÔLE
UX/UI Designer · Framer Designer & Developer
SCOPE
UX Strategy · UX/UI Design · Art Direction · Copywriting · Motion Design · Responsive Design · Framer Development · Conversion Optimization
TOOLS
Figma · Framer · Midjourney · Gemini · Veo · Kling · AI Creative Tools
Le challenge
CONTEXT
Vline développe une nouvelle manière d’apprendre à partir de contenus vidéo. L’utilisateur peut importer ses vidéos, identifier les passages qu’il souhaite retenir, les organiser en moments clés puis être sollicité au moment optimal pour les réviser grâce à un système inspiré de la répétition espacée. À terme, l’intelligence artificielle enrichit cette expérience avec l’extraction automatique des informations essentielles et la génération de contenus d’apprentissage.
CHALLENGE
Le principal défi consistait à rendre immédiatement compréhensible une proposition de valeur mêlant vidéo, mémorisation, intelligence artificielle et sciences cognitives. Le site devait éviter deux écueils : ressembler à une landing page SaaS générique ou devenir tellement spectaculaire que l’expérience visuelle prenne le dessus sur la compréhension du produit. Il fallait également convaincre une audience très large — étudiants, professionnels et autodidactes — tout en orientant chaque parcours vers un objectif central : le téléchargement de l’application.
Les objectifs
01
Clarifier la proposition de valeur
Permettre au visiteur de comprendre dès les premières secondes ce que fait Vline : transformer des vidéos en contenus d’apprentissage structurés, mémorisables et faciles à retrouver.
02
Créer une expérience mémorable
Construire une direction créative beaucoup plus immersive qu’une landing page SaaS traditionnelle, avec des animations, des transitions et des mises en scène du produit directement liées à l’apprentissage vidéo.
03
Transformer l’intérêt en téléchargement
Structurer la page autour d’un parcours de conversion progressif : compréhension du problème, découverte de la solution, preuve scientifique, démonstration du fonctionnement, projection dans des cas concrets puis appels à l’action.
Le process
01 — Comprendre
Transformer un produit complexe en promesse simple
Avant de designer l’interface, il fallait rendre Vline évident.
J’ai commencé par analyser le fonctionnement de l’application, sa cible et son modèle d’apprentissage afin d’identifier sa valeur fondamentale. Vline ne devait pas être présentée comme un simple outil de bookmarking vidéo, mais comme une solution permettant de passer d’une consommation passive de contenu à une mémorisation active. Cette réflexion a permis de recentrer toute la landing page autour d’une promesse simple : apprendre plus efficacement à partir de ses vidéos.
03 — Immerger
Faire ressentir l’innovation
L’animation n’est pas décorative : elle explique le produit.
J’ai développé une direction créative où le mouvement accompagne directement la compréhension. Interfaces en perspective, éléments flottants, animations au scroll, transitions entre écrans de l’application et micro-interactions permettent de donner de la profondeur à la page tout en montrant concrètement le fonctionnement de Vline. Le rythme alterne volontairement séquences immersives et zones plus calmes afin de préserver la lisibilité.
Key UX Decisions
Quelques décisions qui ont directement influencé l’expérience finale.
01
Expliquer avant de convaincre
PROBLÈME
Vline combine plusieurs notions — vidéos, moments clés, répétition espacée, notifications et intelligence artificielle — qui peuvent rapidement rendre le discours abstrait ou technique.
DÉCISION
J’ai privilégié un copywriting particulièrement direct et une hiérarchie progressive. La proposition de valeur est expliquée immédiatement, puis chaque fonctionnalité est introduite uniquement lorsqu’elle devient pertinente dans le parcours. Le visiteur comprend ainsi d’abord pourquoi Vline lui est utile avant d’entrer dans son fonctionnement détaillé.
02
Transformer les fonctionnalités en démonstration
PROBLÈME
Une simple liste de fonctionnalités n’aurait pas suffi à montrer la différence entre regarder une vidéo et réellement apprendre avec Vline.
DÉCISION
La section « Comment ça marche » transforme le produit en expérience visuelle : import des vidéos, bibliothèque personnelle, création de moments clés et rappels intelligents sont présentés comme un parcours continu. Les écrans et animations permettent au visiteur de comprendre le produit sans avoir à lire une longue documentation.
03
Créer de la crédibilité sans témoignages
PROBLÈME
Vline étant encore une solution récente, la marque ne disposait pas encore d’un volume suffisant de témoignages et de preuves sociales pour construire une section classique de reviews.
DÉCISION
J’ai remplacé cette preuve sociale par une preuve rationnelle : données sur l’apprentissage vidéo, oubli de l’information et productivité, associées aux principes scientifiques utilisés par Vline. Cette approche permet de renforcer la crédibilité de la solution tout en restant cohérent avec son positionnement EdTech.
Direction visuelle
Learning meets technology
La direction artistique combine les codes de la technologie et de l’apprentissage dans un univers sombre, premium et immersif. Le bleu nuit crée une base sérieuse et technologique tandis que les accents lumineux apportent énergie et profondeur. Les interfaces flottantes, effets de perspective et animations donnent l’impression d’entrer dans l’écosystème Vline, sans tomber dans une esthétique futuriste gratuite.
Aa
Titres
Manrope — Bold / SemiBold
Aa
Textes
Inter — Regular / Medium
COULEURS
#0B1620 · Blanc · Jaune accent · Bleu lumineux · Gris neutres
L'interface finale
Le résultat
La refonte a transformé Vline d’une présentation produit relativement classique en une véritable expérience de marque orientée acquisition. La nouvelle landing page clarifie immédiatement la proposition de valeur, rend le fonctionnement de l’application beaucoup plus tangible et donne à Vline une présence digitale plus cohérente avec son positionnement innovant. L’expérience a également été conçue pour augmenter l’engagement avec les CTA de téléchargement et mieux préparer les visiteurs à passer du site à l’application.
+ Conversion
Téléchargements de l’application
Une proposition de valeur plus claire, des démonstrations produit plus concrètes et des CTA mieux intégrés au parcours permettent de réduire les frictions avant le téléchargement. À remplacer par l’évolution réelle des téléchargements App Store après mise en ligne.
+13 %
Engagement sur la landing page
Le storytelling au scroll, les animations et les démonstrations du produit ont été conçus pour augmenter le temps passé sur la page et encourager davantage de visiteurs à découvrir les sections clés. À remplacer par les données Analytics réelles : durée moyenne, profondeur de scroll ou taux d’engagement.
100 %
Expérience responsive
La nouvelle expérience a été entièrement adaptée aux formats desktop et mobile afin de conserver la compréhension, les interactions et l’identité immersive de Vline sur l’ensemble des principaux écrans.
Vline dispose désormais d’une landing page capable de traduire visuellement l’ambition du produit : transformer la consommation passive de vidéos en apprentissage actif. Le redesign combine stratégie UX, pédagogie, sciences cognitives, animation et développement Framer pour créer une expérience plus différenciante, plus compréhensible et davantage orientée conversion. Au-delà de l’esthétique, chaque décision vise à rapprocher le visiteur d’une action concrète : comprendre Vline, se projeter dans son usage et télécharger l’application.
