Dailymotion: Client 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 Brand 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.
GoalThe 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.
My role in this project:
- Leading the UX & Visual Design.
- User research & user testing
- Partnering with Product and Engineering
- Partnering with Senior Leadership
RequirementsI worked with Product & Engineering to gather requirements and understand user needs and business needs.
- 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
- 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
- Avoid adding excessive elements that call for API to hang or require a page load
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
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
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.
BrainstormI 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
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.
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.
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%︎︎
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
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