Life Quest – Mobile Adaptation

Duties: Mobile UI design, Interaction Design, Icon & App Store Marketing

Download:    Google Play:       iOS: (no longer listed)

With a very aggressive schedule, I partnered with an internal producer and an offsite developer to create a mobile-friendly port of the original Life Quest PC title in advance of its multi-platform squeal.  The original title was heavily driven by tool-tips which did not translate onto a mobile interface.  With roughly 2 months I was able to build out a design library of layer styles in Photoshop that quickly let us update the data-heavy interface to a sleek, animated menu system that was both entertaining and educational for the newer mobile market.

I broke the project into three main areas of focus: the Avatar Editor, Storefronts and Misc UI.

Avatar Editor:

The avatar system was a collection of loose head, torso and leg assets that were procedurally tinted.  I built a new carousel feature that loaded random assets in with leading animations that encouraged players to swipe and continue personalizing.

 

Storefronts:

With nearly 20 different stores and workplaces, each of which had dozens of items with stats that altered the player’s experience, I had to find a way to clearly show what the cost/benefit of a given array had.  I built out an accordion menu system that could function as a single, or multi-columned interface that again utilized guiding animations to illustrate the interactive nature of the dialogs.

Here is a video capture of a Flash demo I put together to describe the motion to our developer:

I was later able to replicate the animation throughout the game using an internal animation tool.

Miscellaneous:

Utilizing the new design library our mobile-friendly dialog system was quickly incorporated throughout the rest of the game, including a new Settings screen and a re-imagined, interconnected Stats | Home | Kitchen series: