UpperCut!
UpperCut! is a turn-based fighting game where players use cards to simulate attacks, blocks, grabs, and movements to outwit their opponents.
Role: UX Owner/Producer
Client: GENUN Games
Platform: PC, Mobile
// Responsibilities
In my role as the UX owner and interim UX Designer, I oversee the comprehensive design of the match UI system. The primary objective is to facilitate the player's comprehension of available actions within each turn. Turns are segmented into frames, during which players determine their desired action by strategically placing their cards. Upon submission of both players' turns, the game transitions into an animated cinematic scene, akin to a fighting game simulation.
Mock Ups & Prototypes
We draw inspiration from classic fighting games like Street Fighter and Mortal Kombat, reflecting their iconic style in our layout. Our fighters stand on a straight platform, flanked by health bar HUDs positioned in the top corners. By incorporating elements familiar to players of these beloved games, we aim to enhance understanding and immersion in our game.
Development Exploration
Play Area Size Exploration
In our visual experimentation, we carefully considered the weight of the play area. Our aim was to find a sweet spot: providing sufficient space for gameplay elements without overwhelming the screen. UpperCut, being a card game, necessitates the display of more information compared to a typical fighting game. However, it's crucial not to dominate the screen, as the ultimate payoff lies in witnessing the animated characters engage in combat.
Card Type/Radial Menu for Queue Slots
Each player's actions are symbolized by cards, designed for easy comprehension. To achieve this, we employ a variety of colors and shapes, distinguishing between different card types. This visual differentiation enhances clarity, helping players quickly grasp the nature of each card in their hand.
Given that each frame slot can accommodate four different types of actions, we embarked on designing a radial menu to assist players in organizing their sequence effectively. This intuitive menu system enables players to easily navigate and select from the available actions, streamlining their decision-making process during gameplay.
Final Design
In our final design, which we unveiled at PAX West, we opted to break up the play area into distinct sections to evoke a sense of spaciousness within the game. Rather than clustering everything together, we allowed the background to shine through, lending a lighter visual touch. Notably, in addition to viewing your own hand at the bottom, players can also observe their opponent's hand at the top. This strategic addition enables players to discern the type and quantity of cards their opponent holds, informing their own gameplay decisions accordingly.
Recognizing that once both players have submitted their turn, the majority of the UI becomes redundant, we implemented a feature to remove the UI and zoom into the fight scene. This deliberate choice enhances the cinematic experience, delivering a more gratifying gameplay immersion.