📌 Project: Justice League VR Experience
👤 Role: Sr. UX / UI VR Game Designer
🏢 Company: Method Studios (High-end VFX & production studio, contracted by Warner Bros.)
📆 Timeline: May 2017 – Sep 2017
⚡ Focus: VR · MR · Entertainment · Immersive Gameplay
🛠 Services: UI · UX · Game Design · VR Interaction Systems
🎯 Impact: Designed the user interface for Warner Bros.’ Justice League VR game, created to promote the movie and Gillette razor tie-in. Developed immersive UI and gameplay systems across two levels, featuring heroes like Superman, Batman, Wonder Woman, Aquaman, and The Flash. Delivered interaction flows, spatial menus, and HUD elements that enhanced player engagement across multiple platforms (Oculus, HTC Vive, PSVR, IMAX). Contributed to one of Warner Bros.’ first large-scale cross-platform VR entertainment experiences.
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.
Outcome: The game launched across six major VR platforms ahead of the film’s release as part of a promotional partnership with Gillette. While sales metrics weren’t tracked due to the game’s free distribution model, it generated strong social engagement and sparked conversation across gaming and entertainment communities—receiving both praise and critique as part of its broader marketing impact.
2D wireframes for Unity VR Greyboxing