Overview

I worked at DeNA West studio as the lead UI/UX Designer on Transformers: Age of Extinction for iOS, Android and Amazon which boasts 1.5 million DAU and a store average rating of 4 / 5 Stars.

Working directly with the Game Producer, I first helped compose the overall UI flow, IA, wireframes and concepting several completely unique iterations. I then designed and laid-out every screen of UI in the game and all of its iconography with the help or another UI Artist.

In addition to establishing the overall flow and navigation menus, I was also responsible for building out the designs in Unity (NGUI), and animating elements. For this, I worked closely with an client engineer to ensure proper implementation.

TF4 Key Art
(Character & Weaponry artwork are the property of DeNA and/or Hasbro)

Flow

Because of the given tight deadline, we need to jump into the flow right away. Basing off a conventional flow mobiles games have established, a flowchart was quickly created to help the engineers get started with building the framework. Each node is clickable and sends you to the corresponding screen with more detailed explanations. (With links to documentations)

TF4 Flow Chart
MissionSelect

Wireframes

When it comes to wireframing, Sketch allows me to create them quickly – I love it!
With the Export All option Sketch comes with, I can easily transport the wireframes into POP for quick interaction feedback around the office.

TF2_Wireframes_1
TF2_Wireframe_2
Wireframe Store
POP-WIP

Implementations

Transformers Age of Extinction was built using the Unity Engine. It was my first time using Unity and indeed Unity was a very powerful engine. We had our major hiccups with the NGUI’s anchoring system because no one on the team had previous experience with dealing with NGUI anchors. Our screens would often look distorted and out of proportion due to the wrong setup of the anchors. Fortunately it was solved at the end but it took us several months to find that solution.

Combined with Tower as our GitHub software, we would work in our own feature branch in order to be as organized and manageable as possible.

NGUI Anchors
The overly complicated NGUI anchoring system.
Tower Commit
Here goes nothing! Hope I won’t mess up the build with this commit. Fingers crossed.

Final Product

This game has finally launched world-wide on June 19th on iOS, Android and Amazon. The game was received well and it hit a record-breaking DAU’s (1.5 million) across ALL DeNA West Studio. Feel free to download the game from the Appstore, Android or Amazon market.

Splash_Login
02_Gear_Details_v2
02_Loadout_3
Gameplay_TF4