Tfoumax
Directrice artistique & UI Designer
J'ai retourné une page qui perdait les parents en scroll infini en une page qui vend le prix en trois secondes. Seule designer sur le projet, de l'audit à la livraison, avec le Business Owner et le SDM.
En bref
Problème : une landing page qui faisait défiler les parents trop longtemps avant de leur donner ce qu'ils cherchaient. Le prix et les avantages étaient là mais enfouis là où personne ne les voyait
Solution : une page à part entière pour les abonnements et les avantages, fond sombre pour se distinguer d'un marché jeunesse saturé de couleurs vives, prix remontés dès le premier scroll, personnages en cut-out, cards redéfinies et hiérarchisées
Impact : V2 validée. Tfoumax migre vers TF1+, je n'ai donc pas les retours sur les KPI.
Contexte
Tfoumax, plateforme de streaming jeunesse du groupe TF1, plus de 4 millions d'abonnés. L'équipe a constaté une baisse des abonnements pris en direct, hors bouquet ou box. Sur un marché saturé, face à des concurrents gratuits comme Okoo et YouTube Kids, chaque parent arbitre vite. Le constat : la page n'était pas claire, les avantages enfouis trop bas pour peser dans cet arbitrage.
Analyse concurrentielle
Benchmark de 6 plateformes de streaming jeunesse et grand public; Disney+, Benshi, Gulli Max, Amazon Prime, TF1+, YouTube Kids; sur les critères clés de conversion. Quatre constats ont directement guidé la V2 :
Harvey Ball complet et captures concurrents en carrousel
Harvey Ball concurrentiel
Benchmark concurrentiel
Pousser plus loin
La première version était une évolution prudente mais pas assez différenciante. Convaincue qu'on pouvait aller plus loin, j'ai sollicité les retours de l'équipe Product Design de TF1+, avec qui je travaillais en parallèle. Leur regard extérieur a permis de confirmer et de préciser ce que je ressentais, et de repartir sur une direction vraiment plus ambitieuse.
CE QUI N’A PAS CONVAINCUE
Confusion visuelle
— cover identique à la homepage abonné, aucune identité propre à l'offre
Avantages noyés
— prix et arguments clés relégués en bas de page
Cards illisibles — rien n'indique qu'elles sont cliquables
LES DÉCISIONS PRISES
Fond sombre
— identité distincte de la homepage abonné, lecture plus premium
Personnages en cut-out
— dynamisme sans mélanger les univers de marque
Prix remontés en haut
— l'information qui déclenche l'abonnement, visible tout de suite
Cards redéfinies
— claires, identifiables, hiérarchisées
La page a été livrée et mise en ligne, V2 choisie comme direction. Ce que j'en retiens : une direction visuelle forte peut changer la perception d'une offre avant même que les chiffres parlent encore faut-il pouvoir le prouver, ce que la migration ne m'a pas permis ici.
UI Kit — Cards abonnement
Le composant qui résout la friction #3 identifiée plus haut : des cards enfin identifiables comme cliquables. Palette sombre partagée avec l'identité TF1+, deux familles typographiques, Baloo pour les titres, prix et CTA, Inter pour les liens et détails, quatre états réels testés avant validation (Mensuel/Annuel × Fermée/Ouverte).
Palette, typographie et composant — fichier Figma
Prototype
Les décisions ci-dessus, en version interactive — cliquez pour voir comment l'expérience a évolué.
Système graphique
Pictos
Contrainte : les enfants ne lisent pas encore, donc chaque entrée du menu doit être comprise par son image, pas par son label. Filaire au repos, plein au survol, deux états pour chacun. 5 pictos système repris (Recherche, S'abonner, Accueil, Favoris, Paramètre), 7 créés : Héros, Films, Découvertes, Nouveautés, Collections, Éducatif, En famille, Éveil
Planche d'icônes — filaire au repos, plein au survol
Menu en usage réel sur TV
Badges
Les anciens badges manquaient de cohérence : couleurs différentes d'une carte à l'autre, rendu plus décoratif qu'informatif, personne ne les identifiait comme des badges. J'ai testé plusieurs positions sur la vignette. En haut, il aurait fallu refaire toutes les vignettes pour laisser de la place au-dessus du logo, écarté, le coût de production dépassait le bénéfice. La version en bas a été retenue, validée par les équipes et par les utilisateurs.
Recherche cards & badges en contexte sur la page Découvertes
Collections
Sur la home, les collections (des programmes regroupés par thème) se confondaient visuellement avec les vignettes de programme classiques, en grille verticale identique. J'ai introduit un format horizontal pour casser ce rythme et signaler clairement qu'il s'agit d'un regroupement, pas d'un programme unique. Pour aller plus loin dans la différenciation, j'ai incarné ces collections avec les Hoofs, les mascottes de l'univers TFOU, absentes jusque-là de Tfoumax, un rappel direct avec la chaîne TV.
Wireframe fidèle — structure de la page & Visuel web — home avec Collections
Takeaways
Ce que ce projet m'a appris :
Une direction visuelle forte ne se décrète pas, elle se construit décision par décision, chacune adossée à une preuve différente : un benchmark, un avis externe, un test utilisateur, un arbitrage de coût. C'est cette accumulation de preuves qui m'a permis de défendre la V2 avec conviction, pas l'inverse.
Ce que j'aurais poussé plus loin :
V2 validée et choisie comme direction, mais la migration vers TF1+ a coupé la mesure avant que les KPI n'aient pu être suivis. Je n'ai donc jamais eu la confirmation chiffrée que cette conviction était la bonne.
