Batman: Arkham Shadow

The blockbuster hit Batman: Arkham Shadow lets players don the cape and cowl in an up-close-and-personal action adventure VR game. Joining the project 6 months before ship, I established a bold visual UI style and then proposed UX/UI solutions where they were reasonable and feasible.

Challenges Batscore

This new proposed design attempts to solve a number of UX issues created when the original wireframes merely copied old Batman: Arkham titles.

Focus: It shifts the information into the upper portion of the cowl. This brings it forward and closer to player's forward view.
Simplicity: The score information has been streamlined into line of text showing the current score in blue which matches a filling progress bar on the Bat score icon. Adding a visual cue with the current / goal text reinforces progress in an easy to understand way.
Delight: Adding a celebration animation when you achieve the score will not only be informative, but sprinkles visual delight when it's achieved.
Aesthetics: The design elegantly balances out the Combo meter and fits in with the rest of the HUD unification pass.

Sonic Batarang

The animatic proposal attempts to neutralize these problems with a player centric UX/UI.

Reducing Friction: The player should have a streamlined interaction with Tapping (A) to cycle between all 3 Batarangs. This eliminates friction of the Hold interaction.
Immersion: The player should be allowed to equip the Sonic Batarang even if it's in cooldown. If they throw it? It's a regular Single Batarang. This will preserve immersion.
Focus: The Sonic Batarang reticle will show the cooldown instead of the button prompt. This keeps the players eyes forward on the action where it belongs.
Visual Noise: The Hold inconsistency is eliminated from the now reduced button prompt. This prevents banner blindness of seeing prompts and ignoring to them.

UI Dual Visuals

Desperate help was needed to establish a second visual style as a thematic counterweight to the slick and clean WayneTech UI. The “Matches” dual visual was designed as dirty and tattered to fit a prison processed feel. When I took over only two pieces of the Matches UI were completed, but by the end of the project I re-created all Matches UI and in some cases both dual visuals.

Combo Counter

The UI technical designer on the team approached me to redo the existing Arkham City-style floating Combat Counter numbers as they'd been untouched for over 4 years. For Batman, I designed the Combo Counter as part of HUD that would pop in and out and appear less arcade-y than previous Arkham titles. The design for Matches leans into the established visual design by using small to large splatters to indicate the player’s Combo is getting higher.

Credit: Eric Will (Batman HUD & Flame Concepts)

WayneTech UI

After the Matches UI was complete, I started searching for opportunities to assist with the WayneTech UI and improve the overall quality. Below are my efforts to solve problems and polish the game at the same time.

Cowl Subsystems

One of the biggest concerns with the Cowl (aka HUD) is that it didn’t visually feel part of the WayneTech family. After a thorough investigation, I built a new HUD master Photoshop file to understand how all the pieces fit together onscreen. Then I “remixed” existing designs to make a cohesive look while also systematizing missing and new Cowl subsystems as well.

Below is the list of Cowl subsystems unified with the new visual design:

Hostiles Detected
Comms Link
Local Surveillance
Achievement Toasts
Reward Toast
Tooltips
XP Bar
Enemy Status
VIP Enemy Status
Explosive Gel
Analysis
Investigation Casefile
Challenge Score Toast

Credit: Eric Will (Batman HUD and WayneTech gak)

HUD Bootup

This micro animation will be part of a bigger HUD bootup sequence when the player first dons Batman's cowl. Much of the gak used in this design is being pulled from the WayneTech biometric scanner.

Simple animated GIFs were provided for direction

Fictional UI

There were a handful of in-world interactable FUI that needed to be designed. For the WayneTech and Tyger scanners, I expanded the existing UI visual design to include these new additions and for payphone and security keypad the proposed unique UI to match the props instead of a generic one.