HEROES v VILLAINS
Art Direction, UI/UX Design and Branding
Heroes v Villains is a mobile web game developed and published by Cellufun. Players align themselves with either the "heroes" side or the "villains" side and complete a series of missions based on their alignment. To help complete their missions players must find and recruit super-beings to add to their teams, with strong emphasis on discovering and collecting them all.
I was the art director and UI/UX designer for this game, and worked closely with Cellufun's studio head Dan Martinelli to design this game. I also created the game's logo and various marketing materials.
Clone "Wars"
Over the past several years, Cellufun had developed a number of simple role-playing games, beginning with MOBile Wars in 2009 and followed up with Vampires Rising, Special Ops, The Stalking Dead and others. These "Wars" games all followed a similar format: players complete text-based missions and attack other players within the game to gain experience points and loot, building up their stats and gaining new weapons and items to progress through the game.
Cellufun enjoyed producing these types of games for two main reasons: 1.) They were quick and inexpensive to develop, and 2.) They (initially) proved to be profitable and popular with Cellufun's audience, particularly its male players. However, with each one following the same format, with little to no innovation from one to the next, their popularity waned and each subsequent iteration generated less and less revenue.
When we were tasked to create a new one based on super heroes, Dan and I agreed that if we wanted to recapture the players' excitement of the original MOBile Wars, we would have to shake up the formula. Specifically we wanted to address the players' complaints that the "Wars" games all looked and played the same, which meant reimagining both the game mechanics and the presentation to give them a fresh new experience.
Concept and Design
The first task was to work out how Heroes v Villains would both build upon and differ from the simple format of the "Wars" games. Because they served as the foundation for this project, Dan and I knew that the premise would still revolve around completing missions and building up levels and stats. The challenge, though, lied in changing up the rules of play without making the game too confusing for those players who were familiar with the old format.
To start, we came up with the idea of introducing non-playable characters, or "NPCs": super-beings that the players can take on missions with them. We would design our own characters of different types and specialties, each with their own strengths and stats, and the players would build up their stats by sending them on missions and have them earn experience points to upgrade them to higher levels. Players would have to find these NPCs while playing and recruit them to their team, thus adding a collecting mechanic to the game similar to Pokemon.
We also liked the idea of new players having to choose a side: the "heroes" or the "villains". Each side would get its own storyline for the missions as well as a slightly different version of the UI. Players from both sides would earn additional points from missions, aka "heroic act" points and "villainous act" points, that would go towards an overall global score for each side. At the end of a time peried (say, 4 hours), the leading side would be rewarded with bonus missions and additional boosts to their mission spoils. We felt this would add a strong social aspect to the game by encouraging players to actively engage in global competition with their peers.
As we fleshed out the game mechanics I began designing the user interface and flow of the game, breaking away from the simple HTML lists and icons from the old "Wars" games and creating a more visually-engaging layout. The gameplay was simple enough, it was just a matter of presenting it in a way that players would immediately pick up on.
Art and UI Development
For the overall visual style of the UI I wanted to give it a modern sci-fi computer interface look and feel. My aim was to give the players a feeling of being in a team leader role, like Marvel character Nick Fury of S.H.I.E.L.D., sending out their teams from a command center. I had not designed any projects with this style before so I looked at a number of recent superhero and sci-fi action movies for inspiration, most notably the Iron Man trilogy and The Avengers, as well as Oblivion, Skyfall and the more recent Star Wars films.
In addition to the UI, I also designed all of the icons for the equipment items, which players can add to their missions for added boosts to their spoils or enhance their assigned NPCs to increase their odds of success. Equipment can be gained as drop items from successful missions, or could be purchased for Funcoins, Cellufun's virtual currency.
I produced the UI in two different color schemes to differentiate the "heroes" side and the "villains" side. The heroes got a blue interface while the villains saw theirs in red and yellow. The missions also differed between the heroes and the villains, though they followed parallel storylines (example: the villains would go rob a bank, while the heroes would go to stop the robbery).
For new players I designed a simple tutorial overlay, to help guide them through the basic mechanics of the game as they play through their first missions.
Dan and I also conceived the NPC characters together, which I styled around Cellufun's existing avatars. We came up with a variety of unique super-beings, both hero and villain-types inspired by various comic book characters. About 30 characters were created for the game's launch; below are some samples:
Changes and Cuts
During development we went over the new rules of play a number of times to make sure we were going about the best approach for our players. After much consideration we took a step back at one point and revised some of the mechanics to make things less complex and to better streamline the flow of the game.
Initially the player was to go on the missions themselves along with the NPCs, and the player would have his/her own skills and stats to manage, including health and stamina. Ultimately we felt it was a little much for the players to manage both their own stats as well as their NPCs stats separately, and we preferred that the players focus on the NPCs to further push the character collecting aspect of the game. As a result, we dropped the idea of the player having his/her own stats in favor of a more simple experience point system (called "merits" for heroes and "demerits" for villains) used to track game progress and unlock later missions.
Only minor changes had to be made to the home screen UI from my original high-fidelity mockup as a result of this mechanic being dropped. Additionally we altered the header from its original design to include a timer for players to know how long they had to earn act points for their sides, and we replaced a button on the footer to allow players to view their equipment inventory outside of the mission dialogs.
Being a very small team developing this game, production was going slower than initially expected due to the lead developer's time being divided between this project and various other tasks. Faced with a hard deadline for releasing the beta, we were forced to prioritize some features in order to release on time. Our aim was still to give the players an entertaining new experience, even if we couldn't implement all of our planned ideas within the allotted timeframe.
We had planned to include an additional multiplayer function where players could go on "group" missions with their friends for additional spoils. This feature required a substantial amount of time from the lead developer, who was still refining the core gameplay late in the development cycle, and so we ended up shelving it for beta, with hopes to revisit it post-launch. Additional missions and NPC characters were also cut from the beta release due to time constraints.
Launch and Post-Mortem
Thanks to a pre-launch marketing campaign, we were able to build up a decent amount of hype for the game among Cellufun's community. About 620 registered users participated in the beta upon its release. Feedback from the beta players was generally positive: they liked the art style of the game and they enjoyed collecting the NPC characters and comparing their teams to their friends'.
On the other hand, many players felt the game lacked in content, a criticism that we expected due to the aforementioned cuts for time. We were able to address the content issue by writing up additional missions in time for the game's full release, and we added some new NPCs to the game later as part of a tie-in with Cellufun's annual Halloween-themed game Hallofun. Unfortunately, the planned multiplayer feature ended up being scrapped for good following the lead developer's departure from the company.
After a month in beta, Heroes v Villains launched full release to an audience of approximately 408,280 monthly unique visitors, a considerably smaller number compared to Cellufun's average monthly traffic when MOBile Wars launched back in 2009. Those who did play the game responded well to the UI design as well as the new features, and the game saw 22% more daily players in its first month of release compared to the last "Wars" game.
All things considered, I am proud of my design work for Heroes v Villains and glad that we were able to satisfy the players who had grown tired of the old formula. Though various circumstances held back this game from reaching its full potential, I took this as a lesson in the importance of expecting the unexpected during development and better tailoring project ambitions when resources are limited.
For more information on Heroes v Villains, visit the game's catalog page on Cellufun.
All images © Checkmate Heavy Industries LLC.