Will Houng User Experience + Product Designer

Mixtape Monsters, a music-driven monster collection game

My role
ux + ui + visual + game design · art direction
Product type
Mobile game

Mixtape Monsters was the first original IP created by Backbeat Networks during my tenure with the company as art director. Up to that point we had been working exclusively on ports and client projects, so we really wanted to work on something that reflected both our technical capabilities and sensibilities.

The app’s hook came from scanning a user’s mobile device for audio files, and using metadata like ID3 tags, to then sort songs into a proprietary taxonomic system which would be used to procedurally generate unique digital pets, or monsters, and games for collection and play.

Problems to Solve

  • Create a musical world and its monster inhabitants
  • Design a system to mix and remix monsters
  • Produce a pitch deck and promotional materials

Process toward Solutions

Given the small startup nature of the company I wore many hats on the project, including UX researcher and designer, game and systems designer, game artist, and UI designer among others.

Whiteboard session outlining user flow and game loop
Whiteboard session outlining user flow and game loop
Mixtape's core loop
Mixtape’s core loop

Competitive product research, set us on a path of a monster collection game given the popularity, social, and viral potential of such games. At the time of development, procedurally generating content based on a user’s music library was pretty revolutionary and ambitious. Without widespread established streaming services, coupled with often inconsistent or non-existent metadata challenges were abound.

Early draft of monster taxonomy system design
Early draft of monster taxonomy system design
Three segment monster in ALMS
Two segment monster in ALMS
Three segment monster in ALMS · Two segment monster in ALMS

In spite of these hurdles, I designed a taxonomic system based on the most commonly tagged musical genres of the time. After sorting a player’s listening habits from most granular of genres to coarse, this information would be fed into a system I affectionately dubbed the Adjustable Lego Man System, or ALMS for short. In essence, monsters could be broken down into anywhere from 1 to 3 body parts, depending on desired complexity or stage of evolution. Leveraging this system would allow a procedural way to mix-and-match or, in effect, remix monsters to generate unique characters based on a user’s unique listening tastes.

Monster concepts
Monster concepts
More Monster concepts
More Monster concepts
And more Monster concepts
And more Monster concepts

Additionally, we used information like BPM and artists to procedurally generate game content like levels, enemies, and collectibles. Based upon listening history and preferences, the app would generate a monster egg, which would then become a monster hatchling. Continued listening habits, be it in app or out, would determine a player monster’s course of evolution and growth.

Egg 1
Egg 2
Egg 3
Egg 4
Egg 5
Egg 6
Monster egg designs in 3D
Egg
Playlists
Stats
Drumbert
Sharkie
Monster evolution examples slotted into ALMS
Mixtape's procedurally generated gameplay
Mixtape’s procedurally generated gameplay
Music player interface and controls
Monster game sprites
Music player interface and controls · Monster game sprites
3D model of a baby monster
3D model of an evolved bipedal monster
3D model of a baby monster · 3D model of an evolved bipedal monster

Other notable features include designs for the feeding, care, and nurturing of monsters, in addition to customization and propagation through genetics and breeding, or, heh, monster-mashing as it were.

Feeding time
Mix and match genetics to create new Monsters
The love shack where it's at
Feeding time · Mix and match genetics to create new Monsters · The love shack where it’s at
Level concept
Level concept
Level concept
Additional level design concepts
Additional level design concepts

In addition to our playable prototype demo, another key deliverable was a pitch deck I designed using Keynote. Using concept art and additional art created specifically for the deck, I was able to leverage some of Keynote’s unique features to create a dynamic and vibrant deck that could be run easily on any Macbook.

Mixtape Monsters pitch deckKeynote
Level background artwork
Mixtape app icon
Mixtape app icon

Outcome and Lessons Learned

Ultimately given our client-work-centric startup nature we were only able to dedicate enough resources and time to create a prototype proof-of-concept. This consisted primarily of a mini-game using procedurally generated levels based on a given song from the player’s library being used as background music.

That being said, Mixtape Monsters was an invaluable experience in bringing to life a prototype from zero to concept to playable demo. I was able to vastly increase my generalist skill set by touching upon nearly every aspect of design and production.

The monsters

SEE YOU NET COWBOY…

More pictures