Armies of Magic

Disney Interactive 2011-2012 Facebook Social Game

Project Overview

Armies of Magic is a side-scrolling defense game. The player must manage timing of troop deployment, as well as knowing the strengths and weaknesses of the different troops. AoM also ties in a city builder that allows you to train and level up your army.

My Involvement

• Lead UX/UI
• Flow Charts
• Wireframes
• UI Style
• Information Architecture
• Prototyping in Flash
• Interaction Design
• User Testing
• Managed one additional UI Artist

Main City

Build Mode

Army Headquarters

Manage Offense and Defense unit allocation


Research Mode

Book style UI to display possible research. Created and animated in flash the book page flip and optimized assets in flash.

Game Newspaper

Merchandising in-game items

Level Up Dialog

Indicates what has been made available to the user and the rewards for having reached a new level.

Versus Feature

Select opponents to battle against.

Guild Feature

Create a team of armies and battle against other guilds Guild members decide on who can join their guild and have a cms to manage all guild features, initiate battles and post messages on the guild newsboard.

Message Center

The message center was conceived with in mind the fact that it would be displayed over the loading screen of the game in order to optimize the players time. Gift acceptance was streamlined using jQuery transitions in order to click through without having to move the cursor (messages slide upwards as they are dismissed/accepted). xHtml optimized and jQuery prototype proved to engineers.


World Map & Player VS AI

World Map view

Map Node Character Dialogs

Created and prototyped OOP based AS3 code to implement scaleable dialog windows with various font formatting rules; one speech bubble, two speech bubble, padding, linespacing etc.

Battle Unit Selector

UI for selecting units and spells to bring into battle.

Battle Scene

UI allowing to select which units to send into battle, quantity remaining, crystals collected, health and other sets of data. Each element is given a specific visual hierarchy based on importance during battle.

Mini map is also provided to display what units are present off screen in the event the view is larger than the players monitor.

Frame and Background

Visible when user is in full screen and the scene does not exceed monitor resolution

Victory and Defeat Screens

Created vector art typography and animations in Illustrator and Flash.

Result Screens


WireFrames