About the Game

 

 

 

 

 

 

 

 

My Role

 

 

 

 

 UI/UX Designer                         Game Artist

 

 

 

 

 

 

 

 

 

 

 

Concept Art

Character Design

Environment Design

Animation

UI Assets

Wireframing

UI Motion Design

Logo/Icon 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.

Game Trailer

 

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

Gameplay Concept

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.

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.

 

 

 

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

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.

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 organic growth of the product and builds the Cognition IP by letting players share their unique collectable stickers on iMessage.

Developing with:

Eric Teo, Chris McGinnis, Wen Shi, and Alexander Feigenbaum

www.LunaFive.com