TRANSFORMERS PUZZLE GAME
Client - Nestle
My role
UX / UI
Ideation
Game design
Asset creation
VFX
Client facing
Illustration
Programs Used
Figma
Overflow
Photoshop
After Effects
Illustrator
Premiere Pro
At Zappar, Nestlé approached us to create a Transformers game for the back of various cereal boxes.
We had significant creative freedom, but our main challenge was to develop a game that remained authentic to the new Transformers film despite having limited assets. Since the movie was still in production, we were provided with only a few character poses and a couple of backgrounds.
The concept needed to focus on building and transformation, so we decided to create a 3D puzzle game where players could assemble key Transformers characters.
As part of the cereal box promotion, children could cut and fold paper toy versions of the Transformers to create their own 3D robot. Inspired by these blocky designs, we used their textures to create puzzles featuring the characters' heads, arms, bodies, and legs.
This is the Optimus Prime version of the paper toy;
The objective of the game is to complete five puzzles to assemble a Transformers robot.
Each puzzle consists of a rectangular prism divided into two sections. One side of each section is designed to link perfectly with the other, forming a complete rectangular prism.
To connect the pieces, the player taps a section and rotates it vertically and horizontally until the two facing sides align correctly. Since all sides share the same texture, determining the correct orientation can be challenging. As the difficulty increases, more complex linking sections appear, making it even harder to visualise how the pieces fit together.
The player is timed on each puzzle, with faster completion earning a higher star rating. The longer they take, the lower their final score.
As with every product I design a low fidelity user flow to focus purely on the mechanics of the idea, please take a look below;
One the main idea is signed off I move onto the full high fidelity user flow where I show every screen in the product with all of the design assets that will appear in the final thing. The only parts that are still mock ups were the 3d bits which are made during the UI creation;
To give the experience a more premium feel I designed the splash to be a parallax scrolling page where the three key characters animated into the futuristic Transformers scene. I created this background and the smoke elements.
The instruction shows the actual game in situ where Optimus Prime guides the user through the various controls. Each robot puzzle has a background unique to them and all of the VFX is tinted to add an extra bit of finesse to the experience. I created all of the elements in these screens other than the 3D block.
There are 3 Transformers the player can choose from,Optimus Prime, Bumblebee and Elita - 1. The main menu shows a nice hero image of each character with a star rating and a download button. The star rating will show what the player scored in the last go and is placed here to convince them to have another go if they didn’t get the full 3 stars. The download button appears once the player completes a full set of puzzles and earns the HD wallpaper of the character, this button will allow the player to download this at any time. There is also a two player mode where the player can compete with a friend to beat each puzzle as fast as they can, before they reach the main menu, there is a single or double player menu. Players can also access the alternative menu by tapping the icon in the top right of the menu header.
Below are just some of the other screens I designed for the experience;