Player experience and Game UI of Curse of the Corsair - Action RPG

Peter Yoo
7 min readOct 17, 2023

--

Background

Curse of the Corsair is a top-down action role-playing game (RPG) developed by WolverineSoft. Drawing inspiration from the game “Hyper Light Drifter,” our project aimed to craft an exploratory world where players advance through three distinct levels, ultimately leading to a final boss fight. Each level presents unique challenges, which we designed through a combination of enemy, puzzles, and level design.

My Role

I was brought in to shape the player experience by crafting the user interface, including the heads-up display, to improve the onboarding process and facilitate player-game interaction. In a cross-functional team of seven, consisting of artists, designers, producers, and engineers, I led the UX development process while also assuming responsibilities for Unity implementation

Game UI Screens I Worked On

Research

Hyper Light Drifter, a top-down action role-playing game, is renowned for its emphasis on open-world exploration and skill-based combat. Our game drew significant inspiration from it, focusing on robust combat mechanics and exploration.

Gameplay of Our Model Hyper Light Drifter

Following this, I conducted a primary and secondary research to better understand how other games approached their Heads-Up Display (HUD) design, incorporating insights from user interviews.

Through these research methods, I identified user requirements and established design objectives for Curse of the Corsair. This process also helped delineate the platform’s functional prerequisites and limitations. Here are some outcomes from the research.

Observation & User Needs

Initially, I played the game to grasp its mechanics, world-building, gameplay, and overall experience. I also had my teammates play the game and asked them about their experiences.

  1. How would you rate your overall experience with Hyper Light Drifter on a scale from 1 (terrible) to 5 (excellent)?
  2. What do you enjoy most about Hyper Light Drifter? (Please describe specific features, aspects, or moments.)
  3. What aspects of Hyper Light Drifter do you think could be improved?

After discussing with six teammates, we arrived at an overall rating of 4.3 out of 5. This informal survey revealed key points of appeal, which include:

  • Players liked the glamorous art style
  • Incrementally challenging gameplay was appealing
  • Non-linear progression made the game feel more adaptive

However, some of the pain point that I was able to discover were:

  • UI’s not having any visual indicators
  • No enemy health Bar

Based on our understanding of user cognitive load, the goal for me as a UX designer was to use tutorials, progressive difficulty levels, and clear user interfaces to manage and optimize cognitive load, ensuring players can enjoy the game without excessive mental strain.

Games I Analyzed

I conducted research to understand how other games addressed the issue, utilizing competitive analysis and playtesting to gather data on gamers’ behavior

Many of these games successfully conveyed player information in unique and intuitive ways, achieved through a variety of visible and invisible methods. Some of these included visible means such as HUD, enemy health bar, interaction UI and invisible means such as tutorials, sound, and directions.

Functionality Requirements

  • Unobstructed Gameplay Experience: None of these (HUD, customization UI, menu etc.) should get in the view of the players gaming.
  • External Communication: Additional ways to communicate the players regarding certain status or information should be easy to understand.
  • Customization: Players want to feel unique and have control over their gameplay experience, making each gameplay to be adaptive.

Principles

  • Player health bar and enemy health bar should be easily distinguishable
  • Players should not wait for things to happen
  • There should be color constancy (if player ammo bar is purple, the gunshot should be purple as well)

Overarching Goal

After the research and analysis, the overarching goal that I had for this game was:

How can we incorporate both visible and invisible UI and complement each other?

Heads up Display

After discussing with the other video game designer, there were three pieces of player status information that I needed to design:

*Dash is When Player Moves Forward Swiftly.

I explored multiple designs for the heads-up display by starting with some basic research:

Some of the References for the Health Bar

Health (HP) was typically represented in red, while mana points (MP) were displayed in blue.

That said, the initial idea was to use blue for ammo to facilitate intuitive onboarding for players.

Wireframing

However, our art team chose to make the gunshot effect purple, and as a result, for visual consistency, we decided to use purple for the ammo status.

Afterward, we opted to use blue to represent the dash ability. This choice was driven by the art team’s desire to incorporate a blue tint when the player dashes.

Final Design for the HUD

That said, the next question revolved around the organization hierarchy. Given the natural reading pattern from top to bottom, it was clear to position the health bar at the top. As for the second slot, we chose to place the dash because it was the second most frequently used game mechanic, ahead of the ammo display.

Enemy Health Bar

Unlike Hyper Light Drifter, our game’s relatively short duration required us to provide players with information about the enemy’s health status to aid in strategic decision-making.

The Player and Enemy HUD Design

As I mentioned earlier, it was essential for the enemy HUD and player HUD to be distinguishable while conveying a sense of danger. Therefore, we opted for red, a color that signifies danger.

Tutorials

Tutorials were crucial for player onboarding, but I didn’t want them to be dull. It may sound obvious, but I learned from playtesting and a literature review that players have little patience for waiting.

The Level Design of Our Tutorial

I collaborated with the level designers to ensure that the game’s pacing remained engaging, which hinged on players’ understanding of the mechanics. This entailed crafting captivating gameplay while also informing players about their tools and capabilities.

Each section was divided to focus on specific information, such as health, interactable items, and ammo, with the goal of preventing information overload. Consequently, I developed the tutorial sequentially following guidelines discussed with the level designer.

Interactive Objects

One of the primary ways players interacted with the world was through object interaction. This took multiple forms, including pressing buttons to access different rooms. In our initial design, we intended to transfer the player to a different level immediately upon clicking the ‘enter’ button, but the transition felt too abrupt.

So I fixed it.

I used Unity to create a slider element and programmed it in C# (with a little help from ChatGPT) to generate the sliding effect when interacted with.

Try the Game through this link.

Beyond Design

  • Figma Asset Management: Noticed that many past game assets, both used and unused, could expedite the design process, so I created asset management documentation
  • Documenting Design System: Found design inconsistencies and communication issues, prompting the creation of a cohesive design system documented on Confluence

Future Consideration

  • Expanding the Audience: While our game underwent extensive playtesting with experienced gamers during most sessions, additional research is required to assess how easily individuals who are not avid gamers can comprehend the game’s user interface.
  • Balancing Technical and UI Elements: Engineers integrated numerous UI components into the later stages of development, creating opportunities to fine-tune the equilibrium between the user interface and technical implementation.
  • Scope Definition: Another crucial skill I acquired was the ability to dissect the broader context and delineate the scope of the features and systems I was responsible for designing.
  • Enhanced Communication: Lastly, I gained proficiency in conveying not just technical elements but also aesthetic and creative aspects, and in effectively coordinating with developers and higher-ups.

Thanks for reading!

More of my work at peter-yoo.com

--

--

Peter Yoo

Designer. Artist. Solving problems through creating. More of my work at peter-yoo.com