Yahoo Vertical Videos

Description

In Q2 2017, Yahoo created an internal tool that would take important snippets of an article that would then be stitched into a short vertical video that users could tap through like a Snapchat or Instagram story. Traditionally, it took yahoo editors approximately an hour to develop and publish a video – but with this tool, they could publish a video story in ten to fifteen minutes. With a refocus on mobile web traffic and engagement, it was crucial for Yahoo Homepage to support the vertical videos experience (which originally launched in the Yahoo Sports app).

Yahoo Slick – Automate video stories from existing news articles

The Goal

While another team focused on the mobile native experience, my team focused on delivering a great mobile web experience. While keeping technical performance in mind, we had to visually showcase the number of vertical videos available at a time, indicate the number and progression of segments within a story, and provide visual feedback for mobile web users who may not be used to using tapping gestures to skip through a video.

Spotlight 1

With the rise of grouped news content (such as Google AMP and Facebook Instant Articles) just a swipe away, we had to think of a scalable design that would eventually support a group of articles and/or videos. We kept the original dot structure design that was already built, but had the dot expand into a progress bar if it was a video. Side-swiping to the next story (or dot) would cause the progress bar to collapse back into a dot before advancing to the next element. Since these vertical videos needed to be broken out into tappable segments, we made the progress bar a fixed width and had mini dots (to indicate segments) evenly spaced out within the progress bar.

User studies indicated that our mobile web users were unfamiliar with the hidden tapping gesture to fast forward or rewind segments (like Snapchat or Instagram Stories) so we were explicit with visible, fixed buttons.

Since this progress bar wasn’t always the most noticeable UI element on the page (due to eyes usually focused on the playing video), we had to make sure the tappable arrows were noticeable without disrupting the existing text on video. They were placed slightly above the mid-point of the video to accommodate most text templates. When tapped, the arrows would increase in both scale and opacity. The progress bar above would also fill up, or advance to the next mini dot, to reemphasize the feedback.

Prototype: A WALKTHROUGH

Spotlight 2

Unlike its mobile native app counterpart which supports 9:16 vertical videos, we decided to support the same videos in a 3:4 ratio for mobile web due to the undeniable presence of a browser chrome – luckily, the internal tool could export the same videos in multiple aspect ratios and the system just has to call for the specified format.

Depending on the mobile device, there would be some negative space between the bottom of the vertical video and the browser chrome. To address this, the “read more” element was placed a fixed distance from the bottom of the browser chrome, with the negative space colored in black. A slight gradient was added to the bottom of each vertical video (while being cautious to not disrupt the text on video) to give the illusion that the video was seamlessly filling up the entire screen.

Impact & Learnings

The launch of vertical videos contributed to driving up video mobile web views by 2x (a 100% uplift) within its first two weeks, with 550-600k daily active users (DAUs) consuming vertical video content!

This was also my first experience dealing with an issue that required a solution concerning different aspect ratios (mobile device sizes). The importance of coming up with scalable solutions alongside engineering helped the team hit our deadline without compromising the integrity of the code.