Launch Site

“Very nice storytelling site with lots of microanimations. Bonus points if Hook would have implemented its scroll logic with the native scrollbar for accessibility purposes, but still a winner!” —Baptiste Briel

“The natural flow of concise storytelling makes this information easy to understand and a pleasure to experience. The animated builds and movement enhance the content, which clearly shows how one achievement leads to the next. I appreciate the depth and form of this project.” —Nell Lundy

Overview: To showcase how Google has been a driving force in AI development for more than two decades, Ann Arbor, Michigan–based ad agency Hook created the website AI Milestones as both a public-facing interactive timeline and a toolkit for Google’s internal marketing team. The timeline highlights more than 50 milestones represented by animated images—mostly created bespoke for this experience—to provide a visually engaging way for users to explore Google’s contributions to AI. By showcasing these milestones, Google hopes to raise awareness of its commitment to creating solutions that positively impact society.

• AI Milestones uses CSS, HTML and WebGL with its core logic written in TypeScript. Hook created the 3-D animations using the three.js library and a custom JavaScript library called Degu developed by Blinkk. 
• The site currently has 51 images and animations and growing, comprising original illustrations, photos and logo assets.
• A team of about fifteen designers, creatives and motion graphics designers at Hook worked with Blinkk’s team to release AI Milestones in phases over the course of a year.

Comments by Mikell Fine Iles, executive design director: 

What are AI Milestones’s core features? “The site was designed to be an immersive experience, encouraging users to scroll horizontally through each milestone. We used a single dot as a guiding device that follows a winding path to depict a sense of exploration. Camera movements, transitions and atmospheric particles provide depth. We also created original illustrations for the majority of milestones, thereby defining a common visual language that ladders up to the Google AI brand.”

What was the thinking behind the navigation structure? “To enhance user experience and encourage exploration, we designed the timeline to guide users on a linear journey through the content, using interactive elements and visual cues to weave a compelling narrative. Smooth, intuitive scrolling lets users effortlessly navigate through the content, which is organized in a clear, chronological order. Visual symbols indicate the timeline’s direction, while interactive elements provide additional context and depth.”

What was the most challenging aspect of AI Milestones? “The rapid advancement of AI technology. Keeping up with the constant evolution of AI and its milestones was demanding, especially when we had to portray these intricate concepts visually. This required extensive exploration and collaboration.

“In our efforts to accurately depict the technology, we dedicated significant time to collaborating with our Google partners, whose perspective proved invaluable. For example, with large language models, our task wasn’t just to depict each technological milestone but to connect them, illustrating the increasing sophistication over time. This meant gaining a deeper understanding of how each model works and staying on top of the latest developments. We needed to convey not only the technical details but also the broader impact of these advancements on society and the future of technology. Through careful consideration and iterative design, we created informing, engaging visuals that captured the essence of these complex AI systems.”