Year in Search
Interactive campaign website
2019

Every December, Brand Studio produces the "Year in Search"—a supercut of the most searched moments of the year wrapped in a compelling narrative. The Year in Search interactive is intended to extend the Year in Search experience by highlighting and allowing users to explore the Google Trends data behind select moments and people featured in the film.

I was the principle interaction and visual designer for the Year in Search 2019 interactive experience. Below is a collection of designs for different incarnations of the interactive site. While many experiences were considered, the ultimate design allows users to watch the Year in Search video, and then to go "behind the scenes" to explore the things the world searched for in 2019. You can visit the live site at about.google. I also designed the Year in Search collection page on the Google About site, where you can see all the past Year in Search videos.

Ultimately, the Year in Search 2019 interactive companion site won the 2020 Best Branded Editorial Experience Webby for the "best individual and multi-part stories or editorial features enhanced by the addition of innovative storytelling elements, design components, and increased interactivity."

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.

Finally, a version of the Year in Search interactive experience that maps trends data onto the 2019 calendar year. Users can click to see trends from many of the year's most significant days and events.

Needless to say, the selection of mocks shown here represent only a small slice of all the design (UI & UX) explorations for this project. In fact, in some ways this project is ongoing because I am continuing to make new designs relating video, editorial, and trends content for both the Google Trends redesign (under development) and the Year in Search 2020 interactive experience website.

Brand Studio

COMING SOON

Google Brand Studio portfolio
2020 — 2021

Year in Search

NDA

Google Trends web experience
2020

Airbnb Samara

NDA

Product & site design
2021

Fossil by Wild-Type
Interactive web poster
2020

Front view of marbled Fossil drive angled slightly to the right.

Fossil

Long-term file storage drive
2019 — 2020

Miu

Font family
2020

Google Trends

NDA

Google product redesign
2019 — 2020

Compton Cowboys

Google Trends editorial
2020

Soli Objects

NDA

Hardware Exploration
2019

Google COVID-19 Site
COVID-19 Information & Resources
2020

YouTube Learning Prize

NDA

Design for YouTube Learning Prize
2017 — 2018

Most Searched in History
Interactive campaign website
2019 — 2020

Year in Search
Interactive campaign website
2019

Year in Search
Additional interactive concepts
2019

Type I
Wild-Type Color
2017 — 2018

Type II & Type III
Wild-Type Color
2017 — 2018

Google Pixel 6 Website

NDA

Google hardware vision
2018 — 2019

Type IV
Wild-Type Solar
2017 — 2018

Pattern Radio: Whale Songs

Interactive website design
2018 — 2019

Type L
Wild-Type Landscape
2017 — 2018

Type T
Wild-Type Landscape
2017 — 2018

Type K
Wild-Type Landscape
2017 — 2018

Type S
Wild-Type Landscape
2017 — 2018

Paradiso Poster
Wild-Type poster
2020

Type M
Wild-Type Landscape
2017 — 2018

Type P

COMING SOON

Wild-Type Landscape
2020

Google About

NDA

Site design & vision
2019 — 2020

Wild-Type.Engineering
Wild-Type website
2017 — 2018

Are.na Design

COMING SOON

Are.na brand & UI exercise
2019

Chat Bot

NDA

A.I. training website
2018 — 2019

Google Search History

NDA

Concepts for a new Chrome feature
2019

Notable Women I
Google font, brand, website, apps
2017 — 2018

Notable Women II
iOS & Android apps
2017 — 2018

Lacquer
Google font, poster, type specimen, website
2019

Lacquer Specimen
Font specimen website
2019

Google Crabfood
Internal insight team brand & website
2017 — 2018

Google Crabfood Culture

NDA

Bi-weekly culture newsletter
2017 — 2018

Google Pixel 6

NDA

Google hardware vision
2018

Phone Mode
Power-saving light mode for Google Pixel 4
2019

Google Today

NDA

Google Trends vision
2019 — 2020

Palette.Live

Color palette website
2018

Design System

NDA

Helix consumer genetics
2017

Helix App

NDA

Helix iOS app design
2017

Shopping on Google

NDA

Google Shopping redesign
2018 — 2019

#Ad

NDA

Google experience visioning
2018

Google Design

NDA

Branding, products & posters
2017 — 2021

CreativeLab5.com
Google Creative Lab 5 website
2017 — 2018

Google Hardware

NDA

Various sketches & blueprints
2017 — 2019

Here Magazine

Location photography
2018 — 2019

On Hybrids

Thesis project, website
2016

Photography

COMING SOON

Film & digital photography
2016 — 2021

Top