Burger King ClubBK

#

This online CRM program for Burger King is where I discovered my passion for product design. ClubBk was an online platform for extending the the kids meal experience into the digital space. There were monthly promotions that tied into a featured property that included a new mini-game, digital items to buy with coins earned from playing, and a free meal on your birthday. The beauty of the game was the depth in thinking the art director put into creating the world. Similar to other free online games at the time like Club Penguin, there was an open world kids could explore. They created an avatar, could change their outfit, decorate their room, launch games——and eventually have a pet, have a structured chat, and use animated emoji. During my time on the project I learned how to draw to style, construct art for animation, design game UI, and, my favorite, design levels.

Games

Our games were simple and based on familiar mechanics. The trick was to hint at the theme of the property featured that month without directly incorporating the characters.

Our games were simple and based on familiar mechanics. The trick was to hint at the theme of the property featured that month without directly incorporating the characters.

SpellArena_02.png
#
Over time our title cards were increasingly inspired from classic cartoons.

Over time our title cards were increasingly inspired from classic cartoons.

An example of a character sheet showing the separated parts, movement, angles, and effects.

An example of a character sheet showing the separated parts, movement, angles, and effects.

ZhuZhu_02.png
This food ordering game we had to translate our illustration style into forced perspective.

This food ordering game we had to translate our illustration style into forced perspective.

Often our animation UI ideas were communicated with static imagery and we’d verbally communicate our motion ideas to our animators. This allowed for shared ownership where both parties could lean into their strengths.

Often our animation UI ideas were communicated with static imagery and we’d verbally communicate our motion ideas to our animators. This allowed for shared ownership where both parties could lean into their strengths.

In game UI

Over the course of the project, Game instructions went from text on isolated screens with bits of branding to directing overlying the instructions over examples of gameplay.

Over the course of the project, Game instructions went from text on isolated screens with bits of branding to directing overlying the instructions over examples of gameplay.

I didn’t know it at the time, but creating heads-up-displays was an implementation of the heuristics system status and feedback.

I didn’t know it at the time, but creating heads-up-displays was an implementation of the heuristics system status and feedback.

SquareDown_01.png
Flashlight_02.png

 

 Level art

As we added more games to the site, we needed more places to launch them from. This is an example of a staging area. We would add these to parts of our world. Users could teleport to them directly from our mall or get there on foot.

As we added more games to the site, we needed more places to launch them from. This is an example of a staging area. We would add these to parts of our world. Users could teleport to them directly from our mall or get there on foot.

BoatInterior_01.png
Flashlight_03.png
StagingArea_01.png

 

This trading post would randomly show up in different parts of the world. Kids could swap items they didn’t want for new stuff.

This trading post would randomly show up in different parts of the world. Kids could swap items they didn’t want for new stuff.

The illustration lessons I learned up remain indispensable. This is a sample of a walking path. It has to visually stand out from the rest of the art and also be repeatable to speed up the illustration process.

The illustration lessons I learned up remain indispensable. This is a sample of a walking path. It has to visually stand out from the rest of the art and also be repeatable to speed up the illustration process.

This example is a template I would use when creating a level. It shows how much of the art the user can see and how far they can jump.

This example is a template I would use when creating a level. It shows how much of the art the user can see and how far they can jump.

For this level, I wanted to capture metropolitan Europe—specifically Paris. So, I went on Google Street View taking screenshots of the buildings. In 2009 this felt revolutionary.

For this level, I wanted to capture metropolitan Europe—specifically Paris. So, I went on Google Street View taking screenshots of the buildings. In 2009 this felt revolutionary.

 Characters, pets, items, and more

Characters_01.png
The construction of these pets will mess with your head depending on how much a stickler you are for animal anatomy. We had to keep our proportions and mechanics more or less universal. That’s why they all sit like cats.

The construction of these pets will mess with your head depending on how much a stickler you are for animal anatomy. We had to keep our proportions and mechanics more or less universal. That’s why they all sit like cats.

A sample of decorations a user could buy for their room.

A sample of decorations a user could buy for their room.

Exploded view of what it looks like going from isometric wireframe to completed illustration—_accounting for all of the pieces that need to animate.

Exploded view of what it looks like going from isometric wireframe to completed illustration—_accounting for all of the pieces that need to animate.

ThorItems_01.png
We evolved the idea of outfits into entire suits that would layer over their avatars.

We evolved the idea of outfits into entire suits that would layer over their avatars.

 

Next: Mobile app visual design