Equip And Inventory/Vault Redesign Example

In the devs latest update, they said that they’re making the text and details optional, so it shows they’re still convinced that their textless menu with tiny icons is somehow useful to a large category of people. So I wanted to do an example Inventory/Equip Screen redesign to prove that it’s possible to include all of these details and still have something that looks good. (Personally, I still think that the 1.2 inventory did a great job of looking good and being useful and didn’t need a redesign at all, but if they’re determined to change it, then these are the changes I’d make.)

The main big changes I made are moving the vault to a separate screen (like in 1.2), rearranging and resizing the gear equip buttons, and moving the spells, minions, and stats to be on the same screen as the gear equips. Although it isn’t shown, tooltips would be added with spell and minion ability descriptions (they would show up when the icons for those are tapped/clicked). The reasoning behind my changes, as well as a more descriptive list of all of the changes, are below the images.

Version 1:


Version 2:

Vault:

*note: Some things, like the spell book, I didn’t fully finish editing because of the limitations of Photoshop. Treat this as a visual of ideas, not something fully polished.
*note2: I didn’t show popups and tooltips. When equipping gear, a popup would show up with the list of equippable gear for that slot on the left side of the screen (overtop of minions and spells). For the minions and spells, it would show up on the right side of the screen (overtop of gear). Tooltips would show up for spells and the minion abilities when their icon is tapped/clicked on that describe what they do.

Changes:

Moved vault to separate screen

  • One of the principles of design is to have everything you need on one screen, but to also try to keep it minimal and not include a bunch of stuff, to the point it’s overwhelming. I think with the gear and inventory on one screen, there was just too much going on, so it was visually overwhelming.
  • Also, I think it’s rare that people will want to see everything they have at the same time they’re trying to equip stuff: they want to only see what they have in that category. So it doesn’t make sense to have two things that are mostly used separately on the same screen, especially when it adds so much visual clutter.
  • This change also allows the gear slots to open a pop-up with the equippable gear, instead of filtering the vault, which gets rid of problems such as things having multiple functions depending on how you press them or taps doing different things depending on which of the various menus you’re in (which breaks the design rule of consistency!).

Turned hero into a silhouette instead.

  • Having a full hero portrait on the equip screen serves no purpose, since you can’t actually see your equipped gear on your hero, and thus just gets in the way of functionality. A silhouette serves the purpose of showing visually where the gear is on the hero while not distracting from the gear itself.

Made all of the gear slots bigger and added name, level, and set to them

  • This provides players with all of the info they need to know at a glance.

Moved stats, and spell and minion equips to the same screen as the gear equips.

  • This provides players with a way to see everything they have equipped at once. Which improves functionality a lot.

Changed spell equip menu to be icons in a spell book instead.

  • This not only looks very cool, but is functional, as players can see the name and level of all their spells, as well as what slot the spell is in.
  • Spell descriptions would be shown when a spell icon is tapped on, and tapping the name would allow the spell to be changed out. OR Tapping the spell would open up a menu with the full spell deception, and a button saying ‘Swap’ that allows the spell to be changed out.

Changed minion equip menu to be like in the arena.

  • Changing minions in the arena works nicely there, so I did the same thing here.
  • Same method of seeing the minion’s ability and changing it out as for spells.

Moved masteries and primary stats to the same screen for stats and made them visible by default

  • These are things you’ll almost always want to see, so made them visible at a glance in the equip screen.
  • Detailed stats are available through using the arrows, like before.

Put vault into inventory screen that allows you to see everything a player has. Changed Vault to have tabs for gear, spells, and minions.

  • This makes everything the player has easily accessible without a lot of navigation, which helps with inventory management.
  • Might also be nice to include a ‘Resources’ tab that shows all of a player’s available resources, like the wallet does.

Used space gained by putting the vault on its own screen to make the filters visible at the top without needing to go into a menu.

  • This helps players sort through their inventory much more easily.

Conclusion

So that’s my redesign, as well as my reasoning for changing what I did. Hopefully it shows that things can have descriptive text and still look nice. Let me know what you think!

2 Likes