A control center for Dailymotion’s video publishers

I co-led the redesign of the web and mobile tools Dailymotion offers its media partners to upload, edit and livestream their videos. They serve more than 8,000 direct users across 50 to 100 premium publishers. Upload preparation time dropped by 50%.

Role: Senior Product Designer
Period: April 2017 to October 2018
Teams: Paris, New York, Marseille
Scope: Media management, design system

View the gallery Visit Dailymotion

Summary

Context: Dailymotion was moving from general consumer content to a premium platform for media partners. Leading partners were already on board, but their tools, inherited from a legacy back-office, were heavy and inconsistent, which held back professional use. Thousands of videos were uploaded every day.
My role: Senior Product Designer for the Partner Business Unit, I co-led the full redesign and the UX and UI of the tools, from upload to livestream, in coordination with the teams in Paris, New York and Marseille.
Senior Product DesignerPartner Business Unit
Co-lead of the redesignUX and UI
Three core modulesUpload, live, player
Design systemComponent library
Deliverables: Upload and management
From upload to publication, with batch processing and editing while encoding runs.
Live console
Real-time monitoring of livestreams, with clear statuses and technical metrics.
Player manager
Visual customization of embed players and playback behaviors.
Video library
Bulk media management, with status indicators and batch actions.
Share and embed
Full embed options, with an automatically generated iframe code.
Design system
The company’s first Storybook UI kit, designed in Sketch, with 120+ components.

8,000+
Direct users across 50 to 100 premium publishers: -50%
Upload preparation time: 120+
UI components in the design system

Replacing a legacy back-office with a control center

Dailymotion’s partners publish at scale. Each video goes through several encodes, metadata rules, an ad configuration and a distribution schedule, and all of it has to stay in sync. The legacy back-office no longer kept up with that pace and changed logic from one screen to the next. The challenge was to replace it with a reliable control center for media operators, on a base that could grow with the product suite.

Four objectives

Rework the media manager: upload, editing and distribution
Design a dashboard for live broadcasts
Rethink the player and widget managers
Set up a design infrastructure that scales with the needs

Three workflows reworked one by one, then specified

The Partner Space is organized around the three workflows partners use every day. Each module works on its own and shares the patterns of the design system.

Upload: never make the editor wait

Partners publish at industrial scale. The new flow processes files in parallel, shows progress and errors in real time, and lets editors change the title, the geoblocking or the schedule while encoding runs. The editor prepares a video without waiting for processing to end. Preparation time dropped by 50%.

Cancel upload

Thumbnail update

Add subtitles

01 / 03

Live: a calm console, in three panels

During a broadcast, an operator has to react fast to a change in encoding or audience. The console is organized in three panels, Control, Information and Record, which follow how a broadcast is thought through. Each status change (Ready, On Air, Recording, Completed) is animated to confirm that the command was received. Metrics update in place, without distracting motion.

01 / 02

Player: a simple list, tabs only when needed

Videos have to play the same way on every partner site, and non-technical users have to configure their own players. The interface starts from a simple list and opens the detailed tabs only when needed. Creating a player follows a guided flow in three steps: appearance, content, then embed code, without a modal that cuts the context.

Embed code

01 / 02

Specifications: prototype every interaction for delivery

So that what shipped matched what had been designed, I prototyped the interactions with animation and wrote annotated specifications for the developers: keyboard entry of the start time, adding to a playlist, the share window. Sharing stays light for a quick send, and the embed options open on demand.

01 / 03

View all visuals

A design system to hold it all together

To keep a growing product suite consistent, I led the creation of the company’s first Storybook UI kit, designed in Sketch and integrated in agile with the developers. It gathers more than 120 components with their variants and states, and gives the partner tools a common base.

01 / 02

What the redesign delivered

The three workflows now follow the same rules: complexity that opens progressively, visible feedback after every action and shared components. Media partners were able to adopt the new tools quickly, and the teams have a common base for what comes next.

Video library

Victor Soussan

Lead Product Designer

Interested in working on a similar project? Let's talk.

Contact LinkedIn

A control center for Dailymotion’s video publishers

Summary