Alliance: Heroes of the Spire
Contribution: Lead UI, UX, Visual Design.
Tools: Photoshop, Unity3D, Cinema4D, Pixate.
Developer: Rumble Entertainment.
Alliance is a hero collection RPG from Rumble Entertainment. My contribution to the project covered all of the interface including production pipeline, tools, flows, wireframes, prototypes, user research, visual design, UI and 2D character animations, and front-end implementation in Unity3D.
Game logo created in illustrator and Cinema4D.
Examples of various screens in the game.
End of Alliance War pop-up
Path of the Ancients pop-up
Hero Avatars. These are thumbnail size in the game.
In pre-production my first task was making a data outline to determine scope. This was accomplished by reviewing the GDD, and researching competitive games on the market. Creating a data outline allowed me to successfully make timeline estimates for production, and was useful in creating the flows and wireframes, as well as engineering cost estimates.
In order to facilitate rapid iteration, I created the entire game out of very rough drawings, then made them into a tappable prototype using Marvel App. This allowed me to focus on the flows and high level framework, without getting caught up in aesthetics, as well as test and iterate quickly with the team and stakeholders.
Most of the interactions in Alliance can be understood with a tappable, web-based prototype tool like Marvel App or Invision. When designing interactions that were too complicated for Marvel, I would use Pixate or Origami to create a demo. Once the screen flow and UI animation tools were created, I moved to making prototypes directly in Unity.
Visual Design Process
After completing the wireframes and interaction prototypes I created style guide for Alliance. I was able to quickly develop a style the team was pleased with based on a "magitech" theme.
Visual design explorations.
6 example screens were created to explore possible directions, and get the team on the same page. I anticipated people would want a very busy and ornate design like they are used to seeing in AAA games, so I made one example (top center). It was very popular, however I encouraged everyone to view the designs on a phone…and they understood why that direction is not ideal. The ornate design overpowered the content. After discussing these designs with the team, they were undecided on the last 2, so I developed both further.
Two possible style paths were explored further.
After some iteration on both designs, the darker theme ultimately won.