Above: styleframes for the Year in Search interactive experience introductory animation. Below: the Year in Search interactive experience landing. Before it was updated to remove direct access to the trends, users could click to watch the Year in Search video or jump directly into the Google Trends behind the film.

When the video plays, the site transitions to a darker theatre mode and the trends CTA below the video player changes to match the trend being displayed.

Stills of the interactive trend timeline accessible through the CTA underneath the video player. Clicking through to see a trend pauses and blurs the Year in Search video in the background. The timeline is clickable and scrollable. When scrolled, the moment that lands in the center of the viewport contextually expands to reveal additional information, including links to Google Trends and to Google search results for related queries.

The design featured several different paragraph formats, which were all pressure tested for translation and localization.

Mocks of the interactive trend timeline on mobile. I specially designed this format in order to work across screen sizes and interaction methods (i.e. scrolling versus horizontal swiping).

Top: various explorations for the interactive timeline CTA (either on top of the video as is standard for YouTube videos or beneath the video). Above: sample of other designs for the “trends cards” in the paused video state. Ultimately, I evolved these simpler cards into the timeline (below), which allowed for more trending moments to be visible at the same time.

An alternative design for a lightboxed version of the trends timeline. Here the moments from the film are shown on white—an aesthetic more closely associated with Google’s marketing.

The following designs are alternative versions of the Year in Search companion site that explore different interaction models. The designs immediately below are for an experience that pairs chapters from the video (on the left side of the screen) with trends insights (on the right side of the screen).

Styleframes for introductory type animation.

Styleframes for content load animations.

In this version of the interactive, the right side of the screen would scroll, animating in new content as the left side of the screen (the video, video stills, or looping video sections) remained stationary. As a new moment would load on, the type in the Google search bar on the left would type out the trending query.

This design also anticipated user interest in the trending moments and served relevant artifacts from Google search directly in the experience. In the example above, trend information about the film Bird Box is paired with the trailer for the movie.

A second example of how this scrolling experience might look and function. In this example, trend information about the first ever black hole image is paired with a link to the New York Times article in which the image was first announced.

Here, I also proposed developing a custom video player for the Year in Search so that we could hide elements from YouTube’s default embed that distract from the overall experience (i.e. pop-ups that suggest related videos, unnecessary logos, icons, and share UI that appears above and below the video, etc.). I also proposed building a custom scrubber that could snap to trend moments marked in the video and show previews in a small window about the video progress bar.

The above two designs explore incorporating color, Instagram-story-like chaptering, and different data visualization elements into the overall design.

Crucially, these designs serve artifacts from Google Search (i.e. the Game of Thrones Trailer), accommodating the behavior of users looking to learn more about the Year in Search film moments they're seeing.

Above: a final illustration of how Google product could be incorporated into the Year in Search interactive trends experience; here, both news and image search results relevant to the film moment appear on the right side of the screen.

Still more designs for a side-by-side trends model. Here, all the trends are visible in a list, which expands when the moment plays in the video. In this design, additional editorial information is compressed into each moment and the video scrubber has become a sequence of discretely chaptered moments.

An alternative approach to the Year in Search interactive that foregrounds editorial content about moments from the year. Users could learn about the relationships between various events and key search trends. In the above version, the complete Year in Search video would be presented at the top of the page, but could also be windowed to play in the corner of the browser as the user scrolls.

This and the following designs separate the video from the trends. The benefit of this approach is that users on all devices can watch the video uninterrupted and without missing any of the site contents. Additionally, these designs were successful when tested on users because they leverage the most essential and well understood behavior/interaction mechanism on the internet: scrolling. Here, clicking into any trend in the list reveals insights, graphs, and a brief editorial about how the subject relates to the broader theme of the year.

Sketch of a type-forward opening sequence for the Year in Search editorial direction of the interactive experience.

The above two stills represent a study for the editorial direction of the interactive experience where search queries (typed out within search bars) animate into images and accompanying trends data.

Additional explorations for the editorial direction of the Year in Search interactive experience. This direction highlights trends relative to each other—while still providing rich editorial content and the ability to watch the video as you explore.

Additional explorations for the editorial direction of the Year in Search interactive experience. This direction highlights trends relative to each other—while still providing rich editorial content and the ability to watch the video as you explore.