Dailymotion

Dailymotion
Senior Product Designer-Gestion Média, Design System-2017-2018

Permettre aux partenaires vidéo de Dailymotion de gérer, publier et diffuser en live en toute confiance

Outils de gestion média améliorés pour les éditeurs vidéo

Entre 2017 et 2018, j'étais responsable de l'UX et UI de l'écosystème d'outils partenaires de Dailymotion. Ces outils web et mobile ont permis à plus de 30 000 partenaires de contenu, incluant des diffuseurs et éditeurs médias comme France TV, CBS et beIN Sports, d'uploader, éditer et diffuser des vidéos en live à leurs audiences.

Visiter Dailymotion

Type

Design Produit

Scope

Refonte Plateforme

Period

2019-2021

Company

Dailymotion

Dailymotion Partner Platform Overview

Vue d'ensemble


Introduction

Dailymotion était en plein pivot stratégique majeur, passant du contenu grand public à un repositionnement comme plateforme premium pour les partenaires médias. Bien que des partenaires de renom soient déjà à bord, les outils de la plateforme existante étaient obsolètes, peu ergonomiques et incohérents, freinant l'usage professionnel. Des milliers de vidéos étaient uploadées quotidiennement, gérées depuis un backend legacy.

Rôle et périmètre

En tant que Senior Product Designer pour la Business Unit Partner, mon rôle était de co-piloter la refonte complète. Reconstruire l'expérience en un véritable centre de contrôle pour les opérateurs médias.

Objectifs stratégiques

  • - Repenser l'expérience du gestionnaire média : upload, édition et distribution
  • - Concevoir un nouveau Dashboard Live pour les diffusions vidéo
  • - Repenser les gestionnaires de player et de widgets
  • - Établir une infrastructure design scalable

Modules produit clés livrés

Video Management Workflows
Workflows de gestion vidéo - Refonte complète de l'expérience de gestion vidéo, de l'upload à la publication. Introduction du traitement par lot, de l'édition inline et des actions de partage contextuelles.
Live Dashboard
Dashboard Live - Conception de l'interface de création et monitoring pour les streams vidéo live, assurant des stats en temps réel et de la clarté dans un environnement complexe et sous pression.
Player Manager
Gestionnaire de Player - Refonte des outils de personnalisation visuelle pour les players embed, permettant aux partenaires de définir des thèmes et gérer les comportements de lecture.

Workflows d'Upload et de Gestion Vidéo

Comment une plateforme média peut-elle aider les éditeurs à traiter, gérer et monétiser des milliers de vidéos quotidiennement ?

Gérer de gros volumes de vidéos nécessitait plus qu'un simple bouton d'upload. Les partenaires médias de Dailymotion travaillaient avec des workflows à l'échelle industrielle : encodages multiples, règles de métadonnées, configuration publicitaire et calendriers de distribution devaient tous rester synchronisés. L'objectif était de concevoir un système rendant ces opérations rapides, traçables et intuitives. Le nouveau flux d'Upload a introduit le traitement parallèle avec une visibilité en temps réel de la progression et des erreurs. Les éditeurs pouvaient mettre des fichiers en file d'attente, modifier les titres ou le geoblocking pendant l'encodage, et publier une fois toutes les vérifications passées.

Upload

Batch upload interface
Upload par lot - Uploads parallèles avec feedback en temps réel. Les éditeurs peuvent modifier les métadonnées, le geoblocking et la programmation pendant l'encodage. Réduit le temps de préparation de 50%.
Annuler l'upload - Flux d'annulation fluide avec retour visuel.
Mise à jour vignette - Uploader une image et mettre à jour la vignette de prévisualisation instantanément.
Ajouter des sous-titres - Workflow d'upload de sous-titres simplifié.

Bibliothèque Vidéo

Dans la Bibliothèque Vidéo, la hiérarchie et le mouvement ont remplacé les contrôles lourds. Les actions au survol n'apparaissaient que lorsque nécessaire, réduisant l'encombrement tout en gardant toutes les opérations à un clic. L'interface supportait la publication continue : les utilisateurs pouvaient agir pendant que les données se rafraîchissaient en arrière-plan, réduisant le temps mort entre les uploads.

Video library
Bibliothèque vidéo - Gestion média en masse avec indicateurs de statut et actions par lot. Chaque carte vidéo affiche l'état de confidentialité, l'horodatage, le nombre de vues et la durée. Les cases multi-sélection permettent des opérations par lot sur des centaines de vidéos.
Code embed - Interaction de copie et retour utilisateur.
Sélecteur d'heure - Interaction de switch 12/24H.
Protection par mot de passe - Workflow d'accès vidéo sécurisé.
Geoblocking - Autoriser/Bloquer les diffusions vidéo dans certaines zones.
Share modal
Modal de partage - Options complètes de personnalisation embed avec code iframe auto-généré qui se met à jour dynamiquement. La divulgation progressive garde le partage simple léger tout en offrant un contrôle technique.
Share modal keyboard mapping
Mapping clavier - Spécifications du modal de partage.
Start time keyboard input
Input heure de début - Spécifications de saisie clavier.
Add to playlist flow
Ajouter à la playlist - Flux de gestion de playlist simplifié.

Console de Gestion Live

Comment une plateforme live peut-elle concurrencer Twitch et Facebook tout en donnant aux professionnels un véritable contrôle ?

Passer en live apportait une complexité différente. Les opérateurs devaient surveiller les performances et réagir instantanément aux changements d'encodage ou d'audience. L'objectif était de concevoir une surface de contrôle sereine fonctionnant sous pression. Le Live Manager a structuré toutes les actions autour de trois panneaux : Contrôle, Information et Enregistrement, correspondant au modèle mental d'une diffusion live. Les changements et transitions de statut étaient centraux : Prêt > À l'antenne > Enregistrement > Terminé. Chaque transition était animée avec un retour visuel clair pour confirmer qu'une commande avait été reçue. Les métriques comme le débit, les viewers ou la latence se mettaient à jour sur place sans bruit de mouvement.

Pre-broadcast countdown
Compte à rebours pré-diffusion - Affiche l'heure de démarrage programmée avec un badge OFF AIR. Le bouton Partager persistant permet la distribution promotionnelle avant le début du stream.
Live dashboard
Dashboard live - Surveille les diffusions actives avec des métriques techniques en temps réel et le nombre de viewers. Le panneau de prévisualisation affiche l'image actuelle du stream avec badge LIVE persistant et temps écoulé. Le panneau droit expose les paramètres d'encodage critiques permettant aux opérateurs techniques de diagnostiquer les problèmes de qualité de stream pendant les événements live sous pression.

Gestionnaire de Player

Comment transformer la configuration d'un player en une tâche que n'importe qui peut accomplir en quelques minutes ?

Une fois uploadées et diffusées, les vidéos avaient besoin d'une lecture cohérente sur les sites partenaires. Le Gestionnaire de Player a résolu ce problème en donnant aux utilisateurs non techniques la possibilité de créer et configurer leurs propres players. L'interface s'est concentrée sur la divulgation progressive. Les utilisateurs partaient d'une liste simple et développaient des onglets détaillés uniquement si nécessaire. La création d'un player déclenchait un flux guidé : définir l'apparence, assigner le contenu, puis récupérer le code embed. Des transitions subtiles maintenaient le contexte entre les étapes, évitant les interruptions modales.

Player template configurator
Configurateur de template player - Définir l'apparence, assigner le contenu, récupérer le code embed. Rapidité et contrôle pour les éditeurs gérant des dizaines de templates.

Construire un UI Kit Scalable

Pour assurer la cohérence à travers la suite produit grandissante, j'ai dirigé la création d'un nouveau Design System et d'une Bibliothèque de Composants.

UI Kit - Styles
UI Kit - Styles - Fondation pour une suite produit cohérente à travers tous les outils partenaires.
UI Kit - Components
UI Kit - Composants - Bibliothèque de composants scalable pour un développement cohérent.

Impact

L'approche design a produit des résultats mesurables. En se concentrant sur les workflows essentiels et la complexité progressive, nous avons créé des outils que les partenaires médias ont pu adopter rapidement.

30 000+

Partenaires de contenu dans le monde

10K+

Vidéos uploadées quotidiennement sur la plateforme

-50%

Réduction du temps de préparation upload

120+

Composants UI livrés dans le design system

Envie de travailler ensemble ?