Responses by Mikell Fine Iles, design director, Hook.
Background: In light of the world’s evolving relationship with digital media, YouTube’s Culture & Trends team decided—after a monumental year—to bring the 2020 YouTube Trends Report to life, virtually. The purpose was to highlight notable 2020 trends on YouTube for an audience of influencers, advertisers and policymakers around the globe. Drawing inspiration from the video-sharing platform, we set out to create a video-driven website where the web UI serves to encourage exploration. This curated experience features content creator interviews and includes data visualizations and video clips for additional context.
Design core: With nearly 45 minutes of video content, more than 650 clips, 75 new research claims and one soulful performance by musical artist Saxsquatch, the entire site centers around the YouTube player as a window into the year. The window’s scale and rotation are manipulated to add interest as the user scrolls. This singular window remains fixed to the center of the frame, and all content is revealed through this shape. As the user dives deeper into the content, the window splits into multiple smaller frames, simultaneously highlighting and seamlessly transitioning between all pieces of content.
As a design approach, the key art is decorated with doodles and paintbrush strokes, celebrating the creative spirit embodied by these trends and cultural movements.
Challenges: We had a very aggressive timeline that required a highly coordinated effort across the creative and production teams. Content, video production, design and engineering all had to move in sync with each other as well as with the client. To ensure everyone remained aligned, we had frequent video chats with key stakeholders scattered across the United States.
In order to launch the site as closely as possible to the year end, we had to design, develop and create all motion graphics simultaneously. We iterated on existing processes to devise a solution that worked best for this effort. Ultimately, we developed a workflow passing between Procreate and Photoshop for the design assets, handing them off to After Effects for motion to be exported to a Lottie animation, and then dropping the Lottie container within the site’s architecture. This was an entirely new creative process for us—and one that we’ll continue to tweak and apply to similar scenarios.
Navigation structure: The site features a linear experience curated and narrated by the YouTube Culture & Trends team. We set out to control the user’s experience by encouraging people to view the report from beginning to end. We intentionally omitted a navigation menu for this purpose. Instead, we allow users to jump back to the beginning of the experience by clicking the logo, and we provide a pagination counter to show them where they are in the experience.
Browse Projects
