Launched April 2013 on iOS and Android devices
For the EA Capital Games studio in Sacramento, we were desperate to prove ourselves and launch a mobile game in 2013 after going almost two years without a project green light and a few major business pivots. Our studio executives decided that the best strategy was to take the studio’s older titles of proven success, Superhero City and Age of Champions, and display their HTML/CSS in a mobile application format for the quickest speed-to-market. For these two games that were already nearing five years old, it was still going to take all hands at full capacity to achieve that course of action.
01. GOALS
For less risk in our investment of time and resources, we decided to first attempt the update process on Superhero City:
- The intention was to create a new version controlled branch of Superhero City and make the necessary changes to the existing files to fit into a mobile device format. There were plenty of viable resources that made it possible to display an HTML <iframe> in an app.
- The focus was to launch quickly on the iOS market and then onto Android when timing deemed appropriate.
02. CHALLENGES
The original assumption was that framing an HTML/CSS game into a mobile device sized area would be a straightforward task, but the team quickly discovered that there were many factors that would cause friction to such a process and we ultimately decided to build the framework from scratch:
- In its current state, both the frontend and backend code had many layers of messy solutions that made it impractical for the current team to work together in a coherent fashion – many of the newer hires did not even have experience developing for the web.
- I personally had not touched the CSS in a few years, but I recall that it was difficult even for me when trying to track down the source of display issues.
- Superhero City was a five year old game with several veteran user-engagement events and features that would likely have to be cut due to our timeline – this made it difficult to plan for where they could be added later.
- This project was going to be the first launch on mobile for the studio. We were constantly discovering new guidelines and limitations set by the App Store and Play Store that added unique cases to our workflows – cases that differed greatly from the game’s original Facebook platform.
03. SOLUTIONS
Being a core member of this project’s decision team and also being the original UI Designer who worked on Superhero City gave me unique insight – I was quickly able to assess the complexity of UI work and offer concrete examples for my suggestions during the entire course of the project.
Of course, I did my due diligence in providing interactive HTML/CSS mockups for a possible redesign of Superhero City and Age of Champions, but the rest of the team ultimately decided that it was much easier to start with a clean foundation developed strictly for mobile.
While the engineering team wasted little time and worked quickly to establish a new development pipeline that would involve translating a lot of the backend into a language and standards that everyone could agree on, I worked in parallel with the Producer and a couple Game Designers to quickly redesign how users would navigate and interact with the features of such a complex HTML game in a mobile device.
WORK IN PROGRESS
Within a month, we had successfully wireframed over two dozen unique screens (even after cutting out unnecessary ones). I was also taking this opportunity to re-imagine the style guide for a fresh audience. It was important to me to capture the essence of comic books and collectable cards that I felt I was not able to previously with the HTML game. I incorporated bolder colors, high-contrast materials, hand-shaded elements, and comic book panels / borders wherever I could.
UI SAMPLES
This project was the first time we hired a dedicated UX Designer for the studio. For prior projects, as the UI Designer, I typically performed equivalent functions as well as those of a Producer, Art Director, and traditional Graphic Designer. It was a relief to have someone set up user testing groups and report on any interaction friction points especially when the studio was already under tight scheduling pressure – this allowed me to work closer with the art team and engineers and promote new ideas.
The studio spent months trying to decide on a new title for this project because EA’s legal team discovered that Disney / Marvel successfully won the trademark rights to the word “superhero”. When I was working on the iconography for the game currencies, I joked with the Design team that the premium currency should be called “Supremium” which was ironic in a few different ways: 1) I openly expressed my preference for the “Supreme Heroes” name which was among dozens of options being voted on by the entire studio, 2) It playfully combined the words “supreme” and “premium”, and 3) The icon itself looked like an atom – many of the elements on the periodic table end in “-ium”. The team fully appreciated the idea of “Supremium” which ultimately also won the favor for “Supreme Heroes” being the final title.
04. TIMELINE
Early development began on this project in September of 2012. The team attempted to rework the HTML/CSS game through to December, but after the holidays the decision was made to create a clean foundation. The majority of my contributions to the worldwide launch in April of 2013 was completed by March, but I spent my down time improving the style guide and helping the art team establish new file size standards.
05. TECHNOLOGY
- The project was developed using Starling which was a third party, cross platform, game engine for Adobe Flash. The framework allowed us to publish to iOS and Android.
- As Starling used its own image / texture atlas creator, the engineering team took it upon themselves to manage and integrate the UI art assets into the framework to save time and confusion.
- We tested usability of strictly major features using the Invision web app due to the time the UX Designer had to spend on this project before getting assigned to the next project our executives wanted to prototype.
06. RESULTS
I am incredibly proud of how quickly the studio was able to achieve worldwide launch on both iOS and Android devices. Everyone performed admirably in spite of all the challenges of working with a complex game that was never meant for such a small screen – it certainly helped that most of the content and artwork could be reused.
