I worked as the UX/UI Designer on this 6-month project to rework the entire interface. My duties included:
There were significant constraints on this project from the start: We had 6 months to get this done, but were using an existing codebase and art (Menace From the Deep), and we did not have the time or manpower to make significant alterations to the UX flow.
I designed comic-themed UI art to match the characters and environments, created new icons and decorative elements, and drew item art for relics, consumables and other collectibles.
In terms of the UX/UI layout and design, I completely redesigned the cards, refined the battle screen, reworked the 'Travel' screen, redesigned the Hub area, but otherwise focused on improvements and refinements to the existing design.
As the most important element of the game, nailing this design was essential. This was a heavily iterative process. The original draft in Menace from the Deep is small, cramped, and difficult to read in smaller resolutions, and the information is presented in a way that feels counter-intuitive to the player. I made the following changes in regards to card design:
• Increased card size to provide more padding for content and additional space for text, matching the approximate size used in other popular games in this genre.
• Removed the pointless 'type' text pillbox in place of an easily read icon in the top right.
• Increased font size from 18-20px to 24-36px to improve readability for accessibility and smaller resolutions.
• Reduced cognitive load by showing fewer text colors.
• Matched a victorian-steampunk feel, with comic influence.
• Improved visuals by providing additional space for artwork.
(left) Original Menace from the Deep card. (center) The first iteration for Hunters Moon cards. (right) The final card iteration.
Final cards for each tier, and Cursed cards.
There were usability concerns and stylistic choices in Menace from the Deep that had to be rectified to suit Hunter's Moon. I focused on trimming any excess visuals - anything unnecessary was removed from view and instead placed in tooltips, tutorials or menus.
I placed character stats, items and modifiers on the top left, and consumables and abilities requiring a keypress on the lower left near the Energy display. Cards occupy the bottom center, fanning out across the display, and the Discard, Draw and Exhaust piles were set around the Turn button. The top right of the screen held any acquired resource totals, and the settings menu button.
The revamped battlescreen.
Players spend a lot of time in the hub screen, so I wanted to be certain it was intuitive to use, and easily understood. I placed buttons for each respective section over the relevant position on the HUD, and unified these screens in terms of design space.
The revamped Hub area.
The Dossiers 'Deck' screen.
The Dossiers 'Talent' screen.
The Start Mission 'Select Agent' screen.
The Start Mission 'Select Mission' screen.
Icon designs
Item art