Télé Loisirs

Responsive design du premier site de programme TV consulté en ligne par les Français

Rôle
Product designer
Type
Responsive design
B2C
Période
2020-2021
Collaboration
Product designer
Product managers
Product owners
Engineering
Livrables
User research
User stories
UX/UI design
Design system
Vue d'ensemble

Télé Loisirs est un magazine français consacré à la télévision et au divertissement, qui existe également sous la forme d’un site Internet très consulté. Il propose des programmes TV détaillés, des actualités sur les séries, films et émissions, ainsi que des interviews et dossiers sur les célébrités. Avec son site, il est aujourd’hui le plus consulté en matière de programme TV en ligne, offrant aux utilisateurs un guide pratique et complet pour organiser leur semaine télé tout en restant informés de l’actualité du petit écran.

Contexte

Je rejoins Prisma Media en novembre 2020 pour être en charge du design du siteTélé Loisirs qui attire près de 5 millions de Français chaque jour. Au-delà de sa traditionnelle grille de programmes, le site propose aussi des articles sur l'actualité, les people, le sport, le cinéma, et met même à disposition des petits jeux en ligne pour inciter les utilisateurs à rester connectés plus longtemps.

Problématique

Le défi produit de Télé Loisirs dépasse la simple consultation de la grille TV : jusqu'ici, les utilisateurs visitent le site pour vérifier rapidement les programmes, puis repartent aussitôt. Qui plus est, de plus en plus de personnes se détournent des chaînes de télévision au profit des plateformes SVOD telles que Netflix, MyCanal, Disney+ etc, et n'ont donc plus grand intérêt à se connecter sur le site même pour une visite éclair : le traffic baisse donc de manière drastique.

Cette nouvelle dynamique génère un taux de rebond élevé et limite la rétention, et empêche le site de capitaliser sur son audience.
Comment inciter les utilisateurs à cliquer sur les articles et/ou poursuivre leur visite sur le site ?

Objectifs

À partir de ces constats, le grand objectif tombe sous le sens : réduire le taux de rebond. Plusieurs objectifs secondaires ont été définis autour de celui-ci, afin de proposer une expérience plus personnalisée aux utilisateurs et les inciter à rester / revenir sur le site après leur première visite :

Élargir le scope du traditionnel "programme TV"
Créer des parcours immersifs et interactifs
Attirer un public plus jeune / actuel
Process
Synthèse et hiérachisation

En étroite collaboration avec l'UX researcher, nous avions pour coutume de structurer et de hiérarchiser les informations récoltées afin de créer une liste de users stories claires et concrètes, afin d’esquisser les bonnes directions à emprunter et ainsi anticiper sainement la phase d’idéation imminente. Nous avons interrogé plusieurs utilisateurs et le constat est sans appel : le site tel qu'il existe ne leur ressemble plus. La page d'accueil leur semble désuète, avec des programmes qui ne collent pas du tout à leurs envies et leur quotidien. Chez plusieurs d'entres eux subistent tout de même un intérêt certain pour quelques chaînes nationales qui hébergent de célèbres programmes toujours très appréciés (comme Koh-Lanta, Top Chef etc.)

Lors d’une étude quantitative, nous avons également découvert qu’une part importante des utilisateurs du site Télé-Loisirs seraient intéressés par la possibilité de recevoir une notification lorsque des programmes de leurs acteurs préférés vont passer à la télévision.

Voici quelques-uns des verbatims reformulés en user stories :

En tant que

utilisateur

Je souhaite

pouvoir personnaliser l'affichage de la grille TV avec mes chaînes préférées

Afin

de voir en un coup d'oeil si des programmes sont susceptibles de m'intéresser

En tant que

utilisateur qui ne regarde pas la télé mais des films sur les plateformes

Je souhaite

autre chose qu'une grille de programmes TV

Afin

d'avoir une interface appropriée à mes besoins

En tant que

utilisateur client des plateformes et fatigué en rentrant du travail

Je souhaite

avoir des suggestions de programmes basées sur mes goûts ou mes envies du moment

Afin

de ne pas mettre trop de temps à trouver quoi regarder et ne plus manger froid

En tant que

fan de Dix pour cent

Je souhaite

découvrir d'autres programmes avec les mêmes acteurs et actrices

Afin

d'être sûr de regarder un programme avec des acteurs qui jouent bien

Idéation

Lors de nos ateliers et autres réunions, nous avons donc choisi de mettre en place les fonctionnalités suivantes, respectivement sur desktop et sur mobile :

Personnaliser la grille de programmes*

Permettre aux utilisateurs d'ajouter ou de supprimer les chaînes de leur choix sur la grille et d'enregistrer ces paramètres par défaut pour optimiser leurs futures visites.

Créer une page d'accueil "SVOD"

Permettre aux utilisateurs d'accéder en un clic à des programmes relatifs aux contenus des plateformes auxquelles ils sont abonnés, et leur permettre de filtrer en fonction de leurs envies ou humeurs du moment.

Recommendations en fonction des stars préférées

Permettre à l'utilisateur de recevoir directement dans sa boîte mail des alertes programmes TV avec ses stars favorites.

*cet objectif avait déjà été défini avant mon arrivée, aussi je ne serai pas en mesure de détailler ci-dessous tout le process avant design et implémentation de la solution.

Solution
Personnaliser la grille de programmes

L'utilisateur peut désormais personnaliser sa grille de programmes pour qu'il n'ait que celles qui l'intéressent réellement :

Créer une page d'accueil SVOD

L'utilisateur peut :
- sélectionner / désélectionner des plateformes en fonction de ses abonnements
- filtrer les recommendations selon un thème précis, de la même manière que sur les plateformes SVOD

Recommendations de programmes en fonction des stars préférées

Deux flows principaux sont retenus pour la feature MVP :
1. Ajouter / Retirer un acteur des favoris depuis la page d'un programme
2. Ajouter / Retirer un acteur des favoris depuis la page biographie d'un acteur

Deux autres flows seront à prévoir post MVP selon adoption par les utilisateurs :
3. Ajouter / Retirer un acteur des favoris depuis des résultats de recherche
4. Activer / Désactiver les alertes en fonction des acteurs présents dans la liste de Favoris

Ci-dessous, les deux principaux user flows en détails.

1. Ajouter / Retirer un acteur des favoris depuis la page d'un programme :

2. Ajouter / Retirer un acteur des favoris depuis la page biographie :

Dans le cadre du MVP, nous partons du principe que les notifications seront automatiquement générées suite à un "Suivre", et automatiquement désactivées suite à un "Ne plus suivre".

Ci-dessous, quelques designs.

Ajouter un.e comédien.ne en favoris depuis une page programme :

Légère itération UI du bouton "Suivre" :

Ajouter un.e comédien.ne en favoris depuis une page biographie :

Plusieurs outils de promotion ont été envisagés afin de faire connaître la fonctionnalité aux utilisateurs :
- emailings
- popin (une seule par utilisateurs, quelque soit le nombre de visites, pour ne pas trop perturber l'expérience.)
- bandeaux promotionnels éphémères

Impact et résultats

Après échanges et plusieurs A/B tests mis en place, voici les indicateurs de succès que je recommendais alors de suivre pour mesurer la réussite ou l'échec du projet :

- Lister les retours utilisateurs sur la feature
- Animer des tests utilisateurs à distance
- Mesurer le taux d'utilisateurs qui ont ajouté un acteur en favoris sur une période donnée
- Mesurer le taux de consultations de recommendations via alerte
- Mesurer le taux d'alertes enregistrées sur un programme découvert suite à l'ouverture d'une recommandation
- Mesurer le taux de rebond et de rétention avant et après implémentation sur une même durée et les comparer

Envie de travailler
avec moi ?
Construisons ensemble des produits utiles et performants.
Me contacter