When Google asked Hobbes to animate the out-of-box experience for their Nest Hub Max, our team had an opportunity to leverage motion design for user education. Our challenge was to strategically employ animation within difficult design constraints, enabling users to understand their new hardware while setting a positive and productive tone for the user experience.

Our team’s first task was to ensure that users understood how the camera works—how activating it improves their experience, but that it can also be physically disconnected by enabling privacy mode. To convey these concepts clearly and efficiently, Hobbes designed a series of animated illustrations to visualize the physical hardware on the Nest Hub Max during the set-up experience.

Relative to illustrating physical hardware, such as a camera, designing animations to depict more abstract principles like a mesh network—the type of local network that allows all of a user’s home devices to communicate with one another—posed a bigger challenge. Our team needed to visualize the concept of an invisible, decentralized network, and create animations which would keep users engaged and occupied while the Nest Hub Max completed important setup operations.

Every file our team created had to be delivered as a code-based animation. This meant designing each of the animations—including this cel-animation—to work with Lottie.

Our team’s goal was clarity for the user. Yet if we depicted the Nest Hub Max interfaces with 100% accuracy, the designs would require constant updating to accommodate every future UI change and localization for every new market. So we future-proofed each design, making it abstract enough to avoid constant updating but literal enough for users to clearly understand the message.