Snack On This
Project Overview
Project Overview
The Cheetos® snack brand is known for two things: delightfully cheese-flavored puffed cornmeal snacks and their cool spokescat Chester Cheetah®. Frito-Lay and The Marketing Arm planned for Chester’s Eggerator to be a sweepstakes site in promotion of their newest product, Sweetos™ Cinnamon Sugar Flavored Snacks. Here, users could either create and share a digital egg or submit codes from Sweetos™ bags for the chance to win $10,000 and smaller instant prizes.
How Would You Like Your Eggs?
The Design
The responsive site was designed with a child-friendly interface that was simple, bright, and oversized (read: easy to use). Taking inspiration from Chester Cheetah®, an icon since the ‘80s, we decided to bridge nostalgia with novelty by mixing old school animation techniques with modern-day design.
The decorator included a clutch of custom textures, colors, and accessories that we designed to fit to 4 different egg shapes. Each egg had its own personality which inspired the type of textures, colors and accessories that were included for the user to choose from giving each egg a unique look. It also included “Chester’s Choice,” a randomization feature for a touch of the unexpected. In the end, the decorator included more than 200 custom assets, providing enough variety to prompt return visits and engagement.
The decorator included a clutch of custom textures, colors, and accessories that we designed to fit to 4 different egg shapes. Each egg had its own personality which inspired the type of textures, colors and accessories that were included for the user to choose from giving each egg a unique look. It also included “Chester’s Choice,” a randomization feature for a touch of the unexpected. In the end, the decorator included more than 200 custom assets, providing enough variety to prompt return visits and engagement.
The Dev Is In The Details
Development
The dev team worked closely with the creative team and employed modern application structure and canvas animation techniques to enable silky animations and UI tailored to a variety of devices. Pixi was used to enable complex motion that took full advantage of GPU acceleration, while AngularJS was used to quickly build out a fast and iterable application structure. Extensive and intelligent caching was employed to handle the heavy and spiky traffic to the app. A processing pipeline was set up that allowed designers and animators to drop in assets and have them automatically integrated into the working codebase.
Development
The dev team worked closely with the creative team and employed modern application structure and canvas animation techniques to enable silky animations and UI tailored to a variety of devices. Pixi was used to enable complex motion that took full advantage of GPU acceleration, while AngularJS was used to quickly build out a fast and iterable application structure. Extensive and intelligent caching was employed to handle the heavy and spiky traffic to the app. A processing pipeline was set up that allowed designers and animators to drop in assets and have them automatically integrated into the working codebase.
Type: Website
Client: Frito-Lay, The Marketing Arm
Agency: HYFN
Agency: HYFN
Date: March, 2015
Creative Direction: The Marketing Arm, Nick Boes
Producer: Susan Kirksey
Art Direction: Nick Boes
UX: Melissa Wedeen
Design: Nick Boes, Matt Webster
Production Design: Carissa Catalina
Animation: Matt Webster
Development: Daniel Leavitt, Shaun Collins, Mike Curts, Jeremy Dowell, Matt Webster, Tom Krenzke
