ux + ui + visual + game design • art direction
year: 2014 • project length: 2 years • platform: ios
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
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
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
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.
Monster egg designs in 3D
Monster evolution examples slotted into ALMS
Mixtape's procedurally generated gameplay
Music player interface and controls
Monster game sprites
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
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.
Level background artwork
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.
SEE YOU NET COWBOY...