For a class project, I redesigned the Minecraft Inventory system. This project didn't involve any implementation and was purely wireframes. We had 1.5 weeks to make a base design and then were given a design pivot which we had 3 days to design around.
The Problem Statements
Create organization options, so players don't have to spend long periods of time organizing.
Simplify the Inventory System, so players don't feel the need to mod to play.
Modernize the Inventory System, so players feel that the game is current.
Inventory Tweaks (mod) - Sorting
Stardew Valley Switch - Ease of access to inventory
Expanded Recipe book mods- Searchability
I made some initial wireframes to test some ideas I gained from my research. Based on those wireframes I gained some information from the players:
People did not like the idea of swapping between the player and the crafting system.
They wanted to be able to see their player and crafting system at the same time.
They did like always being able to see the player in different menus.
Players liked the idea of being able to organize their inventory with buttons.
The initial symbols were hard to understand.
With an added tooltip players knew what the symbols meant.
Players really liked the idea of being able to swap their Hotbar between all their inventory rows.
Players liked the idea of being able to tag items and search for them in their recipe book.
Wireframes Before Pivot
Main Idea and Sorting
CTRL + Mouse Wheel scrolls through lines in inventory
Sorting options for the player to click and organize both inventories and chests
Sort by rows, columns, and default
Organize Alphabetically, by Rarity, Equipment priority, or Crafting priority
Durability and Character
Player is accessible from chests
Durability shown in hover tooltip
Small crafting system accessible from chests
Recipe Book and Tagging
Self-tagged objects can be untagged
Hovering shows tags on items
Recipe Book on the right side
I showed the design to my professor and was given a pivot and feedback. The first piece of feedback was that the organization options should be drop-downs that are automatically sorted instead of pressing a button. The second bit of feedback was that moving through the lines in the inventory was confusing when visualized. It was hard to keep track of what the lines were. The pivot I was given was I needed to create load-outs; specifically mining, combat, and building load-outs.
Monster Hunter World - Popular load-out
Added a new button to change your load-out.
Removed the scrolling through each line of your inventory as a Hotbar.
Updated the sorting options in the chests.
Added new sorting options in the recipe books based on the layouts.
Added tooltips to show what the loadouts are and what's missing.
Added a combining button to combine objects of the same type.
Added tooltips, so players always know what they’re looking at.
With my Pivot being load-outs, I felt the scrolling through the lines of inventory as your Hotbar just became confusing. It already had some issues with knowing what lines of your inventory you were at and to keep that with being able to access load-outs confused things more.
Based on the feedback I got on sorting I decided to change how it worked and looked. Firstly, I made the dropdown always go down. It does cover items, but I felt that keeping it consistent was important. I also made it, so things automatically sort instead of pressing a button to sort. When I did some user testing, I had a few people wanting the option to combine their items if they had multiples. I decided to add such an option for both the inventory and the chests.
To adapt to the loadout pivot I decided to add a bar on the bottom with the load-outs. I wanted to give the player the ability to find items in their recipe book and put it on their load-outs. I also chose to allow the player to create their own load-outs. There are 5 loadout bars that the player can have. They also can delete previous load-outs to create new ones. To distinguish the load-outs each one has a specific image associated with it. This also helps with the cap because the player must choose which image to use.
Monster Hunter World - Popular Loadout
Wireframes After Pivot
Loadouts on the Hotbar
Button to access load-outs
Load-out bar adjusts size when the recipe book is open
Scroll through the load-outs with buttons on the sides
Load-outs appear on the bottom of the window
When a load-out is selected the Hotbar auto-fills.
Chosen load-out is show on the button
Missing Item Hover
Hovering over the load-out displays the items that are missing
Pressing the combine button stacks all loose items of the same type
When the player clicks the button it changes the sorting automatically.
The chests, and inventory, automatically sort according to the buttons on the top
First wireframe where I roughly laid things out and decreased the inventory size.
Recreated the original inventory layout but without distinguishing between the inventory lines.
Wireframe3 - Vertical
Tried to see how a vertical inventory would feel. Left the horizontal hotbar.
Wireframe4 - Vertical | Zoomed
Zoomed in on the vertical inventory, but removed the hotbar. Was initially going to put more on the left, but quickly determined it wouldn't work.
Wireframe5 - Swapping
Moved the hotbar to the top, and came up with the idea of swapping the lines of the inventory with the hot bar so you didn't have to move items. Also had the crafting system and player in the same spot to just swap between with buttons.
Wireframe6 - Swapping | Left Recipe
Testing a left aligned recipe book with initial swapping system.
Wireframe7 - Swapping | Right Recipe
Testing a right aligned recipe book with initial swapping system.
Wireframe7 - Swapping | Crafting
Clean swapping system with crafting system in selected instead of the player.
Wireframe9 - Swapping | Buttons
Started mid fidelity mockup. Added the buttons for swapping between the player and crafting.
Wireframe10 - Swapping | Chest
Showing the player, recipe book, and crafting table accessible from the small chest.
Wireframe11 - Swapping | No back
Testing slightly rounded buttons. Testing a lack of backgrounds for the inventory. Raising the fidelity.
Wireframe12 - Swapping | Back
Added backs to the inventory to connect them. Still testing being able to swap between the player and crafting.
Wireframe13 - Swapping | Flipped
Swapped the sides of everything as a small test to see how it felt.
Wireframe14 - Swapping | Chest Below
Moved the crafting system below the player, because swapping between player and crafting was frustrating to users.
Wireframe15 - Swap | Below | Dark
Showing how the large crafting table would look with the player.
Wireframe16 - Swapping | Right Craft
Rough wireframe of the crafting system on the right side of the screen.
Wireframe17 - Swap | Recipe Tab
Changed the crafting table to be vertical to match the height of the player. Testing a tab for the recipe book.
Wireframe18 - Swap | Recipe Button
Testing a button by the player to open the recipe book.