Personal Project
User Experience Design, Game Design
Figma / Photoshop / Miro
2 weeks
This project is based on "Dishonored 2", and redesign its bonecharms system, because the bonecharms system is not the core gameplay in the game. To make the game a free-to-play mobile game, the designer added the bonecharms set system and build traits filter to help players develop bonecharms assembly strategies.
Team
Elements
Tools
Duration
About
01
Overview
Figma File:
02
About Game
About Dishornor2
"Dishornored 2" is a single-player game with stealthing as the core gameplay, players need to observe the terrain and the enemy's route of movement to reach a certain location and complete a certain objective.
There are different ways to accomplish the objective, including: using skills, killing enemies directly, sneaking and then strangling them from behind, using terrain to avoid enemies, or running fast to reach the destination. Therefore, players have two core parameters: health for fight and magic for skills.
Using skill will consume magic value
About Bonecharms System
The core equipment of "Dishornored 2" is the Bonecharms, which is divided into nine categories: Power / Water / Movement/ Restore / Weapons / Defense / Combat / Enemy / Swarm.
Assembling the bonecharms can provide players with bonuses in the above nine categories, such as a water bonecharm allows players to drink water to restore magic value.
Bonecharms are obtained from the game and usually have only one class feature. Players can sacrifice bonecharms to obtain features, or consume features to synthesize bonecharms with multiple features.
In addition to bonecharms, equipment includes whalebones and runes. Whalebone is a necessary material needed to synthesize amulets; runes are required to synthesize superpowers.
All bonecharms type
Craft bonecharms
03
System Analysis
Current equipment system player experience
Redesign Insights
01
The presence of the system is weak
Due to the nature of the "Dishonored 2" as single-player PC game, and the core gameplay is stealth & super power.
The operation of the equipment system now is simple and linear, players' actions in the game can be simplified as:
Discover Bonecharms -> View Bonecharms -> (Upgrade and synthesize new Bonecharms) -> Equip new Bonecharms
Players do not change the bonecharms when they enter new level.
If we make "Dishonored 2" to a free-to-play mobile game, it could be developed as a continuously updated level-based game. Equipment system could be one of the most important gameplay. For different environments (e.g. One of the levels can be mainly water environments such as rivers, oceans, etc.), and different level objectives (speed pass, kill enemies, etc.), players need to adjust the bonecharms assembly at the beginning of each level.
In addition, Bonecharms can be turned into in-game spending features, including purchasing tokens, unlocking equipment vacancies, etc. It can also increase community activity by supporting "set codes" and encouraging players to share theirs with the community and discuss the strategies involved.
Solution: Adding Bonecharms Set System
02
Mobile Operation Adaptation
Interaction in "Dishonored 2" relies on mouse movement, scroll wheel, esc. For example, the player hovers to see the requirements for crafting an Bonecharms.
These actions need to be translated into mobile-adapted click actions.
03
Uncategorized and confusing
"Dishonored 2" has no classification filter system for bonecharms replacement and sacrification. If it become a long-running game, the number of bonecharms will be greatly increased. Having a sorting system will help players clarify their equipment strategy.
04
Lack of feedback
When sacrificing bonecharms/ getting whalebones and runes in game, there is no feedback and no portal to help players jump quickly or understand what the equipment does.
Setting up a jump hud can alleviate players' sense of confusion.
04
Final Work
Equipment system entrance:
Before the level starts, players will wake up on a friend army ship to open their notes, accept the mission, bring up the main menu, learn about the mission and adjust their equipment before entering the level.
Display the current Bonecharms set name & each bonecharm
Set preview status: Equipped / Locked / Unedited
Set traits displayment
Set code input pop-up window
Different states,
different info.
Each set preview shows up to nine traits.
Display logic: Trait name (number of traits the set has)
Since the boncharms in "Dishonored 2" is expressed in statements and there is no numerical system, it is more effective to help players quickly understand the performance characteristics of the set through the trait categories in the preview stage.
Set details
-
When jumping to the set details interface, the interface is hovered in the center of the dial by default, and the form on the right side displays the specific boncharms statements. The order of arrangement is from largest to smallest by the number of features.
-
The set name can be renamed by clicking on it on the right side.
Same traits overlay displayment
Unedited: Right interface status
Traits description can be clicked
When the player clicks on the corresponding feature statement, the boncharms with that feature will blink. If there are multiple amulets that all have the same feature, multiple amulets will blink at the same time.
Boncharms' circle flashing effect
Click on one of the bonecharm
When you click on a bonecharm, the center of the dial is darkened and the selected bonecharm is highlighted. The form on the right side shows the features the amulet has and can be changed by clicking the "Switch" button
Filter pop-up
-
Trait filtering has three states: selected / Unselected / Not Hold
-
Players can select up to four traits at once, as a bonecharm can have up to four traits.
-
Special boncharms and trait filtering are mutually exclusive.
Special boncharms are boncharms with strong bonuses that cannot be classified as traits.
Confirm modification pop-up
Locked Bonecharms
-
Players can click on the end of the bar to lock / unlock the bonecharms.
Locked bonecharmscannot be sacrificed and cannot be replaced.
Tokens consumption displayment logic
When the player does not have enough tokens, the number is set to red.
For example: 1324/1123
Sacrifice & Crafting Module Status: Unlocked / Selected & Unlocked / Locked / Selected & Locked
Go to Production Button Status: Go to Production / Conditions Not Met
When the player selects an unlocked module, the button status is unmet condition.
The right side shows the missing resources and the way to get them.
The crafting interface follows the original game interface
Confirmation of sacrifice
Click to bring up the confirmation pop-up window.
Feedback:
After a successful sacrifice, the right side shows hud
Feedback:
After crafting,
the right side shows hud.
05
Further Dev
After I showed my works to other Game UX designers and my UX teachers, I got these feedback:
-
Add value system to bonecharms
Although classifying it with features can help players make assembly decisions, the statement descriptions are still vague and the use of number values allows in-depth players to specify more detailed strategies.
-
If move the game to mobile platform, make all the buttons around the screen, which makes players easy to click. (Already update)
In the first version of this project, I put the main interface and the hud for making runes at the top, which is not conducive to players on the mobile phone. In the current version, all buttons are placed to the lower left and right side of the interface.