Dailymotion

A complex AdTech platform that generates Dailymotion's core revenue.

The Problem

Launched in 2005, Dailymotion attracts 300 million users from around the world, who watch 3.5 billion videos each month. Dailymotion relied heavily on third-party solutions for serving ads on our videos. This resulted in lacking pricing transparency and damaging our ad revenue. Roughly 40 cents of every dollar we earned went to these middlemen.

The Solution

Dailymotion was eager to take back control and cut out unaccountable middlemen, by having Dailymotion's own full stack of ad monetization solutions. It allows us to turn our digital spaces into robust, yield-generating ad inventory using our own technology.

The first and major step of having our ad solutions was to build a proprietary Supply-side Platform (SSP). It provides optimized inventory and campaign performance, granular targeting capabilities, and insightful reporting. Therefore, we can have a full control over our programmatic chain and other revenue streams.

005-idea005-idea

My Role

As the UX Design Lead, I ran the UX team that is responsible for everything under the UX umbrella - User Research, Prototyping, UI Design, Design System, Usability Testing, Product Analytic.

Being a hands-on UX practitioner, I delivered numerous site maps, flow charts, wireframes, interactive prototypes, detail designs and other UX deliverables for most of the features on the platform. I organized and conducted users interviews, design workshops, and usability testing.

I led and oversaw the UX process end-to-end. I managed our UX Kanban board and led all the scrum activities. I worked very closely with product managers in identifying key features and gathering user requirements. I also constantly communicated with engineers on design specifications and accuracy of implementations

004-brainstorm004-brainstorm

The Challenge

Designing a SSP from scratch requires a deep understanding of our users and their behaviors. Furthermore, some of our challenges were  1) defining UX fundamentals, 2) designing the experiences from the ground up, 3) optimizing the experiences, and 4) creating a scalable design system.

Here's how I tackle those challenges:

1.  Define UX fundamentals

Since our team was newly formed when I joined, some crucial UX fundamentals were yet to be defined. Instead of diving in head-first and starting to design the platform right away, I began with a persona development and the competitive audit.

1.1 - Personas
I conducted qualitative interviews with different teams (Ad Operations, Programmatic Partnership, Sales, Content, and Marketing) in our local New York office and Paris headquarter. Based on the data I gathered, I identified 3 main types of potential users for our platform - Ad Operations Manager, Technical Operations Manager, and Sales Executive. Inside each persona, I provided information about who the users are, what they do at work, and the challenges they face.
Personas-Amy-1Personas-Amy-1
Personas-Terrence-1Personas-Terrence-1
Personas-Sean-1Personas-Sean-1
1.2 - Competitive Audit
(Almost) no problem haven’t solved before.  A competitive audit can give us an overview of the features of the other players in our space offer and provide precedents to our own project. I identified 5 majors SSPs, poked around their platforms, and studied on their user documentation guides. I audited five groups of features - Reporting, Forecasting, User Management, Dashboard, and Inventory Management. View the full audit report HERE
audit detailsaudit details

2. Create the experience from the ground up

Creating a whole new experience was tough. Creating a whole new experience in ad tech was extremely tough. Not only it required a solid understanding of who our users are and what feature we can provide, but also we needed to 1) have a holistic view of the whole tech platform, 2) understand the complex logic behind each complicated workflow, and 3) make those intricate workflows into simple interactions

2.1 - A Holistic View

I hosted a card sorting workshop with the Ad Operations team in Paris in order to come up with a sitemap for the platform. I listed out the major features on post-its and invited the team to organize the post-its in ways that make sense to them. I encouraged each participant to talk about the thinking behind what they’ve produced. I documented the results and utilized the information in producing a sitemap.

card-sortingcard-sorting

I further validated the sitemap with a tree testing and presented the validated sitemap to our stakeholders. The validated sitemap provided a birds-eye view on the connections between each feature and a blueprint for the architecture of the whole platform.

dailymotion-sitemapdailymotion-sitemap

1.2 - Complex Workflow

Setting up a programmatic deal is one complicated workflow and it requires multiple intricate steps - entering pricing information, setting up targeting, and selecting buyers. It is also highly used by users, about 60% of the time an average user spent on the platform.

I conducted contextual inquiry sessions with our users and observed how they prepared, set up, and troubleshot programmatic deals with the existing tools. I hashed out the user flow and delivered a flow diagram that outlined each of the major steps that users take.

 

After I gained a good understanding of the overall flow and the technology connecting each task, I began working on the UX for creating a programmatic deal. The interaction design needed for setting up targeting was particularly challenging. Not only there’re 40 types of criteria, but users can also either include or exclude each criterion. After several rounds of testing and iterations, I proposed a solution that tested well with users and required only moderate development effort. 

 

Create Deal - 1bCreate Deal - 1b
Create Deal - 2Create Deal - 2
Create Deal - 3bCreate Deal - 3b

3. Optimize the experiences

In the earlier months, because of rapid development, the user experience was not a top priority for higher management. Users suffered; they had to perform many repeatable tasks and come up with workarounds. I became a go-to designer for smoothing out these experiences and evangelized the importance of UX.

3.1 - Improved Blocklist

The blocklist redesign was a great example that illustrates my effort in optimizing experiences. In the original design, users needed to enter each blocking criteria one-by-one when setting a blocklist for a publisher. 

I proposed a new format of a blocklist - a linkable blocklist that contains a list of blocking criteria can be applied to multiple publishers. With the new blocklists, setting up blocklist became much less time consuming and less error-prone.

Link Blocklist Flow - 1cLink Blocklist Flow - 1c
Link Blocklist Flow - 2cLink Blocklist Flow - 2c
Link Blocklist Flow - 3eLink Blocklist Flow - 3e

The Link a Blocklist flow.

Add Custom BlocksAdd Custom Blocks

The Add Custom Blocks flow.

All BlocklistAll Blocklist

The All Blocklists page.

Preset DetailsPreset Details

The Blocklist Details page.

3.2 Dashboard Redesign
Our early version of the homepage dashboard was basically a big data dump that caused latency and confusion for users. I partnered with a PM on redefining the requirements for the homepage dashboard. Our objective was to give our users a quick snapshot of the performance of the overall platform. We analyzed feedbacks from 1-on-1 user interviews and focus groups, and nailed down the most important metrics for our users. We decided to emphasize the top metrics and present more simplified and stylistic data visualizations. 
Dashboard-3Dashboard-3

4. Create a scalable design system

As a team of designers that working on different features simultaneously, we were in need of a design system in order to ensure a high-level consistency among all our design. 

We began by consolidated our design files and auditing all the design elements in our current build. Then, we as a team decided collectively on rules for 1) the foundations - colors, typography, and iconology, 2) the components  - buttons, text field, pagination, drop-downs, etc, and 3) the templates. We also partnered with the front-end engineering team in prioritizing the development of the elements.

Design Pattern 1Design Pattern 1
Design Pattern 2Design Pattern 2
Design Pattern 3Design Pattern 3

Result

As a result of my team and the rest of the company’s efforts, we delivered a fully-functioning SSP in 18 months.  It handles over 2 million in ad revenue each month. With the new SSP and the strategic partnerships that came along with it, we were able to raise the CPM (Cost Per Thousand) on Dailymotion’s inventory by over 50%.  We significantly improved Dailymotion’s ad revenue.

Moreover, since we have more control over our ad supply we are able to provide better quality inventory to advertisers. With the success of our proprietary SSP, we are able to get a green light and more resources to continue building out more features, including yield optimization, advanced reporting, creative management, and forecasting.

Takeaway

Designing for the product that is Dailymotion's main source of revenue required a level of expertise, thoroughness, and dedication to learning that is hard to experience in other products or teams. Working directly with the product team and the engineering team gave me an opportunity to deliver a complex digital product end-to-end. I was immensely proud to be a part of an ambitious project with a lasting impact on Dailymotion's core business.