top of page
logo

RAWR: Monster RPG Core UX & Navigation Redesign

Context & Problem

RAWR: Monster RPG is a mobile monster-collecting RPG with a focus on party building and repeatable hunts.

As the game grew, new systems were added into an already busy interface. Core actions like managing monsters, upgrading gear, and accessing the shop were spread across multiple screens. Players had to dig through nested menus, and the UI didn’t adapt well to modern notched devices.

This created friction in early sessions and made it harder for new players to understand where to go next.

Goals

Player goals
Design goals
Success target
  • Make it obvious where to go to manage monsters and upgrades.
  • Reduce the number of taps to reach common actions.
  • Keep the playful, character-driven feel of the game.
  • Redesign core UI/UX flows for party and monster management.
  • Reduce navigation friction across the main loop.
  • Introduce a dedicated shop tab without overwhelming the bottom nav.
  • Reposition HUD elements to work cleanly across notched mobile devices.
  • Add a quick-access dropdown for secondary systems and features.
  • Increase player retention by improving onboarding clarity.
  • Reduce friction through clearer, more intuitive system communication.
  • Creates an environment where players are less reliant on explicit instructions.

Main Navigation & HUD

image_2026-05-20_231456207.png
Before
After

  • Core actions like party management and upgrades were split across multiple screens.

  • The main menu relied on text labels and smaller hit areas.

  • HUD placement didn’t account for notches and safe areas, reducing readability.

  • Consolidated monster and upgrade flows into clear, labeled tabs.

  • Introduced a bottom navigation pattern with large, character-driven icons.

  • Repositioned HUD elements to respect safe areas on modern devices.

  • Added a quick-access dropdown for secondary systems so the main nav stays focused.

Combat Stage HUD & Controls

image_2026-05-20_232255559.png
Before
After
  • Stage name visibility was inconsistent during combat.
  • Auto-play and exit actions were not grouped or easy to reach.
  • Key controls sat close to potential notch areas and less ergonomic touch zones.
  • Ensured the stage name is always visible during combat for better orientation.
  • Added a quick-access button for automatic gameplay and a clear dropdown for exiting the stage (and future planned features).
  • Repositioned the layout below potential notch areas and into a more ergonomic touch zone for improved mobile usability.
  • Implemented a dynamic movement joystick that appears on touch within a set region to reduce UI clutter and improve control.

Improved Stage Clear UX

image_2026-05-20_231851199.png
Before
After
  • Reward items and quantities were hard to scan at a glance.
  • Monster selection state wasn’t clearly differentiated from unselected monsters.
  • Rewards tied to a secondary system were hidden in the general reward list, making their impact unclear.
  • Increased visual contrast and spacing for rewards and quantities to improve quick readability.
  • Added distinct visual highlighting for selected monsters so their state is obvious.
  • Introduced a dedicated reward progression bar to surface rewards tied to a secondary system and show long-term progress.
bottom of page