Purpose:
UI/UX Case study
UI/UX Case study
Software Used:
Photoshop CC, Adobe XD
Photoshop CC, Adobe XD
Work in progress
---
Overview
The goal for this case study is to improve the player’s ability to experiment with different builds and to simplify the inventory management experience.
What is a build?
To create a build in Diablo IV, players must not only manage different item affixes and aspects, character abilities, and paragon points, but also ensure that these components are working together in an efficient and optimal manner.
Pain Points
Experimenting with different builds in Diablo IV is difficult for two reasons:
1. Most builds in Diablo IV require a high degree of synergy between components to work properly.
When one component is misaligned and not adequately contributing to this synergy, the build will be ineffective and unenjoyable to play.
As such, if players want to experiment with a different build, they will be punished for doing so because of a misalignment between their current build’s components and the components of the build they want to transition to.
This forces the player to store items in their stash or inventory until they’re ready to be used, and what’s more,
switching builds requires the redistribution of skill and paragon points, which leads us to issue #2.
As such, if players want to experiment with a different build, they will be punished for doing so because of a misalignment between their current build’s components and the components of the build they want to transition to.
This forces the player to store items in their stash or inventory until they’re ready to be used, and what’s more,
switching builds requires the redistribution of skill and paragon points, which leads us to issue #2.
2. Diablo IV’s UI as it pertains to inventory management and the assignment of skill and paragon points leaves much to be desired.
When it comes to inventory management, it’s difficult to sort, filter, and search for the item, affix, and aspect you need to start creating a build.
When it comes to inventory management, it’s difficult to sort, filter, and search for the item, affix, and aspect you need to start creating a build.
Furthermore, Diablo IV does not allow players to save skill trees or paragon boards, so switching between builds not only requires players to manage, remove, and equip new gear but also manually assign up to 58 skill points and 225 paragon points.
These issues make switching between builds overly cumbersome and time consuming; however, most of the issues can be solved with a few UI design tweaks and a new system for saving builds.
CONCEPT (work in progress)
Note: this case study is a work in progress. Some wireframe elements will be present in the UI concepts.
1. Loadout – build management UI overview
The loadout system has the ability to store build components into preset slots that can be edited manually or overwritten with the player's equipped components (i.e., items, skills, paragon boards).
It also exists next to the storage and wardrobe areas in each town so that players can easily see a preview of how the loadout compares to their current character setup.
It also exists next to the storage and wardrobe areas in each town so that players can easily see a preview of how the loadout compares to their current character setup.
2. Quick save Loadout slot
The loadout system includes a function that allows the user to save a snapshot of the player's equipped components (i.e., items, skills, paragon boards) into a loadout preset. This minimizes the effort to configure a load out from scratch when a player wants to keep their current build.
3. Loadout armory - deep customization of loadout slots
The Armory allows the player to manage and preview build items, skill points, and paragon board in the safety of a configuration space that is separate from their currently equipped attributes.
It can also be accessed from each loadout slot after creating a new slot profile or copying over their existing load out from their character.
The Armory allows players have direct access to carried equipment and stash items so that builds to be configured seamlessly in the same menu. This menu allows players to essentially build a blueprint until they are ready to apply the armorment from the load out menu.
4. Stash search and filter options
A new search tab was added to the stash to allow the player to narrow down their search of all items available in the other tabs.
This includes a keyword search to allow players to quickly find specific item names and a filter menu that offers more granular control on filtering items from view based on common item attributes.
5. "Lock item" functionality
Players can now lock items while they are in focus in the player's inventory to make it easier to sell or junk items in bulk without accidentally losing items they want to keep.
In addition to this feature, shops and blacksmiths can now sell or junk items in bulk so that players can easily get rid of items in bulk (UI mockup coming soon).
UI Kit Sample
I created a photoshop file to deconstruct screenshots from the game to craft new ui concepts for the load out and stash filtering system. This was a fun exploration for me to observe how Diablo 4 artists constructed frame elements and buttons.
Information Architecture
