Pokemon Medallion Battle

Pokemon Title Image

About

“Pokémon Medallion Battle” is a Facebook Messenger game. The player collects Pokémon and chooses six of them to battle other Pokémon trainers. Each match consists of a series of clashes. Whoever wins three wins the match. The game also includes cooperative activities that challenge players' skills in new ways.

Play Game
Pokemon Title Image
Main Battle Screen

Main Battle Screen

This is the first screen that appears in the game. Players can enter through this screen into battles with random opponents. As a player ranks up, new stadiums are unlocked and new Pokémon become available.

This was a highly collaborative screen. All of the Art department helped out with the creation of these beautiful stadiums. The UI went through various iterations since new features were being added to it frequently. We decided on the visual style and language for the interface pretty early on. Yellow for the most important button (“Battle” in this case) and blue for secondary ones. It was important to keep the buttons 9-sliceable, making its size easily modifiable for other screens.

The navigation bar icons below were one of the first elements I created to figure out the rendering style. I knew they needed to be fun and playful since it is a casual game. I also wanted them to be readable on a small scale for smaller devices. I achieved this by creating simple silhouettes and using subtle gradients for rendering. The team decided that they would act as the selected states for each button, while a flat and simple version of it would convey the deselected state. The final result is a fun pop when tapping on an icon.

Navigation Icons
Main Battle Screen

Duel

Duel Screen Duel Screen Duel Screen Duel Screen

These are iterations for the friend challenge pop-up. They appear to encourage player interaction. We tried a few images to see which ones users were more attracted to.


Duel Friends Screen

Empty State

Duel Friends Screen

Short List

Duel Friends Screen

Long List

Duel Friends Screen

Awaiting Response

This feature encourages interactions with friends. Unlike the Main Battle mode, it allows users to directly challenge their Facebook friends. The progression system is similar to the Tasks feature, so that the user would already be familiar with how it works. I suggested the idea of adding icons that communicate their current online status to increase the likeliness of a response to a challenge.


Tasks

Players are rewarded by achieving various tasks. Each reward has three states: disabled, ready and claimed. Prizes sparkle and glow to attract the player's attention once they are ready to be claimed.

Task Screen Task Screen

Pokedex

Pokedex Screen Pokedex Screen Pokedex Screen

In the Pokédex, players see which Pokémons they have and haven’t collected yet. After tapping on a medallion, a modal opens to explain the Pokémon's stats and powers. We also had to credit the Illustrator who created the original Pokémon art. All Pokémon illustrations were delivered to us by the Pokémon Company and had rules about how they could and could not be modified.


Battle Results

Victory Flow

Defeat Flow

Battle Results Screen Battle Results Screen Battle Results Screen Battle Results Screen

I helped mock these screens along with other artists, UI artists, and animators. In the reward screen, we wanted to clearly convey who won and create some contrast by making the winner bigger and the defeated player smaller.


Gift Sharing

Gift Sharing Screen Gift Sharing Screen

Below are examples of the messages players receive in through Facebook Messenger.

Chat Message Chat Message

Every player can send candy, coins, and other great gifts to their friends. This is then sent through Facebook Messenger and claimed by tapping on the message received. (The eggs with Eevee ended up being changed to the medal packs).


Animation

These are assets I created working along the animation team at GC Turbo. They are used to communicate support abilities in the game.

Animation Assets Animation Animation Animation

Animations above created by Gustavo Gutierrez

Pokeball Animation

I created this mock in After Effects to reveal a Pokémon in the Gacha screen.

Loading Animation

Loading Animation


Pokemon Medallion Battle Logo GC Turbo Logo