TF1+ Premium
Date :
2025
Team :
Product Designer, PM
Contexte :
Streaming SAAS · UI Designer & DA
UI Designer & Directrice artistique
De la création du système d'icônes aux déclinaisons CRM, in-app et push, j'ai traduit une couleur en identité. Seule designer sur ce périmètre, en itération continue avec les équipes produit, marketing et tech.
En bref
Problème : rendre l'offre Premium identifiable sans écraser l'expérience gratuite.
Solution : le violet appliqué au texte, un système d'icônes cohérent, des visuels incarnés pour illustrer les programmes, déployés sur tous les supports.
Impact : le changement de wording du CTA a généré +2 points de conversion (5,05% → 7,1%). La DA Premium reconnue par les utilisateurs.
Contexte
TF1+ compte jusqu'à 42 millions d'utilisateurs par mois. En parallèle du gratuit, TF1+ propose une offre Premium (sans pub, avant-première), l'enjeu : la rendre immédiatement identifiable sans écraser l'expérience gratuite. Le point de départ était minimal : une couleur, un logo dont l'usage était interdit, et la typographie Sora imposée. Aucun système, aucune règle, aucune icône.
Point de départ du brief
Pistes écartées
Idées 1 : l’encart violet
Le Premium devient visible au premier coup d'œil
Le violet écrase l'image du programme
Aucune hiérarchie entre message Premium et contenu éditorial
Écartée : trop dominant, au détriment du gratuit.
Idées 2 : le violet dans l’image
Solution plus subtile, moins intrusive visuellement
La lecture du signal Premium devient trop discrète
Le texte ne répond pas aux critères d'accessibilité en matière de lisibilité
Risque juridique : modifier l'image d'un programme ou d'une personne sans validation
Écartée : trop subtile, et risque légal.
Idées 3 : le violet sur le texte (retenue)
Le violet devient un code : il souligne les avantages pour mieux les mettre en avant, et se retrouve rappelé jusque dans le CTA. Décliné à travers des visuels immersifs plutôt qu'une affiche statique et figée, le programme s'incarne, se met en mouvement, se vit plus qu'il ne se regarde.
Contrainte : au-delà de 3 programmes mis en avant sur un même visuel, la lisibilité se dégrade, la règle a été fixée à 3 maximum.
Déclinaisons Premium : TV, web, mobile, CRM. Marketing
Système d’icônes Premium
Quatre pictogrammes (sans pub, avant-première, téléchargement, lecture continue), itérés pour rester lisibles en petit format et cohérents avec la famille d'icônes TF1+, un critère d'accessibilité visuelle autant que de style.
Système d'icônes : versions retenues et pistes explorées
A/B Testing
Wording du CTA : 5 formulations testées, "Passer à TF1+ sans pub" retenue (7,1% de clics, contre 5,05% pour "Essayer gratuitement").
Couleur du CTA : fond violet / texte blanc retenu plutôt que fond blanc / texte violet, pour un meilleur contraste et une meilleure lisibilité, conforme aux exigences WCAG de contraste texte/fond.
Résultats des tests : wording et couleur du CTA
Takeaways
Ce que ce projet m'a appris :
Partir d'une couleur sans règles d'application, c'est plus complexe qu'il n'y paraît. Ce projet m'a appris à mieux cadrer la demande en amont et à traduire une direction floue en système visuel cohérent. Définir les contraintes avant de lancer les itérations évite de retravailler des directions entières.
Ce que j'aurais poussé plus loin :
J'aurais aimé être plus impliquée dans les phases de test et dans la conception de la landing page. Des décisions visuelles importantes ont été prises sans validation utilisateur, c'est une limite que j'ai identifiée et que j'intègre différemment aujourd'hui.
