Dailymotion Client Brand Page


Dailymotion is the second largest video website in the world and gains over 4.9M page views per month with an avg bounce rate of 39%.

The channel page is the second most visited page at 2.1M page views per month with an avg bounce rate of 30.6% and avg time on site of 1 minute 32 seconds.



The Goal of this Project
The goal was to increase user engagement, length of time the user spends on a client’s brand page, and boost follower count for the brand page.



Requirements


I started by gathering requirements and compiling our user needs and our business needs.

The user’s needs
Through user research and analyzing view patterns, we identified these three key needs for the user:
  • As a user, I want to see an auto-play video in view when I reach the page
  • As a user, I want to get to know the channel owner
  • As a user, I want to easily scroll through the channel owners videos

Our business needs
After speaking with key stakeholders, I identified these three key needs for the business:
  • As a business, we want to make sure our Partners get the most views out of their videos
  • As a business, we want our users to view video content seamlessly
  • As a business, we want ads to display in view to the user

After conducting research, sketching ideas, comparing competitors, and speaking with PM’s, the requirements of the project were:

  • Give visibility to the auto-play featured video so that it’s in view and ads are served
  • Give visibility to the follow button and thus encourage users to follow more
  • Encourage immersive playback and deep browsing of videos

After collaborating with engineering, we came up with the following constraints:

  • Avoid adding excessive elements that call for API to hang or require a page load
  • Design must be responsive, and be available on both desktop and mobile
  • The frontend will be built in Facebook’s React component based framework, allowing for rapid prototyping and scalability in the future


Competitive Analysis


I compared many of our core competitors in the video space and analyzed patterns and common themes. I paid close attention to like elements, the arrangement of overall UI, positioning of client name and bio, positioning of videos, playlists, sub-channels and call-to-actions.

01. Our competitors

Brainstorming session


I organized a brainstorm session between myself, a product manager, and a front-end engineer to develop sketches in rapid fire rounds. 

As we were sketching, we aimed to answer the following questions:

  • What is the ultimate value of the client brand page?
  • What do users want to do when they land there?
  • What do we want them to do?

Once the session was done, I gathered all the sketches and combined the ones that were similar and decided to on three solutions:

01. Brainstorm: Solution 1





02. Brainstorm: Solution 2





03. Brainstorm: Solution 3



Wireframes



01. Wireframe 1



02. Wireframe 2



03. Wireframe 3

I presented these wireframes to product team and we decided to combine wireframe 2 & 3 to simplify the options to test against the control.


A/B Test


We tested 3 versions in a A/B test fed into segmented traffic on Dailymotion. I felt it was important to do this to find the winning design based on percentage of user interaction.


01. A/B Test: Variant 1




02. A/B Test: Variant 2



We tested two versions against the control (live version) using Optimizely and served the versions to about 30% of the Dailymotion audience. 

We ran the test for 16 weeks and analyzed the data using Google Analytics and found that the winning design was Version 2 with a .5%︎︎ lift against version 1 which was .3%︎︎


Design


I iterated on Version 2 in order to align it closely with Dailymotion's core style guide. I spoke with engineering and made a few design tweaks for larger screen sizes. 

New Brand page design


Wrap Up


The goal of this project was to increase engagement of the user, improve partner brand recognition, activity, and offer layout customization options for the Partner Page. I was able to accomplish this by using modern design and UX patterns that users are already familiar with. I added full-width video, an infinite scroll feature, better visibility of the channel owners info and a cleaner visual style.

︎ Dailymotion Client Brand Page