Google Creative Lab

AlphaGo Documentary Site

AlphaGo is an artificial intelligence computer program developed by DeepMind, the AI subsidiary of Google, that plays the ancient Chinese board game, Go. The aim of the two-player game is to use "stones" to surround more territory than your opponent on a 19x19 grid. AlphaGo made history by being the first program to beat not only a professional human Go player, but also defeat a Go world champion. The journey from London (where DeepMind is headquartered) to Seoul (where AlphaGo competed against 18-time world Champion Lee Sedol in a five-game, seven-day challenge) was filmed and released as the documentary, AlphaGo.

Google Creative Lab (GCL), Google's internal design studio, and AlphaGo producers approached Hook in August 2017 to build a website that would usher the documentary into the busy fall film festival season. They wanted a site that was "simple, easy to read, navigate, and understand" and felt "premium without unnecessary bells and whistles." As the lead developer for the project, I kept these attributes in mind as I developed the responsive six-page site from mockups provided by GCL as well as throughout client reviews and revisions. Showcasing vivid imagery and video from the film, the website attempts to draw visitors into the AlphaGo story and take them along the monumental journey.

The AlphaGo site was built using Polymer 2.0 and is hosted on Google App Engine. App Engine also gave us the capability of staging multiple versions of the site for client review as development went on. To give off more of a "premium" feeling, I added CSS animations to features such as the mobile navigation menu and the dropdowns seen on the mobile layout of the Filmmakers and Press pages. Common page elements, namely the navigation and footer, were built outside of Polymer for faster rendering on site load. Working closely with GCL, with direct input and approval from AlphaGo stakeholders, we launched a website that captured simplicity and gave the award-winning film an online home.

Technologies Used: HTML, CSS, JavaScript, Google Polymer, Google App Engine, TweenMax

Visit the project