As a fun personal project, I decided to tackle a high fantasy MMO game inventory. I wireframed, prototyped, and have been implementing the UI in Unreal Engine 5 through the use of MVVM and UMG. I chose inventory management because in MMOs, it can be one of the hardest user experiences to design. It needs to flow easily while also showing the user everything they have access to. It also needs to be flexible enough for the game team to add and take away things they need, like rarity, gems, etc. Depending on if you are designing for console or not, you also need to consider things like how to open sublists or make category structures that can be easily accessed with a controller vs a mouse. A lot of times design will use a virtual mouse when switching to console, but you still have to consider how tricky your hit targets might be for something with less control than a PC mouse.

  • Role: UX/UI and Technical Designer
  • Project Brief: Design a high fantasy MMO inventory system that let's a player see what they have equipped while in world.
  • Requirements: Inventory Grid for a PC and Console layout (including all items from an open world play screen like equipped items, item slots, etc)

Research

My first research question was how to layout the inventory? For a fantasy game, especially an MMO, you're going to have a LOT of different crafting items, weapons, resources, potions, etc in your inventory. There are a few examples of how we could approach this problem:

  • • A la Breath of the Wild, with simpler tab categories
  • • A la New World, with weights and items broken down into really small categories
  • • Something in between

Wireframes

While wireframing, I had to think really hard about the balance between item details, stats, and character visibility. Many MMOs will let you open the inventory while still viewing the character, since most players like to see items get equipped to see what they look like.

Wireframing flow in Figma looking at how PC vs console controls could be implemented

Style Inspiration

As a high fantasy MMO, I wanted to experiment with an intricate art that could look both ethereal and connect to the world where runes are the main source of magic. This is a bit outside my comfort zone as I typically deal with flat, vector type illustration and design. I've been inspired by a lot of the art nouveau fantasy depictions, but I also want to connect with the more arcane aspect of rune magic.

Genshin Impact was a big style inspiration for something that could be delicate and intricate, while New World had the ethereal floating elements that I really love.

UI High Fidelity

My first pass has a definite New World aesthetic to it, with highly textured backgrounds and a darker tone to the UI colors. But I don't think I've really incorporated the art nouveau decorative elements yet, so I would like to do another pass.

This project is currently a work in progress and I will continue to update here when I finish!

An exploration with Unreal Materials on how to get floating particles without using a Niagara emitter.
Material in situ
Unreal exploration of animation design; also taking the opportunity to learn more about player character blueprints.
Various materials I've been prototyping for the UI