The Cheetos® snack brand is known for two things: delightfully cheese-flavored puffed cornmeal snacks and their cool spokescat Chester Cheetah®. So when Frito-Lay and The Marketing Arm approached us to promote their new Sweetos™ product through the design and development of Chester’s Eggerator, a sweepstakes site where users could create and share a digital Easter egg for prizes, we were determined to inject the site with the same classic, quirky persona of Chester Cheetah® himself.
Strategy and UX
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. Tapping into our Strategy and UX teams, we mapped out and defined the user flow, deciding what route to take users whether they submitted and shared an egg, entered a code from a Sweetos™ bag, or redeemed a prize.
After we defined the user flow and flushed out the wireframes, our UX and Design teams worked with stakeholders to define the guardrails around the Eggerator, posing and answering questions such as, “How many colors and textures is each egg allowed?” or “How many accessories can each egg handle?” In the end, each decision was driven to enable a fun and flexible experience free from clunky, chaotic features.
Our Design team then set out to build a responsive design 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.
Next we took the guardrails from UX and dressed up the Eggerator with a clutch of textures, colors, and accessories. We also added “Chester’s Choice,” a randomization feature for a touch of the unexpected. In the end, our team created no less than 200 custom assets, providing enough variety to prompt return visits and engagement.
Development and Production
This high-end design required animation and functionality to match. Our frontend 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.
Doing game-quality assets and visuals on a website timeline is a tall order. To this end we set up a processing pipeline that allowed designers and animators to drop in assets and have them automagically integrated into the working codebase. This was supplemented with a lot of good old fashioned face-to-face communication, resulting in a product that was on time, on budget, and beloved by our client, their fans, and our team.
The best challenges inspire big thinkers to think even bigger, thus enabling a mix of ideas which get better together. One of our most collaborative processes yet, each division of the team—client included—had to work in lockstep for a smooth, seamless release.
The collaboration paid off. The Eggerator was wildly successful, amassing 2.6 million page views, 193,000 users, 291,000 website sessions, and an average time-on-site of nearly 4 minutes—all in one month.
Smart thinking, compelling design, and a process that flourishes with your contributions.