About the Game
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.
My Role
My role was to lead the core gameplay design, player experience, and visual design. My specialty is using visual language to transfer information and enhance the playful experience. Other members of the team are Eric Teo, Chris McGinnis, Wen Shi, Alexander Feigenbaum.
UI/UX Designer Game Artist
Concept Art
Character Design
Environment Design
Animation
Prototyping
Wireframing
UI Assets
Motion Design
Branding Design
Game Trailer
Early Stage Design Stories
Since our 5 team members 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 game ideas and art assets I created are not be used in the final game, but I am very glad for I got a lot of practice on brainstorming and drawing quick concept art which services for each prototype.
Story 1: A Game About Pluto
During the summer of 2015, because I felt very sad about Pluto has been evicted from the solar system, so I came up with the idea of creating a game about Pluto's adventure. I pitch the idea to a lot of game developers and we formed a team of five very soon.
"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.
Ice and Fire Planet
Biting each other Planet
Juice Planet
Suicide Planet
Some concept arts of the planets that I designed.
We want to give each planet its own personality by using visual language. I drew these concept arts based on existing gameplay ideas, but I also drew concept art first to inspire game ideas around it to push the design process forward. I got a lot of inspiration from the TV animation -- Adventure Time.
Story 2: A Game About Two Circles
The first prototype got great feedback from testers and the whole team loves this game direction but after consideration of the time and resource cost of designing unique world art and puzzle mechanism for each level, we decide to focus on one core mechanism and make that mechanism really fun to play.
Based on the concept art of the planet bites planet planet, the second game direction turned to Pluto and his moon rotates around each other to move, bully and bullied.
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
Gameplay Concept
This quick gameplay concept drawing shows the characters' relationship 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 a 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, as 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.
First playable demo for this version
UI/UX
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.
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.
Introduce the character Story background In game Review of the game Story ends
The UI With Narrative
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.
Level 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 Iteration
Logo design for Cognition was a 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-drawn style, gears, craft tools, and designed those elements into the logo.
Game Art
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
Childhood Memory
Everything is cute and colorful in this period of memory. No sharp object, no death. It's a safe environment for players to explore.
Youth Memory
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.
Adulthood Memory
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
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.
Time Rewind
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.
Childhood Youth
Adulthood
Character Design
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.
Inspiration
Design Process
Animations
Do you want to play with me?
Go away, leave me alone!
Stickers
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 the organic growth of the product and build the Cognition IP by letting players share their unique collectible stickers on iMessage.
Thank You
I've hosted over 20 rounds of playtesting at the different development phases. The valuable feedback I've got from testers made me seeing the current problems and pushed me forward to purchasing a better game experience. Thanks for all our testers who played Cognition!
Players feedback is a key measurement of my design iterations
Our team photo
Thank you all!
