Year in Search 2019
Interactive companion website

2019

The Year in Search is a video that leverages Google Trends to reveal the questions we shared, the people who inspired us, and the moments that captured the world’s attention each year.

While the Year in Search has grown in popularity year-over-year (receiving over 100M views in 2018 and over 150M views in 2019), relatively few people make the connection between the video and the trends data that powers it.

And so in 2019, in order to contextualize the trends behind the video, I worked with a small team within Google’s Brand Studio to design and develop an interactive companion Year in Search website. The goal of the site was to serve additional information about the people, trends, and moments in the Year in Search video.

This (long) project page contains a (small) selection of my designs and explorations for this project. The team and I explored everything from interactive video to guided scrolling to simultaneous video and editorial to simple editorial formats (and most options in-between). Ultimately, our design took the form of an interactive timeline of the video’s moments that is accessible through a low-profile contextual CTA.

You can watch the Year in Search 2019 and experience the interactive site at about.google. You can see a collection of all of the Year in Search videos here.




My designs for the introductory sequence of the final Year in Search interactive site.

 


Options for the Year in Search landing page (including options for different trends CTA’s below the video and a custom cursor design when hovering the video).


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 moment 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.


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


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.






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, these simpler cards evolved into the timeline, which allowed for more trending moments to be visible at the same time.




A proposal for a darkmode landing page that featured NASA’s first ever image of a black hole (made in 2019).



Various other explorations for how the interactive might look and function on mobile.



Considerable obstacles were encountered with the mobile design for this site. I pushed heavily for an interaction model that decoupled the video from the trends interactive experience—knowing that users primarily full-screen video on mobile (and that we would therefore be unable to serve contextual CTA’s on top of native mobile OS full-screen video players). Effectively, because the executive decision was made to maintain a 1:1 correlation between the playing video and the trends interactive access point, the interactive was missed the vast majority of the time on mobile—especially when devices were rotated into landscape mode.




Several additional options for how the trends interactive might look and function on landscape mobile (before the decision was made to exclude landscape mobile users). 



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).

Above: sketch of a landing page for this version of the interactive. Here, I 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.



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.


Above: a final illustration of how Google product could be incorporated into the Year in Search interactive trends experience.


Above: alternative experiences for approximately the same visual design. The design on the left features moments that scroll in from the bottom, build in trends insights, and then move off the top of the page. The design on the right features moments that scroll in from the bottom and stack on top of each other while only the trends insights scroll up and off the page.


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


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.


Eventually, I decided the story of the Year in Search might better be communicated with more general contextual information presented throughout the experience. The above example illustrates how context statements might be incorporated into a side-by-side design.


These 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.


A closer look at an individual trend. In this proposal if the user plays the video but then scrolls, the video windows in the bottom right of the screen, allowing them to keep watching while also exploring the rest of the site.


A design for a trends editorial where all of the trends are expanded and visible by default.


This approach is successful not only for its clarity but also for its scalability across devices with different screens sizes.


Versions of the editorial that incorporate more or fewer images. The design on the right featured an effect where search bars would expand into images showing the types out trends.


In addition to simply graphs comparing search volume, other kinds of data visualizations were explored.


I also pitched a calendar-like layout for the Year in Search interactive site. In this view, the year is broken out into trending moments organized chronologically from the beginning of the year to the end. Insights could be short and concise or they could be expanded into more in-depth editorials as proposed below.


A more elaborate calendar approach to the trends editorial direction. The calendar year could feature only a few in-depth editorials or a each calendar day could expand to display insights.


Lastly, some designs showing options for the relative scale of the Year in Search video and the trends insights. At the top, the video dominates the site, while insights are presented only contextually on pause. Above—on the other end of the spectrum—the editorial can stand by itself but the video can also be watched at the top of the page.


The above two images are from the final design. Again, you can visit the site on about.google.

Eli Block © 2018