Video Content Model

Product Design, Spotlyte
Winter 2019

When I joined Spotlyte in November 2019, the team was aiming to ramp up their video content in the upcoming year. There was already a good amount published on YouTube. But as this type of content was expanding in Spotlyte, there was a growing urgency for creating a system where these media can be highlighted and integrated into our website, making the overall experience more diverse, dynamic and enriching.

Within a span of two weeks, I identified and designed a system modeled around three use cases with varied video-article relationships and recirculation treatments. 

01. In-Article, Supporting

When recirculation was placed below hero video, stakeholders were concerned that, as the view gets cut just below the recirc headlinem users would assume there is no accompanying written content to scroll down to. There was preference for keeping a hero still image, pushing the featured video into middle of the article, and a subtler single in-line recirc of relevant video series.

02. In-Article, Leading

In the first iteration, there was again the concern that it would take too long to scroll to get to the written content. There was also preference for limiting recirculation to four pieces, and then adding a “See All” CTA that would lead to the series landing page. Additionally, background color of the hero component was updated to black for a bolder, cinematic feel.

03. Stand-Alone

Initially, I was proposing modeling off of YouTube’s layout, notably having the playlist feature (on the right in desktop). However, stakeholders reached consensus that, especially from implementation perspective, it would be most viable to keep the design between in-line leading and stand-alone video models parallel.

Resulting Responsive Layout

Layouts for in-article supporting, in-article leading, and stand-alone videos