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 with 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 player and 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

Hover tooltip

Tagging system 

Self-tagged objects can be untagged

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

Load-outs 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

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 Process

Wireframes

Wireframe1

Wireframe1

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

Wireframe2

Wireframe2

Recreated the original inventory layout but without distinguishing between the inventory lines.

Wireframe3 - Vertical

Wireframe3 - Vertical

Tried to see how a vertical inventory would feel. Left the horizontal hotbar.

Wireframe4 - Vertical | Zoomed

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

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

Wireframe6 - Swapping | Left Recipe

Testing a left aligned recipe book with initial swapping system.

Wireframe7 - Swapping | Right Recipe

Wireframe7 - Swapping | Right Recipe

Testing a right aligned recipe book with initial swapping system.

Wireframe7 - Swapping | Crafting

Wireframe7 - Swapping | Crafting

Clean swapping system with crafting system in selected instead of the player.

Wireframe9 - Swapping | Buttons

Wireframe9 - Swapping | Buttons

Started mid fidelity mockup. Added the buttons for swapping between the player and crafting.

Wireframe10 - Swapping | Chest

Wireframe10 - Swapping | Chest

Showing the player, recipe book, and crafting table accessible from the small chest.

Wireframe11 - Swapping | No back

Wireframe11 - Swapping | No back

Testing slightly rounded buttons. Testing a lack of backgrounds for the inventory. Raising the fidelity.

Wireframe12 - Swapping | Back

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

Wireframe13 - Swapping | Flipped

Swapped the sides of everything as a small test to see how it felt.

Wireframe14 - Swapping | Chest Below

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

Wireframe15 - Swap | Below | Dark

Showing how the large crafting table would look with the player.

Wireframe16 - Swapping | Right Craft

Wireframe16 - Swapping | Right Craft

Rough wireframe of the crafting system on the right side of the screen.

Wireframe17 - Swap | Recipe Tab

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

Wireframe18 - Swap | Recipe Button

Testing a button by the player to open the recipe book.

  • LinkedIn - Black Circle