Method Studios
Method Studios is a high-end visual effects (VFX) and production company that specializes in creating cutting-edge visual effects, animation, design, and post-production services for film, television, advertising, and virtual reality (VR).
Warner Bros enlisted Method Studios to create an exclusive Justice League of America game, tied to the movie release and Gillette razor blades promotion.
I was brought in as a Game Designer to design the user interface for two levels of gameplay featuring iconic heroes like Superman, Batman, Wonder Woman, Aquaman, and the Flash.
Agency
Method Studios
Role
Sr. UX / UI VR Game Designer
Services
UI, UX, VR, MR,
I collaborated on the integration of varied wearables such as Oculus, Google Cardboard, Sony VR, HTC Vive, and IMAX.
I played a key role in ideating gameplay elements, defining powers and points systems, refining UI elements, crafting compelling narratives, orchestrating audio cues, and scripting engaging interactions between heroes.
When designing this VR game, there were limited references available, so we had to establish the game by creating several artifacts and flows. In the discovery phase, it was crucial to understand the various inputs and tracking space across devices. Equally important was teaching users how to interact and move in the game through visual instructions.
We defined game options, controls, scoring, and visual indicators, as well as health values and enemy stats to ensure a challenging experience. This required detailed spreadsheet comparisons.
User flows for each hero and defining the core loop of each were essential to highlight the story-telling aspect of the game.
Production Limitations Infographic
Google Cardboard Pre-game UI States
Gameplay Ergonomics
IA Health Meters
Google Cardboard UI Flow
Oculus UI Flow
Full IA Game Flow
UI Flow
During the discovery phase of our game design project, I developed a method for selecting a hero at the start of the game in VR. The aim was to create an intuitive interaction between movement and visual cues. I iterated through several designs, including a line-of-sight reticle, placing hero emblems into corresponding wall slots, and using color changes for selection states. Ultimately, I opted for a simplified approach where players punch the hero symbol to make their selection. This minimized design effectively combined ease of use with engaging interaction.
Creating a game involves extensive testing of both visual interactions and failures to find the right solutions. In these examples, you can see various game tests on weapon powers and placement, as well as how damage is displayed when enemies hit the player. Even the Batmobile has a health meter, which must be positioned so it's visible without distracting the player from the game's action.
Cyborg Life Meter Z Axis Test 1
Wonder Woman Damage Perimeter Visual Cue
Cyborg Reticle Weapon Z Axis Test
Batmobile Health Meter Test 1
Batmobile Health Meter Test 2
Batmobile Health Meter End result in Unity
Cyborg Perimeter Damage Visual Cue
Cyborg Arm Weapon Powerdown Placement Z Axis
Cyborg Arm Weapon Powerdown Placement Z Axis 2
Cyborg Weapon Z Axis Test
Credits Screen
To create Justice League VR, hundreds of wireframes were needed. By understanding the basic core loop, we can identify how to develop a series of games with common attributes such as scoring, control inputs, leaderboards, and settings. Defining these game elements and incorporating storytelling at the wireframe stage allows us to establish connectivity, flow, and actions early on without risking too many resources.
2D wireframes for Unity VR Greyboxing