Un centre de contrôle pour les éditeurs vidéo de Dailymotion

J’ai co-piloté la refonte des outils web et mobiles que Dailymotion propose à ses partenaires médias pour téléverser, éditer et diffuser leurs vidéos en direct. Ils servent plus de 8 000 utilisateurs directs, répartis sur 50 à 100 publishers premium. Le temps de préparation d’un téléversement a baissé de 50 %.

Rôle: Senior Product Designer
Période: Avril 2017 à octobre 2018
Équipes: Paris, New York, Marseille
Périmètre: Gestion des médias, design system

Voir la galerie Visiter Dailymotion

Synthèse

Contexte: Dailymotion passait du contenu grand public à une plateforme premium pour les partenaires médias. Des partenaires de premier plan étaient déjà présents, mais leurs outils, hérités d’un ancien back-office, étaient lourds et incohérents, ce qui freinait l’usage professionnel. Des milliers de vidéos étaient téléversées chaque jour.
Mon rôle: Senior Product Designer pour la Business Unit Partner, j’ai co-piloté la refonte complète et l’UX et l’UI des outils, du téléversement au direct, en coordination avec les équipes de Paris, New York et Marseille.
Senior Product DesignerBusiness Unit Partner
Co-pilote de la refonteUX et UI
Trois modules principauxTéléversement, direct, player
Design systemBibliothèque de composants
Réalisations et livrables: Téléversement et gestion
Du téléversement à la publication, avec traitement par lot et édition pendant l’encodage.
Console de direct
Suivi en temps réel des diffusions, avec des statuts clairs et des métriques techniques.
Gestionnaire de player
Personnalisation visuelle des players intégrés et de leurs comportements de lecture.
Bibliothèque vidéo
Gestion de médias en masse, avec indicateurs de statut et actions par lot.
Partage et intégration
Options d’intégration complètes, avec un code iframe généré automatiquement.
Design system
Premier UI kit Storybook de l’entreprise, conçu sous Sketch, avec plus de 120 composants.

8 000+
Utilisateurs directs, répartis sur 50 à 100 publishers premium: -50 %
Temps de préparation d’un téléversement: 120+
Composants d’interface dans le design system

Remplacer un back-office hérité par un centre de contrôle

Les partenaires de Dailymotion publient à grande échelle. Chaque vidéo passe par plusieurs encodages, des règles de métadonnées, une configuration publicitaire et un calendrier de diffusion, et tout cela doit rester synchronisé. Le back-office historique ne suivait plus ce rythme et changeait de logique d’un écran à l’autre. L’enjeu était de le remplacer par un centre de contrôle fiable pour les opérateurs médias, sur une base qui puisse grandir avec la suite produit.

Quatre objectifs

Refaire le gestionnaire de médias : téléversement, édition et distribution
Concevoir un tableau de bord pour les diffusions en direct
Repenser les gestionnaires de players et de widgets
Poser une infrastructure de design qui s’étende avec les besoins

Trois flux retravaillés un par un, puis spécifiés

Le Partner Space s’organise autour des trois flux que les partenaires utilisent chaque jour. Chaque module fonctionne seul et partage les motifs du design system.

Téléversement : ne jamais faire attendre l’éditeur

Les partenaires publient à l’échelle industrielle. Le nouveau flux traite les fichiers en parallèle, affiche la progression et les erreurs en temps réel, et laisse modifier le titre, le blocage géographique ou la programmation pendant que l’encodage tourne. L’éditeur prépare sa vidéo sans attendre la fin du traitement. Le temps de préparation a baissé de 50 %.

Annulation d’un téléversement

Mise à jour de la vignette

Ajout de sous-titres

01 / 03

Direct : une console calme, en trois panneaux

Pendant une diffusion, un opérateur doit réagir vite à une variation d’encodage ou d’audience. La console s’organise en trois panneaux, Contrôle, Information et Enregistrement, qui suivent la façon dont on pense une diffusion. Chaque changement de statut (Prêt, À l’antenne, Enregistrement, Terminé) est animé pour confirmer que la commande a bien été reçue. Les métriques se mettent à jour sur place, sans mouvement parasite.

01 / 02

Player : une liste simple, des onglets quand il le faut

Les vidéos doivent se lire de la même façon sur tous les sites des partenaires, et des utilisateurs non techniques doivent pouvoir configurer eux-mêmes leurs players. L’interface part d’une liste simple et n’ouvre les onglets détaillés qu’en cas de besoin. Créer un player suit un parcours guidé en trois temps : apparence, contenu, puis code d’intégration, sans fenêtre modale qui coupe le contexte.

Code d’intégration

01 / 02

Spécifications : prototyper chaque interaction pour la livraison

Pour que le produit livré corresponde à ce qui avait été conçu, j’ai prototypé les interactions en animation et rédigé des spécifications annotées pour les développeurs : saisie de l’heure de début au clavier, ajout à une playlist, fenêtre de partage. Le partage reste léger pour un envoi rapide, et les options d’intégration s’ouvrent à la demande.

01 / 03

Voir tous les visuels

Un design system pour tenir l’ensemble

Pour garder la cohérence d’une suite produit en croissance, j’ai dirigé la création du premier UI kit Storybook de l’entreprise, conçu sous Sketch et intégré en agile avec les développeurs. Il rassemble plus de 120 composants avec leurs variantes et leurs états, et donne aux outils partenaires une base commune.

01 / 02

Ce que la refonte a produit

Les trois flux suivent désormais les mêmes règles : une complexité qui s’ouvre progressivement, un retour visible après chaque action et des composants partagés. Les partenaires médias ont pu adopter rapidement les nouveaux outils, et les équipes disposent d’une base commune pour la suite.

Bibliothèque vidéo

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.

Contact LinkedIn

Un centre de contrôle pour les éditeurs vidéo de Dailymotion

Synthèse

Remplacer un back-office hérité par un centre de contrôle

Quatre objectifs

Trois flux retravaillés un par un, puis spécifiés

Téléversement : ne jamais faire attendre l’éditeur

Direct : une console calme, en trois panneaux

Player : une liste simple, des onglets quand il le faut

Spécifications : prototyper chaque interaction pour la livraison

Un design system pour tenir l’ensemble

Ce que la refonte a produit

France VAE

Tessan

Toolkit

Un centre de contrôle pour les éditeurs vidéo de Dailymotion

Synthèse

Remplacer un back-office hérité par un centre de contrôle

Quatre objectifs

Trois flux retravaillés un par un, puis spécifiés

Téléversement : ne jamais faire attendre l’éditeur

Direct : une console calme, en trois panneaux

Player : une liste simple, des onglets quand il le faut

Spécifications : prototyper chaque interaction pour la livraison

Un design system pour tenir l’ensemble

Ce que la refonte a produit

Synthèse

Remplacer un back-office hérité par un centre de contrôle

Quatre objectifs

Trois flux retravaillés un par un, puis spécifiés

Téléversement : ne jamais faire attendre l’éditeur

Direct : une console calme, en trois panneaux

Player : une liste simple, des onglets quand il le faut

Spécifications : prototyper chaque interaction pour la livraison

Un design system pour tenir l’ensemble

Ce que la refonte a produit

Pour continuer

France VAE

Tessan

Toolkit

Synthèse

Remplacer un back-office hérité par un centre de contrôle

Quatre objectifs

Trois flux retravaillés un par un, puis spécifiés

Téléversement : ne jamais faire attendre l’éditeur

Direct : une console calme, en trois panneaux

Player : une liste simple, des onglets quand il le faut

Spécifications : prototyper chaque interaction pour la livraison

Un design system pour tenir l’ensemble

Ce que la refonte a produit