About the Game
UI/UX Designer Game Artist
UI Motion Design
Enhancing the game's visual feedback and player satisfaction to ensure that players have an enjoyable time, and that the visual decisions complement the elegant game mechanism itself.
COGNITION is a “tap-former” puzzle game for iOS devices that requires players to use careful planning and a nimble finger to control two perpetually rotating cogs named Click and Cogsworth. By tapping on the screen, players will stop one cog which frees up the other cog to move, thus allowing players to navigate the crazy imaginary worlds inside the mind of a troubled inventor.
Early Stage Design Story
Since our team teamed up in late 2015, a lot of new ideas had led us to kill our prototype babies and raise new babies again and again. But we are very happy with the final version of the game.
The contents below are our early game pitches and prototypes during different periods. Even if most of the art assets I was drawn are not be used in the final game, but I am very glad for I got a lot of practice on drawing quick concept art which services for each prototype.
Story 1: A Game About Pluto
"Little Pluto has been evicted from the solar system for not completing the 'I AM A PLANET' merit award! With his trusty backpack of favorite things, he roams the universe, helping other planets to gain enough badges and qualify for the award."
- Elevator Pitch 15 Sept 2015
Based on the discussion of our team's first meet, I drew the concept of our game idea which is about player control Pluto to shaping the planets.
This is a screenshot of out first prototype. We tested with claymation-style shaders and also the throwing mechanic to see how it feels and if it works.
Some concept arts of the planets that I designed.
We want to give each planet its own personality by using visual language. My concept arts give inspirations for our game's puzzle design. And I got a lot of inspirations from my teammates' gameplay pitches and the TV animation -- Adventure Time.
Story 2: A Game About Two Circles
Celestial Buddies is a single-player hand-drawn action game that has a unique orbiting mechanic that presents challenges in an interesting way. Control the buddies through touch input to eat space debris in order to grow bigger and populate the universe with stars.
- Elevator Pitch 15 Dec 2015
This quick gameplay concept drawing shows the characters' relattionship in a vivid visual way. It gives the guidance of the later on game produce.
Story 3: A Game Happens the Table
After we settle down the core game mechanism, we think using gears as game characters will have a much better visual and cognition representative of the game mechanism than the planet we were using for previous prototypes. So we switched the characters to gears and set the game environment on paper.
"COGNITION is a single player puzzle experience for touch devices where you will use a unique movement mechanism to explore a hand drawn world. Players control 2 cogs that are connected and are constantly rotating around each other. By mastering their movement, players will solve puzzles through clever use of objects in the environment."
- Elevator Pitch 8 March 2016
The first concept art for this version
Since the top-down view is visually helpful with representing the two gears' movement, and the time limitation, we chose 2D art and set the game environment on paper. Based on that decision, I came up with the idea of using hand-drawn art style. This style is special, eye-catching and making a good representative of the paper environment. After settle down the visual style, I started working on the visual guidance of the game, like the way to representing the dangerous objects and special props.
The visual design of this version had already very close to the final version. The final version's art has more variety on the environment and more consistent on visual language.
The challenge of this game's UI/UX part is how to tie up the whole game experience, from the title screen to the game ending screen, transfer the narrative to the players without using text, storyboard or animation. The player's interaction with the UI is also part of the narrative.
Introduce the character Story background In game Review of the game Story ends
The UI With Narrative
Level Select Screen
To express an interesting narrative and indulge in environmental storytelling without text, the level select screen has been designed into the sleeping inventor's brain. Through the interaction of the two gears jumping into the brain and drill a hole, the player gets the information that the game's setting is related to the brain, perhaps a person's dream in a vivid way.
End of World Interaction
To complete the narrative, at the end of each game world, through the player's interaction with the shaking epicranium, the inventor be woken up and the dream of this current period ends. The player joined in the storytelling and make it complete.
Game UI - the consistent visual language
The game UI consists of using the repeated element of gears, both on the visual and motion design. At the same time, give UI buttons some character, just like the items with eyeballs in the game scene. The interface buttons visually represent actions with commonly used iconology, to help players recognize the purpose of each button easily.
Motion design of the pause button
The pause button simulates the gear motion by rotating out the extra buttons and make a natural mechanical connection with the zooming out action of the scene.
Game Ending Screen UI
Array icons by type
Highlight frequently used buttons on this page.
Enough space between buttons to prevent from tapping by mistake.
Desaturate the color to make sure this less important information not pops out too much.
Human silhouette emphasizes the game narrative which is an adventure in a human's head.
Use accurate number to represent the important information
Give player the expectation for the higher goal.
Logo design for Cognition was long process of design thinking. In order to give new players the first insight about this game, I chose to use the most representative elements in the game, like the hand draw style, gears, craft tools, and designed those elements into the logo.
Cognition has three scenes: they each represent the inventor's childhood, youth, and adulthood memories. The items in each scene not only reflect this character's daily use objects during different stages of life, but also allow for background narrative immersion. They are a clear way of indicating game progress, and make a positive representation of the game's mechanism and difficulty curve.
1 2 3
Childhood Scene Youth Scene Adulthood Scene
Easy Hard Hell
Everything is cute and colorful in this period of memory. No sharp object, no death. It's a safe environment for players to explore.
The game is getting more difficult at youth memory. The visual design of this scene is representing this change - the objects are less colorful, shape, and some childhood toys have been modified by the inventor.
The memory is going crazy!!! Surrounding is so unsafe, must be careful about the creepy teddy bear!
The main color tone is gray, everything designed to be dangerous to the players.
Mr. Clock helps turn down the speed of the surrounding.
We designed twisted environment and unusual environment color tone to represent this special mechanism's visual effect.
Every time when the player bumps into a dangerous portion of an item, instead of going returning to the start of the level, time will rewind a few seconds to before the dangerous situation. This allows the whole game have less punishment, offer more enjoyment to the players, and another layer of strategy for time/positioning challenges.
We chose to desaturate the color of the scene and show a big clock running backward to represent the time rewind visually.
In order to make a good representative of the game mechanism, our team chose two gears as the game characters. My character design was focusing on giving each of characters a strong and opposite personality, and making their personalities represent at each action in the game through animation. At the same time, make sure the two characters are visually recognizable on the small mobile screen.
I used the characters in the movie UP as inspiration.
Do you want to play with me?
Go away, leave me alone!
Collecting the nerve cells in each level to unlock stickers, which can be used in the iMessage, is one of the important features in the game. We chose 24 memorable elements in the game and turned them into stickers. These designs not only reinforce the fun of collecting and give added replayability, but also helps with organic growth of the product and builds the Cognition IP by letting players share their unique collectable stickers on iMessage.
Eric Teo, Chris McGinnis, Wen Shi, and Alexander Feigenbaum