BATMAN™: ARKHAM UNDERWORLD - PROCESS
I worked on both UI and UX for Batman: Arkham Underworld. Here's an overview of my process for a feature called the Isotope Chamber, which was part of the Wayne Tech event. There's also some background info on the character ability icons I worked on.
USER EXPERIENCE: Wayne Tech User Flow
After meeting with design, art, and production to review this feature a couple of times, I outlined a user flow to capture the core loop. Most of our UI building blocks were already made at this point in development, so I used these existing assets to quickly provide an accurate picture of screens, widgets, etc. And while I like to keep early documents in grayscale so it's easier to focus on the UX, I use color when that's a critical piece of information for players. This flow was iterated on after feedback from other disciplines on the team.
USER EXPERIENCE: Isotope Chamber Design
I explored a lot of layout options for the Isotope Chamber because it's a complicated interface with a lot of information. We ultimately went with a top-down, centered layout (bottom right). I like the affordances of this composition because it feels familiar: putting ingredients in to some sort of mixer and seeing the end product come out at the bottom. On the art side, my art director and I wanted the machine itself to have tubes, to really sell the idea that your isotope resources are being funneled into a container.
FINAL VISUAL DESIGN: Isotope Chamber UI Art
The game's UI has a green tint to evoke the villains of Gotham, but this special feature was coded blue to represent Wayne Tech and Batman. I created the art for all the interface elements like panels, buttons, tabs, type, isotope icons, etc. For the 3D rendered assets, I took a polish pass on renders provided by my art director. These high-res assets needed a lot of cleanup to be legible on mobile—paintover work, drop shadows, rim lights, removal of unnecessary details, etc. I also had to cut up and paint over the machine itself to make it work for our layout. After exporting the assets into atlases in Unity and working with a scripter to set everything up, I added animations like rotating light effects, a bouncing chest, and transition animations for panels and notifications that appear.
FINAL VISUAL DESIGN: Supervillain Ability Icons
My art director and I collaborated closely to create these ability icons (and other assets in game). In some cases, like the Riddler's question mark cane icon, I painted over a render he passed to me: adding lightning effects, increasing the contrast between lit planes and unlit planes, adding outer glows and shadows to enhance the overall silhouette value, and making different selection states. For other icons, like Bane's charge, I played around with the Maya character file to get a good pose and render and then took a 2D pass on it. And for Harley's backflip, I painted the icon from scratch.
This 3D to 2D pipeline was used in a lot of assets in the game: from character renders and icons to backgrounds and cut scene motion graphics. We wanted the game to feel mature and realistic like the Arkham console games. But we still had a lot of visual processing and optimizing to do to ensure these were clear and punchy on small screens—otherwise, things like icons would appear a bit gray, noisy, overly detailed, and generally unclear.
