groupe claro · media/streaming · SENIOR PRODUCT DESIGNER · JUIN 2020 — 2021
groupe claro · media/streaming ·
SENIOR PRODUCT DESIGNER ·
JUIN 2020 — 2021
groupe claro · media/streaming ·
SENIOR PRODUCT DESIGNER · JUIN 2020 — 2021
claro tv+
claro tv+
Plateforme de streaming de Claro Brésil, avec plus d'1 million d'abonnés et 2 millions de visites par mois : contenu inclus dans l'abonnement, contenu à acheter ou à louer, sur app, web et smart TV. J'y ai été la seule designer pendant huit mois, avant de contribuer à structurer l'équipe design qui a pris le relais. Le flux d'achat étant stratégique pour le business, chaque évolution devait se faire sans fragiliser l'activité.
Plateforme de streaming de Claro Brésil, avec plus d'1 million d'abonnés et 2 millions de visites par mois : contenu inclus dans l'abonnement, contenu à acheter ou à louer, sur app, web et smart TV. J'y ai été la seule designer pendant huit mois, avant de contribuer à structurer l'équipe design qui a pris le relais. Le flux d'achat étant stratégique pour le business, chaque évolution devait se faire sans fragiliser l'activité.
PROJET 01 · Refonte du flux de location
PROJET 01 · Refonte du flux de location
PROJET 01 · Refonte du flux de location
PROJET 01 · DIGITAL TEAM
PROJET 01 · DIGITAL TEAM
Louer un film est un achat d'impulsion.
Notre parcours était trop long.
Louer un film est un achat d'impulsion.
Notre parcours était trop long.
PROBLÈME
PROBLÈME
Nos utilisateurs payaient déjà un pack — TV, ou TV + internet + mobile. La location était un achat supplémentaire, déclenché en navigant : un contenu assez intéressant pour payer, avec un nombre de jours limité pour le regarder. La décision se prend en quelques secondes.
Nos utilisateurs payaient déjà un pack — TV, ou TV + internet + mobile. La location était un achat supplémentaire, déclenché en navigant : un contenu assez intéressant pour payer, avec un nombre de jours limité pour le regarder. La décision se prend en quelques secondes.
Le tunnel enchaînait beaucoup trop d'écrans, dont une validation d'âge placée avant le paiement. L'utilisateur changeait souvent d'avis avant d'avoir terminé, et l'équipe constatait des abandons à chaque étape.
Le tunnel enchaînait beaucoup trop d'écrans, dont une validation d'âge placée avant le paiement. L'utilisateur changeait souvent d'avis avant d'avoir terminé, et l'équipe constatait des abandons à chaque étape.
Avant de pouvoir redessiner le flux, il fallait régler l'état de nos fichiers. Trois obstacles bloquaient le travail:
Avant de pouvoir redessiner le flux, il fallait régler l'état de nos fichiers. Trois obstacles bloquaient le travail:
Avant de pouvoir redessiner le flux, il fallait régler l'état de nos fichiers. Trois obstacles bloquaient le travail:
CONTRAINTES
CONTRAINTES
Deux outils là où un seul suffisait désormais.
Les maquettes vivaient dans Sketch et l'équipe tech recevait ses specs dans Zeplin — une combinaison qui avait fait ses preuves, mais qui doublait le travail. Figma réunissait maintenant maquette, handoff et versioning au même endroit. J'ai migré l'ensemble des fichiers pendant la refonte du flux.
Deux outils là où un seul suffisait désormais.
Les maquettes vivaient dans Sketch et l'équipe tech recevait ses specs dans Zeplin — une combinaison qui avait fait ses preuves, mais qui doublait le travail. Figma réunissait maintenant maquette, handoff et versioning au même endroit. J'ai migré l'ensemble des fichiers pendant la refonte du flux.
Rien ne distinguait le livré de la recherche.
Les fichiers accumulaient pistes, explorations et écrans livrés sans hiérarchie. En les reprenant pour cartographier le flux, j'ai constaté que la majorité des écrans Figma ne correspondaient plus à ce qui était en production.
Rien ne distinguait le livré de la recherche.
Les fichiers accumulaient pistes, explorations et écrans livrés sans hiérarchie. En les reprenant pour cartographier le flux, j'ai constaté que la majorité des écrans Figma ne correspondaient plus à ce qui était en production.
La seule source de vérité était le produit en ligne.
Pour comprendre un parcours, il fallait ouvrir l'app, le site et la smart TV et le refaire soi-même. J'ai fait de la remise à jour des écrans un livrable du projet, en commençant par l'achat, et j'ai construit le design system par ses atomes et molécules pour pouvoir refondre le reste plus vite.
La seule source de vérité était le produit en ligne.
Pour comprendre un parcours, il fallait ouvrir l'app, le site et la smart TV et le refaire soi-même. J'ai fait de la remise à jour des écrans un livrable du projet, en commençant par l'achat, et j'ai construit le design system par ses atomes et molécules pour pouvoir refondre le reste plus vite.
Cartographier l'existant avant de raccourcir le parcours
Cartographier l'existant avant de raccourcir le parcours
processus
processus
1
1
Cartographie du flux d'écrans complet sur Miro
Cartographie du flux d'écrans complet sur Miro
Une screen map de bout en bout, app, web et TV, partagée avec le PM et la tech. Voir la longueur réelle du tunnel a suffi à aligner tout le monde sur le problème.
Une screen map de bout en bout, app, web et TV, partagée avec le PM et la tech. Voir la longueur réelle du tunnel a suffi à aligner tout le monde sur le problème.
2
2
Wireframes des nouvelles propositions d'écrans
Wireframes des nouvelles propositions d'écrans
En basse fidélité, pour discuter de la structure du parcours plutôt que de son habillage, et vérifier tôt ce que la tech pouvait livrer sur chaque plateforme.
En basse fidélité, pour discuter de la structure du parcours plutôt que de son habillage, et vérifier tôt ce que la tech pouvait livrer sur chaque plateforme.
3
3
Validation avec l'équipe, puis avec le juridique
Validation avec l'équipe, puis avec le juridique
Deux décisions structurent le nouveau parcours. Les étapes d'achat passent en modales plutôt qu'en changements d'écran : l'utilisateur reste dans le contexte du contenu qu'il veut louer. Et la validation d'âge se déclenche au lancement de la lecture, non plus à l'achat — le point validé avec le juridique. Trois écrans en moins.
Deux décisions structurent le nouveau parcours. Les étapes d'achat passent en modales plutôt qu'en changements d'écran : l'utilisateur reste dans le contexte du contenu qu'il veut louer. Et la validation d'âge se déclenche au lancement de la lecture, non plus à l'achat — le point validé avec le juridique. Trois écrans en moins.
4
4
Tests utilisateurs sur les écrans de staging
Tests utilisateurs sur les écrans de staging
Tester sur le produit réel plutôt que sur un prototype a permis de valider le paiement et la lecture dans leurs conditions d'usage.
Tester sur le produit réel plutôt que sur un prototype a permis de valider le paiement et la lecture dans leurs conditions d'usage.
5
5
Implémentation accompagnée jusqu'à la mise en ligne
Implémentation accompagnée jusqu'à la mise en ligne
Specs et composants documentés dans Figma, revue des écrans développés avec la tech avant chaque livraison.
Specs et composants documentés dans Figma, revue des écrans développés avec la tech avant chaque livraison.
La preuve par les chiffres
La preuve par les chiffres
IMPACT
IMPACT
de 7 à 4 écrans
de 7 à 4 écrans
dans le flux de location
dans le flux de location
PROJET 02 · Refonte de la homepage, de la grille live et des pages film / série
PROJET 02 · Refonte de la homepage, de la grille live et des pages film / série
La page d'accueil ne disait pas ce qu'il y avait à regarder, et la grille live ne disait pas ce qui passait maintenant.
La page d'accueil ne disait pas ce qu'il y avait à regarder, et la grille live ne disait pas ce qui passait maintenant.
PROBLÈME
PROBLÈME
La homepage était confuse et datée face aux standards du marché, fixés par Netflix ou Prime Video.
La homepage était confuse et datée face aux standards du marché, fixés par Netflix ou Prime Video.
La grille de contenu live était trop petite pour être lisible. On n'y voyait pas ce qui était à l'antenne, ce qui allait commencer, ce qui pouvait être repris depuis le début, et il n'existait aucun moyen de programmer un rappel pour lancer un programme à son démarrage.
La grille de contenu live était trop petite pour être lisible. On n'y voyait pas ce qui était à l'antenne, ce qui allait commencer, ce qui pouvait être repris depuis le début, et il n'existait aucun moyen de programmer un rappel pour lancer un programme à son démarrage.
PROJET 02 · Refonte de la homepage, de la grille live et des pages film / série
PROJET 02 · Refonte de la homepage, de la grille live et des pages film / série
Partir des personas plutôt que
des tendances du marché.
Partir des personas plutôt que
des tendances du marché.
stratégie
stratégie
Pour cette refonte majeure, une équipe design venue d'un autre produit Claro m'a rejointe : une lead designer et deux designers, dont moi. Je portais la connaissance du produit et le design system.
Pour cette refonte majeure, une équipe design venue d'un autre produit Claro m'a rejointe : une lead designer et deux designers, dont moi. Je portais la connaissance du produit et le design system.
Nous avons commencé par des entretiens pour comprendre nos personas. Deux profils se dégageaient : des early adopters à l'aise avec les produits digitaux, et des late adopters. Beaucoup de late adopters n'utilisaient pas les plateformes les plus populaires du marché : ils les avaient essayées et les avaient trouvées confuses. Nous étions en 2020, au début de la pandémie, et ces personnes commençaient tout juste à sortir des quelques applications qu'elles maîtrisaient.
Nous avons commencé par des entretiens pour comprendre nos personas. Deux profils se dégageaient : des early adopters à l'aise avec les produits digitaux, et des late adopters. Beaucoup de late adopters n'utilisaient pas les plateformes les plus populaires du marché : ils les avaient essayées et les avaient trouvées confuses. Nous étions en 2020, au début de la pandémie, et ces personnes commençaient tout juste à sortir des quelques applications qu'elles maîtrisaient.
Notre question de cadrage
Notre question de cadrage
Comment moderniser et simplifier le design en tenant compte de toute
la variété de nos personas, des late adopters aux early adopters ?
Principaux Constats
Principaux Constats
Principaux Constats
1
1
Un parcours trop long entre la découverte et la lecture d'un contenu acheté ou loué — abandon fréquent avant l'étape finale.
Un parcours trop long entre la découverte et la lecture d'un contenu acheté ou loué — abandon fréquent avant l'étape finale.
2
2
2
Un design visuel en décalage avec les standards du marché, affaiblissant la perception de qualité et la compétitivité.
Un design visuel en décalage avec les standards du marché, affaiblissant la perception de qualité et la compétitivité.
3
3
3
Une navigation peu claire : difficile de savoir ce qui était inclus dans l'abonnement ou nécessitait un paiement.
Une navigation peu claire : difficile de savoir ce qui était inclus dans l'abonnement ou nécessitait un paiement.
4
4
4
Sur le direct, une disponibilité illisible — impossible de savoir si une émission avait commencé ou se reprenait depuis le début.
Sur le direct, une disponibilité illisible — impossible de savoir si une émission avait commencé ou se reprenait depuis le début.
Valider tôt et livrer par lots, sur un produit en production
Valider tôt et livrer par lots, sur un produit en production
Valider tôt et livrer par lots,
sur un produit en production
processus
processus
Benchmark des solutions de streaming du marché
Benchmark des solutions de streaming du marché
Plateformes concurrentes et produits d'autres secteurs. Nous avons écarté les composants non accessibles que nous y trouvions, en particulier sur le filtrage du catalogue, plutôt que de reproduire des patterns que nos late adopters ne comprendraient pas.
Plateformes concurrentes et produits d'autres secteurs. Nous avons écarté les composants non accessibles que nous y trouvions, en particulier sur le filtrage du catalogue, plutôt que de reproduire des patterns que nos late adopters ne comprendraient pas.
Premières solutions en basse fidélité
Premières solutions en basse fidélité
Pour valider avec l'équipe tech avant d'investir dans la maquette finale : faisabilité sur les trois plateformes et coût réel de chaque nouveau composant.
Pour valider avec l'équipe tech avant d'investir dans la maquette finale : faisabilité sur les trois plateformes et coût réel de chaque nouveau composant.
Ateliers de priorisation avec le produit et la tech
Ateliers de priorisation avec le produit et la tech
Chaque nouveau composant était évalué sur deux axes : la valeur pour l'expérience utilisateur et l'impact business. C'est ce qui a décidé l'ordre des livraisons, plutôt que le calendrier de développement.
Chaque nouveau composant était évalué sur deux axes : la valeur pour l'expérience utilisateur et l'impact business. C'est ce qui a décidé l'ordre des livraisons, plutôt que le calendrier de développement.
prototype de haute fidélité, tests utilisateurs
et itérations avant la livraison finale
prototype de haute fidélité, tests utilisateurs
et itérations avant la livraison finale
Le produit étant en production et commercialement sensible, nous livrions par lots testés plutôt qu'en une refonte d'un seul bloc.
Le produit étant en production et commercialement sensible, nous livrions par lots testés plutôt qu'en une refonte d'un seul bloc.
J'ai introduit aux autres designers le travail par composants, et nous avons mis en place des design reviews, rien n'était livré sans passer une checklist tenue par un autre designer.
Retour de l'équipe tech : la documentation a beaucoup réduit les allers-retours en QA, ils savaient précisément ce qu'on leur demandait de construire.
J'ai introduit aux autres designers le travail par composants, et nous avons mis en place des design reviews, rien n'était livré sans passer une checklist tenue par un autre designer.
Retour de l'équipe tech : la documentation a beaucoup réduit les allers-retours en QA, ils savaient précisément ce qu'on leur demandait de construire.
Ce que les tests ont révélé, et ce que nous avons corrigé avant la livraison finale
Ce que les tests ont révélé, et ce que nous avons corrigé avant la livraison finale
retours et iteration
retours et iteration
retours et iteration
Apparence des boutons peu claire sur fond noir :
un grand nombre de rage clicks
Apparence des boutons peu claire sur fond noir : un grand nombre de rage clicks
Contraste augmenté sur la nouvelle apparence des boutons pour améliorer leur visibilité sur fond noir.
Contraste augmenté sur la nouvelle apparence des boutons pour améliorer leur visibilité sur fond noir.
Confusion entre films et séries : toutes les cartes de contenu avaient le même ratio d'image
Confusion entre films et séries : toutes les cartes de contenu avaient le même ratio d'image
Différenciation visuelle des contenus : cartes horizontales pour les séries, verticales pour les films.
Différenciation visuelle des contenus : cartes horizontales pour les séries, verticales pour les films.
Le comportement de scroll sur les cartes de contenu n'était pas assez visible
Le comportement de scroll sur les cartes de contenu n'était pas assez visible
Ajout d'une flèche à droite de l'écran et d'un dégradé, pour rendre le scroll évident.
Ajout d'une flèche à droite de l'écran et d'un dégradé, pour rendre le scroll évident.
Conception et livraison
de la solution
Conception et livraison
de la solution
livrables
livrables
détails FILm, SÉRIE ET CONTENU EN DIRECT - MOBILE/TABLET
détails FILm, SÉRIE ET CONTENU EN DIRECT - MOBILE/TABLET
EN DIRECT - desktop
EN DIRECT - desktop
