Chivalry II

Disclaimer:

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.

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?

If you don’t feel like reading all this, the ‘Goals’ section of this article sums it up simply.

This is a conceptual redesign 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 in its current state:

Something has to be done!

Challenge:

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

Process

Content Audit & Ideation

My process began with grabbing screen captures of the weapon customization menu from Chivalry II, as well as from Chivalry: Medieval Warfare. Chivalry: Medieval Warfare was the first installment in the Chivalry series. I wanted to keep it as a reference to make sure I was well informed in regard to the game’s design lineage.

These went into Figma for annotation so I could begin throwing around some initial ideas for the redesign. I also used the screen captures of the game’s current state to do a content audit to make sure that every bit of information went into the new designs.

Wireframing

From the ideation stage of my process, I became fairly certain that borrowing from the in-game weapon selection menu was the right way to go because I saw how that design could easily facilitate the additional information I needed to incorporate, and as stated before, it would be less jarring if recycling it meant it would also be recycling the player’s mental model of the UI.

Collecting assets and building components

Once I had a layout and a plan that I was happy with, I began scraping the web for assets that I could use for my design. Originally, I had planned to redo multiple game states, so I ended up with more assets than I needed for the weapon customization menu.

Creating the components and variant animations was one of the more time-consuming tasks. I wanted the prototype for the redesign to feel like the real game for user-testing to help eliminate bias.

High-fidelity & Iteration

Once I had a screen I was comfortable showing off, I sent it off to members of the Chivalry community with who I’m acquaintance with, along with a short blurb, to help them orient themselves with the new design. I decided on a convenience sampling approach here because I wanted to generate critique quickly, and because I wanted to knew that, after I received it I could reliably follow up with questions for further explanation.

Here’s how the design looked when I initially sent it out:

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.

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.
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.

Lesson learned:

It’s more important to be clear than pretty. I changed the final prototype to only include the sword asset in order to help discourage any judgment of hierarchy, or scarcity, by how the weapon looks in the prototype.

Solution

Skip the words and Jump right into the prototype!

Re: 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.

Re: 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.

Re: 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.

User-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 menu (Love it || Hate it; on a scale of 1 to 5), if they felt my prototype was an improvement (Yes || No; on a scale of 1 to 5), and I gave them the opportunity to elaborate if they wish. The survey was completed by 8 participants.

The results are as follows:

100% of the participants used a PC to play Chivalry II
75% of the participants gave Chivalry II’s current menu a 2 out of 5; 25% gave it a 3 out of 5
100% of the participants gave the redesign a 5 out of 5

Reflection

Throughout the project, I tried to think hard about what the player response would be if this change were to actually happen. People are opinionated about Chivalry II, in part, because its genre sits in such a niche category, and so there aren’t many alternatives. I’m happy that I chose to work mostly with assets that already existed. Borrowing from designs that already exist elsewhere in the game helped reduce cognitive friction that players may have felt from introducing an overhaul — such as what I propose here — and, as made evident from the user testing, players were able to easily transpose the flow they’ve already learned from the in-game weapon selection menu — mission accomplished!