Minecraft Redesign

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.

Design Process

The Problem Statements

Statement 1

Create organization options, so players don't have to spend long periods of time organizing.

Statement 2

Simplify the Inventory System, so players don't feel the need to mod to play.

Statement 3

Modernize the Inventory System, so players feel that the game is current.

Research

Inventory Tweaks (mod) - Sorting
Stardew Valley Switch - Ease of access to inventory
Expanded Recipe book mods- Searchability

User Research

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

Hover tooltip

Tagging system

Hovering shows tags on items

Recipe Book on the right side

The Pivot

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.

Additional Research

Monster Hunter World - Popular load-out

Changes Made

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.

Pivot Research

Monster Hunter World - Popular Loadout

Wireframes After Pivot

Loadouts on the Hotbar

Button to access load-outs

New load-outs

Load-out bar adjusts size when the recipe book is open

Scroll through the load-outs with buttons on the sides

Delete option

Load-outs appear on the bottom of the window

Changing Load-outs

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

Combining

Pressing the combine button stacks all loose items of the same type

Sorting

MinecraftChangingOrderOptions-compressor

When the player clicks the button it changes the sorting automatically.

The chests, and inventory, automatically sort according to the buttons on the top

Wireframe Iteration

Wireframes

Wireframe1 First wireframe where I roughly laid things out and decreased the inventory size.	Wireframe2 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.

Wireframe1 First wireframe where I roughly laid things out and decreased the inventory size.	Wireframe2 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.

Kara Laumann

Minecraft Redesign

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.

Design Process

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.

Research

Inventory Tweaks (mod) - Sorting

Stardew Valley Switch - Ease of access to inventory

Expanded Recipe book mods- Searchability

User Research

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

The Pivot

Additional Research

Monster Hunter World - Popular load-out

Changes Made

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.

Pivot Research

Monster Hunter World - Popular Loadout

Wireframes After Pivot

Wireframe Iteration

Wireframes

Wireframe1

First wireframe where I roughly laid things out and decreased the inventory size.

Wireframe2

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.

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.