Chivalry II Weapon Cosmetics Menu
Role
UX Designer
Duration
2 weeks
Area
Games
Tools
Figma, Photoshop

This is a practice project that I’m doing for my own development as a designer. I’m using Chivalry II as source material because I love the game and I want to contribute to the discussion around its updates and improvement. I have no connection to Torn Banner Studios.

Project overview
What is Chivalry II?

Chivalry II is a medieval-themed hack and slash online multiplayer video game known for blurring the lines between epic and goofy. It’s a uniquely theatrical experience for the player, and it’s downright fun. The gameplay centers around huge 64-player matches where two opposing teams — the Agatha Knights and the Mason Order, duke it out on the battlefield over a set of objectives. Since its release, the game’s enjoyed excellent reviews from critics and players alike and was recently awarded PC Gamer’s Best Multiplayer 2022 award.

Why the Redesign?

This is a concept for a jredesign of Chivalry II’s weapon cosmetics menu — a game state that allows players to view, choose and purchase cosmetics for their in-game weapons. 👺⚔️👾 The redesign was inspired by a Reddit post I made asking the r/Chivalry2 community how they felt about the game’s menus. From the discussion that ensued, I gathered that players had some common pain points associated with the customization game state. Something that stuck out to me from the thread:

This is a pain point I share; currently, when the player selects a cosmetic for a particular weapon, it will carry over to each subclass. Subclasses, in the world of Chivalry, are playable variations of a type (or class) of virtual character. When players customize their virtual characters, they’re not only drawing from their own goals for inspiration, but also from that of the virtual characters. James Paul Gee’s discusses this with his theory on projective stance. Each subclass has its own potential to have a unique personality for the player to instantiate in the game, so I think the game would benefit from giving players the ability to customize each one directly. Another common complaint I see posted by others on the r/Chivalry2 subreddit is that there’s no way to view weapon or class stats and attributes in the main menu — the player needs to actually be in a match.

This is problematic because when you’re in a match, you’re playing online with others. Your team’s counting on you! So what better place to incorporate this feature in the game menu’s information architecture than in the weapon customization menu? In addition to addressing these feature requests, I also wanted to explore tweaking the UI to be a bit more intuitive.

You’re not stupid, u/Mnemosense.

The list of weapon-type buttons featured in its current state looks like an accordion menu to me but doesn’t behave like one. On click, all other options will be hidden. Navigating back to the list is a pain because the only way to do so is to target the tiny back button in the lower-left corner. Some consideration of Fitss’s Law might help us here. Also, for being a game state where the player picks cosmetics for their character, there’s a surprising lack of visual preview in the menus. These are just a couple of examples of potential issues that may be contributing to the confusion.

Here’s the game’s weapon customization menu in its current state:

The challenge

  1. Improve the general player experience and navigability
  2. Allow players the ability to customize specific subclasses
  3. Add functionality for viewing weapon and character class stats

My solution

Player experience and navigability

The accordion menus of yore have been replaced with containers for each weapon category — Primary, Secondary, and Tools — and icons within each container which represent the weapon type with a generalized silhouette. The design borrows heavily from what already exists as a weapon selection menu when the player is in a match. This was done on purpose to keep the new UI consistent with the mental model that’s already been established in the player. Clicking on the weapon type will display the cosmetics available for it. In place of the text-based menu system, each cosmetic card will contain an image of the weapon, the weapon’s name, and scarcity level. Having the image of the weapon included with this other information allows players to browse and contemplate at a glance.

Functionality for viewing weapon and class stats

A hover state for the weapon-type selection buttons reveals information about the weapon type's stats and attributes. With this, players will be able to compare different weapons on their own time, outside of a match. As cosmetics cost either earned tokens or bought digital currency, it’s advantageous for players to be able to have a clear idea of which weapon types they want to invest their time or money into.

Customization of subclasses

Buttons with text accompanied icons representing each subclass have been added to the lower-right side of the screen. The buttons reveal information about each of the subclasses’ stats and attributes on hover and change the selected subclass for customization on click. Maybe the player is envisioning a leather-clad Viking aesthetic for their Raider subclass, but they want their Ambusher subclass to look more like a ninja — that’s now possible.

Testing

To gauge how this design might be received by players of the game, I created a follow-up post on Reddit asking for critique. I also asked that they fill out a questionnaire that asked the participants which system they use to play the game, how they felt about the current state of Chivalry II’s weapon cosmetics menu.

Eight participants responded and reactions were mostly positive, but the most glaring issue seemed to be the lack of hierarchy intuited by the weapon cosmetic cards. This was caused by a couple of issues in the design.

  1. Despite the measures I had taken to ensure that all the information from the menu’s current state had a new home, I forgot to include the weapon cosmetic categories and their scarcity. This was easily amended with the addition of subtitles in the weapons cosmetics container and another line of test displaying the weapon cosmetic’s scarcity level.
  2. I had included weapon cosmetic cards under a weapon-type that had no business being there. I had a limited number of weapon assets, and I wanted to create the illusion of variety and realism by including as many distinct cosmetics, regardless of whether they fit under the weapon-type.

Reflection
  1. It’s more important to be clear than pretty when prototyping a design. In my testing, I confused some of the participants because the assets I used didn’t exactly match their cognitive model for what should exist in the game.
  2. Work from the existing design system as often as possible. Borrowing from designs that already exist elsewhere in the game helped reduce cognitive friction that players may have felt from introducing an this rather large overhaul. As made evident from the user testing, players were able to easily transpose the flow they’ve already learned from the in-game weapon cosmetic menu