UX/UI Game Design Analysis & Redesign
This project is a comprehensive study of the UX/UI game design done in conjunction with ELVTR UX/UI for Gaming course with Ivy Sang. It features an analysis of Minecraft Dungeons and the process in implementing changes, including a redesign in the style of Super Mario.
ROLE: UX/UI DESIGNER
LENGTH:
-
8 weeks
RESPONSIBILITIES:
-
Conducting game design studies
-
Leading usability tests
-
Producing and iterating wireframes and UI mockups for the game redesign
CHALLENGES:
-
Evaluating game mechanics through a game designer's perspective
-
Devising improvements through usability tests, analysis, and wireframe and UI mockup iterations
-
Learning best UX/UI design practices to help shape my own design process.
WORK PROCESS
Player
Journey
Paper Protype
Flowchart
Wireframes
Usability
Tests
UI
Mockups
Accessibility Analysis (Color Blindness
PLAYER JOURNEY - MINECRAFT DUNGEONS
I analyzed the end-to-end player experience of Minecraft Dungeons to get a better understanding of the game. This analysis helps find potential opportunities for improvement and gaps between the game developer's intentions and a player's expectations.
Legend
Game Dev Intentions
Player Experience
Opportunities for Improvements
What do players want to and/or should do?
Players want to play the game.
-
Players understand their current game objective.
-
Players know where they are in the map and how to proceed.
-
Players know who the enemies are and how to defeat them.
-
Players know how to complete objectives.
Game Dev Intentions (Options & Rules)
-
Players can choose the location they want to play on a world map.
-
Players can choose various difficulties to play. More difficult locations can provide 5 rewards. Less difficult locations can only provide 2 rewards.
-
Players know their current power to better decide the location they want to play.
-
Players know they have arrived in the location they selected.
-
Players know how to manage their inventory (Gear & Weapon).
-
Players know how to pick up an item (Gear & Weapon).
-
Players know what item (Gear & Weapon) is better to use.
-
Players know how they fail (lose) and how to do it differently to win.
-
Players know they won.
-
Players know how they failed (lose) and how to do it differently to win.
What does player see? What does player hear?
-
Player sees an interactive map overview of the game’s world. Player also sees number of new missions and the default difficulty.
-
Player can see icons tied to the different areas of the map. The icons differentiate between completed and uncleared areas and selectable and locked areas.
-
Clicking a map icon shows the player an information window with the mission type; obtainable items; missing and player power levels; and the current difficulty level.
-
Player sees a difficulty slider and resulting changes in power levels and items when changing difficulties.
-
Player sees a story button that provides narrative details and a large start button.
-
Player hears background music.
-
Player hears SFX confirming UI actions.
-
Player sees a loading screen with a picture of the location and the text “traveling to” with the location’s name. A moving cube of images shows that the loading screen is working properly.
Player also sees the previously chosen difficulty level. -
After the traveling loading screen, player sees hero in game, the location’s name in the top right corner, and the current objective to signify player has arrived and can start the mission.
-
Player sees HUD and pointer.
-
Player sees that they can now move hero around.
-
Player hears background loading screen music. Player hears different ingame music when arriving in selected location.
-
Player sees mission objective in top right corner along with location name.
-
Player can toggle a map overlay to guide their way through the level. Overlay shows where player has been. Player also sees a golden icon that shows the direction of the mission objective at all times.
-
Player can see enemies and items. Enemies are outlined in red when targeted by the player. Purple circles signify where enemies will spawn. Items are outlined in white when targeted.
-
Player can see health and equipment HUD.
Player can hear background music that changes when challenges start. -
Player hears enemy sounds and various SFX confirming UI actions, such as collecting items, using items, attacking, moving, completing challenges, etc.
-
Player sees white outline on items when hovering over them.
-
Player sees small notification of items or weapons when picking them up. Gear icon will includes whether it is stronger or weaker than currently equipped gear.
-
Player can enter inventory window and see items, equipped and unequipped gear, enchantments, current level and power, currency, and description of currently selected gear/item with a salvage option.
-
Each icon has smaller icons denoting type of item or gear and power, including if weaker or stronger than current gear.
-
Inventory menu also includes categories for seeing only a certain type of item or gear.
-
A yellow dot and yellow earmark denotes newly acquired items and gear.
-
Player hears background music.
-
Player hears SFX confirming UI actions.
-
Player sees large “Victory” sign when mission is completed. Mission ending countdown initiates.
-
Player sees level summary screen showing damage done, current level of hero, percentage of chests opened, healing done, and any KOs.
-
Player opens chests obtained by completing level.
Player hears victory music, countdown SFX and SFX confirming UI actions. -
Player sees “Game Over” and red vignette denoting mission failure.
-
Player hears mission failure music and countdown SFX.
What does player think? What does player feel? What does player say?
-
Player realizes there are a lot of missions to complete. Player feels both excited and overwhelmed by the amount of content.
-
Player thinks about whether the rewards are worth changing the level’s difficulty for in consideration of their current level.
-
Player says increased difficulty will provide a more enjoyable challenge and better rewards but less of a laid-back experience.
-
Player wonders what the upcoming type of mission will be based on the loading screen information.
-
Player wonders if the mission will be longer and/or more difficult that previous missions.
-
Player feels excited about tackling the challenge of the mission.
-
Player also feels a bit impatient at having to wait for the mission to load.
-
Player enjoys completing small challenges such as defeating groups of enemies and acquiring rare items and equipment.
-
Player is excited to continuously level up and use better equipment and items while moving toward objective.
-
Player thinks the level is very large. Player feels like they have to have the map overlay on often in order to not get lost.
-
Player feels happy to see higher level gear to equip, but annoyed when having to constantly salvage lower level gear.
-
Player enjoys deciding how to upgrade new gear and is excited to try out new gear loadout.
-
Player is ecstatic that they completed the mission or frustrated at having failed.
-
Player looks forward to seeing what treasure they obtained.
-
Player is neutral about most statistics shown on the level summary screen.
-
Player feels frustrated that they were unable to find all the chests available but doesn’t know how many they missed.
Decision(s) the player makes
-
Player decides to select a secret mission and increase the difficulty level.
-
Player waits for the mission map to load and start.
-
Player decides to explore entire map and not go straight to the objective.
-
Player defeats all enemies and collects all chests they see.
-
Player decides to upgrade new equipment and salvage old equipment.
-
Player decides to continue onto the next mission instead of repeating the last mission. Player decides to forgo missing chests.
Why does the player select this option (make this decision)?
What does player want to do?
What is player trying to do or solve?
-
Player wants to have better rewards and more of a challenge.
-
Player is trying to level up faster and obtain better equipment.
-
Player chooses secret mission to complete optional level before continuing the story. Player also tries out secret mission first to see if it has different gameplay.
-
Player wants to start the mission as soon as possible. Since the cube of images in the bottom left corner is still moving, player knows the loading screen is working and that the game is not frozen. By waiting patiently, player can start level sooner.
-
Player wants to continue getting all possible chests available in the level. Player tries to maximize efficiency by exploring and completing the full level in one try.
-
Player wants to level up hero and get the best equipment as fast as possible.
-
Player wants to be stronger and fight enemies with ease. Player wants to see effects of new enhancements on weapons.
-
Player wants to keep inventory clean and organized by getting rid of items and gear that are not needed.
-
Player wants to continue on with the story instead of having to search every corner of a large level for missing chests.
-
Player is trying to enjoy new gameplay rather than feeling stubborn about having to perfect the last level.
Opportunities
AKA: Anything we can do to improve and help players to achieve what they want to do?
-
Can add a separate button next to the story button labeled “Enemies” to show type of enemies and number of bosses in level. Helps inform player of gear and difficulty level they should choose.
-
Can add number of chests in the level for players who want all items available.
-
Can add a loading bar to show player how much there is left to load.
-
Could add a small hero for player to move around on loading screen, or some other type of small player interaction.
-
Can add additional story or tips available during loading screen to give player something to look at or do while mission is loading.
-
Having a small minimap to toggle instead of a map overlay may help declutter the screen.
-
Map overlay or minimap could indicate where chests are when player is close by.
-
Map overlay should more clearly distinguish between explored and unexplored areas.
-
Have a salvage multiple gear and/or salvage all lower level gear options.
-
Have a separate sort button in the “all” items category.
-
Player can have a separate quest log that details how to fail mission and how to correct failure (if possible).
-
Show the number of chests found out of the total instead of a percentage.
-
Show number of bosses or challenges cleared out of the total number available.
-
When hovering over a statistic, have an informed popup stating how or why the statistic is important or interesting.
-
When mission fails, have tips on gear or tactics player can use to succeed next time.
PAPER PROTOTYPE
The paper prototype provided a holistic view of each screen in the game, including the actions a player can take. I included suggested actions on the relevant screens to see how they would potentially be implemented.
Legend
Passive Player Action
Active Player Action
Suggested Active Player Action
Suggested Passive Player Action
1. Introduction Cinematic
Backstory Narrative
-
An evil boss has occupied the world. Some brave villagers want to save the world by defeating the boss.
Watch Cinematic
Skip Cinematic
Pause Cinematic
2. Hero Selection
-
Players play as one of the villagers to save the world.
Select Hero
-
Players can choose & customize the look in the game.
Customize Hero
-
Go Straight to Home Screen
Exit Hero Selection
3. Home
Start Game
Select Online/Offline
Switch Hero
Accessibility Options
Settings
Exit Game
View World Map
Explore Camp Base
Buy Item (From NPC)
Go Back to Home
4. Camp
5. World Map & Mission Selection
-
Players can choose the location they want to play on a world map.
Choose Mission on World Map
-
Players can choose various difficulties to play. More difficult location can provide 5 rewards. Less difficult location can only provide 2 rewards.
-
Players know their current power to better decide the location they want to play.
Choose Difficulty
Read Story
-
Explore mission story lore
-
Review types of enemies in mission
Review Enemy List
-
Play Level
Start Mission
-
Exit World Map
Go Back
6. Mission Start
-
Players know they have arrived in the location they selected.
Watch Travel Loading Screen
7. Gameplay
-
Players understand their current game objective.
-
Players know how to complete (win).
View Mission Objective in Corner
-
Players know where they are in the map and how to proceed.
Toggle Map Overlay
-
Players know who is enemy and how to defeat them.
Highlight Enemy
Move
Melee Attack
Ranged Attack
Combat Roll
Throw/Use Item
-
Players know how to pick up an item (Gear & Weapon)
Pick Up Item
Open Chest
7. Gameplay - Inventory
-
Players know how to manage their inventory (Gear & Weapon).
-
Players know what item (Gear & Weapon) is better to use.
View Inventory
Equip Item
Salvage Item
Choose Upgrade
Upgrade Item
-
Exit Inventory & Return to Game
Go Back
View Victory Display
8a. Mission Results - Victory
-
Players know they won.
Review Mission Summary
9. Victory Rewards
-
Collect Reward
Open Chest
Equip Item
Salvage Item
-
Continue to Camp Base to Select Mission
Go Back to Camp
8b. Mission Results - Game Over
-
Players know how they fail (lose) and how to do it differently to win.
View Game Over Display
-
Review summary of mission so players can analyze how much they finished before failing.
Review Mission Summary
-
Return to Camp Base to Select Mission or Retry
Go Back to Camp
Retry Mission
The flowchart was created after the paper prototype to more fully realize the communication between the game features and how players’ behaviors affect the flow of the game. The flowchart below was created in Figma and can be found here.
FLOWCHART
WIREFRAMES & USABILITY TESTS
I created wireframes of the home, inventory, and two gameplay screens to design and visualize the information on each screen and do a deeper analysis on how each screen will clearly communicate information with the players. A partially interactive version of the wireframes below can be found here.​
Click arrows on the sides of image to scroll;
Click an image to zoom
After creating drafts of the wireframes, I conducted usability tests to see how the designs came across to different players.
Usability Test Planning
Research Objectives:
Determine whether players understand the non-interactive information presented on the screen.
-
Assess how they feel about the placement of the information.
Test whether players understand all interactive (blue) options on each screen.
-
Assess whether the placement of each interactive option can be improved.
​
Evaluate whether the designs as a whole are understandable and pleasing.
Research Logistics:
Recruitment - Target Audience:
-
20-50 years old
-
Female & Male
-
Play games on PC and/or a console
-
Is familiar with the action-adventure genre
Platform:
-
Figma Partially Static Wireframes
Task Design:
-
Talk through the 4 wireframes (Home Screen, 2 Gameplay Screens, and Inventory Screen).
-
Have the players identify the non-interactive and interactive options and define them. Ask whether each item’s placement makes sense.
-
Talk through the process of completing specified tasks on each screen.
Research Script:
Each Screen:
-
Talk through all of the options available to you on this screen.
-
How do you feel about the placement of the information and each option?
Home Screen:
Task 1: The onscreen character is different than the one you last played with.
-
How would you know this? How would you find your character?
Task 2: You’d like to make sure no one online joins your game.
-
How would you ensure this?
Gameplay Screens:
Task 1: You’re going to the mission objective.
-
Do you know what the objective is?
-
Are you able to locate where you are?
-
Do you have a map option preference?
-
Do you know if you’re going the right way?
Task 2: You’ve just completed a forward roll.
-
How do you know when you can do another one?
Task 3: You’ve taken some damage from an enemy.
-
How much damage have you taken? How would you replenish your health?
Inventory Screen:
Task 1: You’d like to see only your melee weapons.
-
How would you go about doing so?
Task 2: You’d like to get rid of items you don’t need.
-
What method would you take to do this?
Task 3: You already have a ranged weapon equipped.
-
How would you know that?
-
How would you change it to another weapon in your inventory?
Usability Test Sessions
Home Screen
Gameplay Screens
Inventory Screen
Usability Test Results
Home Screen:
All players were able to identify and talk through the interactive and non-interactive information on the screen.
Settings & Exit Buttons Feedback:
-
Player 1 felt that the placement of the buttons as is was natural.
-
Player 4 would prefer the exit/accessibility/settings buttons be kept together in the corner out of the way. Would actually prefer settings to be on the title screen rather than this home screen.
Hero’s Name Feedback:
-
Player 2 felt that it would be easier to notice the hero’s name if it was right above the “Switch Hero” button.
“Switch Mode” Feedback:
-
Players 3 and 4 were confused by the wording of “switch mode.” They thought it meant a different game mode rather than switching from online mode to offline mode.
Gameplay Screens:
All players were able to identify and talk through the interactive and non-interactive information on the screen.
Roll Timer Feedback:
-
Player 1 preferred the roll timer in the middle of the screen vs. on the side, but Player 4 would prefer health pop-ups to appear above the health bar in the middle of the screen. Player 4 felt that it was more important than the roll timer.
Map Feedback:
-
Player 3 say that the objective arrow marker should be on the minimap when in minimap mode. Objective arrow marker still makes sense when in overlay map mode.
-
Player 1 preferred the overlay map. Players 2 and 3 preferred having both options. Player 4 preferred the minimap (but said it should be a square to keep up with the aesthetics).
HUD Size Feedback:
-
Player 4 thought the HUD was too taking up too much real estate on the screen.
Inventory Screen:
All players were able to identify and talk through the interactive and non-interactive information on the screen.
General Feedback:
-
All players thought the inventory screen was well sectioned. Information from left to right was clear.
-
Player 4 would prefer additional actions such as “unequip” and “salvage” to be on the bottom right.
Weapon Enchantments Feedback:
-
Player 2 felt the enchantments bar should be closer to the equipment.
Iterated Wireframes
I implemented changes based on the results of the usability tests and drafted iterated wireframes that detail the changes made. A partially interactive version of the wireframes below can be found here.
Click arrows on the sides of image to scroll;
Click an image to zoom
The final task was to create UI mockups of the iterated wireframes, but using assets and a style guide from a different game — in this case Super Mario. The UI mockups were run through a color blindness simulator and edited based on the results of the simulations.
Click arrows on the sides of image to scroll;
Click an image to zoom
Color Blindness Simulation Tests
Red-Weak/Protanomaly
Green-Weak/Deuteranomaly
Blue-Weak/Tritanomaly
Monochromacy/Achromatopsia
Red-Blind/Protanopia
Green-Blind/Deuteranopia
Blue-Blind/Tritanopia
Blue Cone Monochromacy
Iterated UI Mockups
Click arrows on the sides of image to scroll;
Click an image to zoom
UI MOCKUPS & ACCESSIBILITY TESTS
OUTCOMES & CONCLUSION
OUTCOMES
Gained in-depth insight on the UX/UI game design process, including how to analyze designs and incorporate changes.
-
Added design suggestions based on user feedback and personal insight
-
Redesigned UI art style using game assets from Super Mario, and implemented design changes after color-blindness simulation tests.
​
CONCLUSION
Throughout this project, I familiarized myself with the different skills, methodologies, and tools necessary for UX/UI designers. This includes becoming adept at Figma and Photoshop and knowing when each program should be utilized.
Ultimately, I learned how to craft an enjoyable user experience for video game players, starting with understanding the game developer's rules and options and bridging them with players' perceptions and expectations.