Frito-Lay and Hasbro launch a whimsical WebAR experience that brings snack lovers into the board games they grew up with.
To kick-off the partnership between Frito-Lay and Hasbro, we teamed-up with Tracy-Locke to create Play Together, Win Together: an imaginative WebAR game that immerses consumers into a world that brings together Frito-Lay’s delicious family of brands with the nostalgic charm of the Hasbro board games everyone loves. And to make sure everyone could get playing straight away, we leveraged custom printed packaging that let consumers launch the experience directly from Frito-Lay Variety Packs.
Through UX, immersive world design, WebAR development, and 3D animation, this project let us flex our expertise across a number of Tool’s strengths to create an experience we knew snack fans would adore.
Custom Packaging
With custom packaging created specifically for the Play Together, Win Together campaign, consumers are able to launch the experience by simply scanning a QR code printed directly inside Frito-Lay Variety Packs.
The Experience
After scanning the QR code, the experience opens inside the user’s mobile browser. They are then presented with an AR camera, allowing them to pinch, zoom, and rotate a digital twin of the Frito Variety Pack box and place it anywhere in their environment. From there, the box magically unfolds, revealing a 3D gameboard chock-full of animated Easter Eggs that celebrate both iconic brands.
Place the Box
Roll the Dice
Enter to Win
With a quick roll of the die, players take their LIFE car on a virtual road trip across the gameboard. Along the way, they pick up Frito-Lay collectables while exploring scenes featuring Hasbro favorites like Monopoly, Scrabble, and more. With simple and intuitive game mechanics, we aimed to create a frictionless experience that allowed players to easily traverse our virtual world, leading them to the finish line where they can enter a contest for a chance to win Frito-Lay goodies every day. Of course, if players wanted to keep playing and exploring, the detailed design of our gameboard had plenty to keep them busy.
Gameboard Design
The gameboard’s look is inspired by the art of paper craft. Mountains, buildings, and roads are decidedly tactile, with textures and finishes that mimic the look of cardboard — as if they’re cut out from the Frito-Lay cardboard box itself.
The gameboard is divided into 5 distinct lands, each highlighting a Hasbro property that’s featured throughout the campaign. Around the perimeter, is the Frito-Lay Express: a train that’s always on the move, circling the board hauling its cargo of Variety Packs.
Life
Players start their road trip at home in a quaint, little suburb lined with trees, multi-colored homes, and a larger-than-life LIFE spinner at the center square.
Scrabble
Next up, players leave the comforts of their small town and make their way into the wilderness, where the wooden Scrabble tiles have seemingly sprung from the forest floor
Sorry!
We then brave the desert heat. In the distance are monolithic, brightly-colored plastic Sorry! pieces bumbling into each across the sand dunes.
And of course in this heat, leave it to our pal Chester Cheetah to give you a spicy temperature reading.
Connect Four
Up next, players enter a bustling construction yard. At the center is a large, Connect 4 grid towering above the equipment working below.
Monopoly
And finally, we are at the end of the road: the big city. Red plastic hotels and the family of metallic Monopoly pieces are on every block nestled in between the looming skyscrapers.
And what’s that? Up in the sky is ole’ Mr. Pennybags is making it rain.
The Tech
We combined WebGL, GLSL shaders, WebAR and Niantic/8th Wall to create an engaging immersive experience. Once in the game, participants could smoothly scale, rotate and position the game board to sit perfectly in their world whether large enough to cover the kitchen table or living room floor.
With a large, detailed game board and dozens of animated models, carefully optimized models and animations were critical to ensure the experience performed great across every device. We also used shaders to optimally show particle systems such as raining Monopoly money or fireworks.
The Campaign
As part of the larger Play Together, Win Together campaign, our WebAR experience served as a digital extension to hero spots that brought awareness to Frito-Lay’s and Hasbro’s partnership. Developed in parallel, we worked closely with Tracy-Locke’s team to craft an imaginative, digital take of the world inspired by their series of launch films. Because when snacks and board games come together, everyone wins.
