Evolving the UI Design of Transformers: Earth Wars
As our biggest game to date, Transformers Earth Wars, turns two years old, I thought it would be interesting to take a look back through our archives, and share some of the documentation, wireframes and artwork that we created in the process of building the game.
TF:EW was originally envisioned as a re-skin of our previous title Rival Kingdoms, however it soon became clear to the development team that to truly deliver on the promise of the Transformers brand that we would have to make much more fundamental changes to the user experience.
The production of the UI can be broken down to three major parts:
- Prototype
In prototype the team explored various features for the game and really try to decide what the game is and how it would look and feel. - Pre Production
During this part of development the team fleshed out the look and feel of the games visual design and concentrated on features that had made into the game from prototype. - Production
This phase, which in the case of TF:EW was a a vast majority of it’s development time, was where the team implemented the visual design and content, as well as polishing and improving the holistic player experience.
Prototype
After plenty of research, the team began to make a series of mock ups to explore how the UI would look and feel, while simultaneous designing features alongside our design team and implementing them with our engineers to understand and learn what does and doesn’t work for the game. By the nature of working across a number of tasks and having to move quickly, much of the UI art was fairly rough, but served it’s purpose to make features understandable to developers and stakeholders so that we can learn quickly and iterate.
At this stage in development features where in flux, with a number of features introduced, adjusted and then later polished or removed as we grew to understand the game. We used lots of of found art from our partners at Hasbro to simulate how characters and environments would be leveraged in the interface, as real assets where some months away from being available.
Although some features where wireframed, in many case we would experiment and prototype directly in Unity.
Preproduction
As we moved into preproduction we refined the look and feel, moving away from the Cybertronian feel that we had in prototype and bringing it closer to the consumer facing visual design of the brand that it reflected in it’s packaging and advertising.
At this point in development we now had a pretty good idea of the features that we would ship the game with, and we pivoted the user experience to focus around the extraordinary 3D assets that the art team where producing. This saw us add the 3D Troop Select screen and the Space Bridge, which until this point had been 2D experiences. We also decided that each faction should have a distinct UI theme, and we built out the tools and UI to enable us to do this.
Production
As the team moved into production, the UI/UX team grew from one to three, as we focused on building out the remaining social features, polishing the user experience., optimising and localising the game into multiple languages.
The UI visuals continued to evolve, taking the best parts of each of our previous iterations and creating something we felt was a unique and interesting take on the Transformers brand.
Post Launch
Since launch the UI has been improved in response to internal and player feedback. We continue to add new and exciting features to the games, as well as make quality of life improvements that improve the overall player experience.
We look forward to support our players with new and exciting content for many years to come!
You can download Transformers Earth Wars from the Google Play Store or Apple App Store.
Have you played Transformers Earth Wars? What did you think of the user experience? What would you improve or change? Would you like to see more of these kind of retrospectives in the future?
Please let me know in the comments and if you’ve enjoyed this article please leave us a clap!
