Mobile Web Video Optimization
Deliverable
Prototype & Design Comps, UX Findings, Comp Analysis, Analytics Findings
Role
Lead Product Designer
Tools & Software
Figma, Google Analytics, Optimizely
Problem
Viewing minutes were down on mobile web, I was asked to investigate and propose solutions.
Goal
Investigate why viewing was down, and run a series of test to figure out how to increase those numbers
Background
The clip page as it is referenced at Vimeo, is possibly the single most important consuming view in all of Vimeo’s web and mobile traffic. This page is where most people watch videos, where they are linked to, and where they share from.
The current design has some great opportunities for redesign, and I was tasked with increasing certain metrics on the page, while at the same time give the page a brand refresh.
Analytics
Traffic from social, especially Facebook is the biggest source of traffic to our mobile web experience. There are approximately 9,000,000 weekly views from Facebook alone, and that means there are 9,000,000 chances for us to get people more involved with Vimeo in the hopes that we can turn a percentage of those into creators who pay for upgrades.
Metrics
#1 Increase the percentage of users who visit the clip page and then play a video (reduce the bounce rate)
#2 Increase total time spent watching
#3 Increase the percentage of users who click the app install button
#4 Increase the percentage of users who share
Competitive Analysis
How have some other companies trying to solve some of these problems? I looked at a lot of different services, and some patterns started to emerge.
Patterns that emerged included a lack of autoplay, and custom social sharing.
Test 1 - The Play Button
The first test was designed to challenge the placement of the play button. From some competitive analysis, I found that Vimeo was one of the only products that didn’t have the button. Only Vimeo and one other competitor didn’t have the play button centered.
Example play buttons from many different products.
Test 1 - The Play Button (continued)
The play button may or may not have a correlation with the metric of playing a video once landing on the page, and we wanted to get some data behind this concept. The plan was to run two tests, one that moved to the play button to the center, and a variation which made the play button 25% bigger.
The control design, one with button that is centered, one that is 25% bigger.
Test 2 - The App Banner
Based on patterns found in different mobile applications, I wanted to test a different version of the app banner, and see if various iterations would increase the number of taps to download the native app.
I decided on a couple different variations to test placement, as well as the language in the button.
The previous design. My hypothesis is that because the banner extends full width, users tend to overlook the banner.
Three different designs proposed designs. Two are bottom centered & floating, one is in the header.
Test 3 - Social share
The share test was a little more subtle and was a test more about using icons. The redesigned share button had three different iterations: one with no icon, also a traditional share icon, and then an icon from Vimeo’s design system.
The control design, one with button that is centered, one that is 25% bigger.
Test Results
A few verified results on target metrics from the business intelligence team, based on approximately 100,000 sessions:
#1 Increase the percentage of users who visit the clip page and then play a video (reduce the bounce rate)
Bounce rate reduced by 3%
#2 Increase total time spent watching
No significant change
#3 Increase the percentage of users who click the app install button
App installs increased by 4.3%
#4 Increase the percentage of users who share
No significant change
Two of the test results showed promise, and the designs were applied to the mobile web version.
We continued to gather data before pushing to the native apps.
Final Designs
Redesign concept for when someone clicks from Facebook.
What the user would see after watching the video.
A subtle upsell for app downloads.