Motive, a Project Worldwide agency, teamed up with Groove Jones to develop a dynamic mobile web photo experience for Pepsi, promoting the Paramount Pictures film Gladiator II. This interactive experience gave users an exciting way to transform into a Roman Gladiator or Royal Emperor. Users could upload or snap a photo, select from custom options, and receive a personalized composite image as their Gladiator II avatar, ready to share with friends and family.
The project aimed to create a seamless, web-based application that allowed users to easily integrate their photos into the Gladiator or Royal Emperor avatars. The goal of the experience was to get Pepsi fans excited about Gladiator II and the new commercial spot by sharing their best Gladiator or Royalty look on social media!
Experience Walkthrough
Users start the mobile experience with a link or by scanning a QR code from the landing page. Upon entering the experience, they are greeted by a screen titled “My Roman Empire” with NFL stars, including Josh Allen, Derrick Henry, Justin Jefferson, and Travis Kelce, dressed as Gladiators, alongside Megan Thee Stallion dressed as Roman Royalty.
Users then select “Who will enter the Colosseum?” and choose between a Gladiator or Royalty. Afterward, they pick their favorite Pepsi drink and various colors to customize their Gladiator character. With their selections complete, users are prompted to take or upload a photo. Once uploaded, the system seamlessly composites their face onto their chosen Gladiator or Royal Emperor character. After entering their email address, users can reveal their customized images. They can then save the image to their device, share the experience on social media, or restart the experience to create another character.
GrooveTech Design and Development
The design and development process was collaborative, with Motive and Pepsi providing key inputs to ensure the app met its creative vision. Groove Jones worked on creating user flow documentation, wireframes, and visual designs before moving into development. The design allowed for a clean and easy-to-navigate interface that immersed the user in the Gladiator II world.
We began by utilizing computer vision and machine learning to detect and analyze over 460 facial landmarks, allowing us to accurately assess each user’s face shape, eye position, nose placement, mouth alignment, and shoulder orientation. Using these data points, we calculated the exact angles and orientation of the face to match it seamlessly with the reference image of the Gladiator or Royal character.
Next, we ran these tools on the user’s photo and the final composite reference to ensure a precise alignment of critical facial features, like the eyes, mouth, and head orientation. With the face correctly positioned, we applied background detection techniques to remove unwanted elements, making it possible to flawlessly integrate the user’s face into the Gladiator or Royal scene. Finally, we layered in the Gladiator armor, helmet, or crown, applying lighting adjustments, color correction, and shadows to create a polished, cohesive look. The result was a visually stunning composite that allowed users to see themselves as either a fierce Gladiator or a majestic member of royalty, all while ensuring the experience was as immersive as possible.
