“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
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.
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.
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.
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.
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.
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.
Below are examples of the messages players receive in through Facebook Messenger.
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).
These are assets I created working along the animation team at GC Turbo. They are used to communicate support abilities in the game.
Animations above created by Gustavo Gutierrez
I created this mock in After Effects to reveal a Pokémon in the Gacha screen.