Dailymotion: Brand Page
OverviewDailymotion 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 Client Profile page was 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 client profile page had a high bounce rate with a confusing user interface.
GoalImprove the User Experience and Visual Design, and Engagement of the Client Profile Page.
User NeedsThrough user research and analyzing view patterns, I 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
Business NeedsPartnering with PM’s and business stakeholders. I identified three key business requirements:
- 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
Competitive AnalysisI 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.
I like the hierarchy of the Hulu design. They put prominence on the users videos front and center
Youtube is a tried and true player in the space. Their framework has worked for a long time and they offer customization for the user’s profile
I like that they put prominence on the users profile picture. It gives it a sense of personality that the other competitors don’t
IdeationI organized a brainstorm session between myself, a product manager, and a front-end engineer to develop sketches in rapid fire rounds.
As I were sketching, I aimed to answer the following questions:
- What is the ultimate value of the client problem 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
WireframesIn the wireframe phase, I designed a fluid system of new components that I leveraged from our existing componenets. Since part of the requirements where to stay within our current experience, I was diligent in making sure not stray too far away from our existing design system.
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 TestWe 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.
A/B Test: Variant 1
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%︎︎
DesignI 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
ConclusionThe 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