Fantasy Game UI Proof of Concept
Role
UX/UI Designer
Project Type
Test / Ability demonstration
The test brief was for an inventory management and crafting interface for a fantasy game to present my methodology, to be completed within a week. The deliverables included User Flows, Wireframes, and Visual Concept. Included with the brief were game environment assets to assess my ability to identify a visual style.
User Flow
Research
To better understand the type of interface I would be designing, I evaluated the user flows of several different games that had inventory or crafting UI. I noted the core flow for Doodle God, Stacklands, and Stardew Valley, as well as looked at crafting experiences from Minecraft, Moonlighter, and Red Dead Redemption 2.
While kept to a high level, the exploration of the user flows and how the information was presented in other games provided me with guidance on what to avoid and what I could improve on for the final inventory and crafting interface.
Information Hierarchy
In order to understand how the interface would work, I looked at where and how the information would sit. This included consideration for submenus such as subdividing the core inventory into sections like equipment, valuables, and resources. I also noted that resources may also have some form of sorting applied - although sorting could apply to any section of the inventory.
User Flow
The user flow highlights the expected decisions a player would make to access the inventory and crafting interface. Here I started from when a player has gathered a resource because I wanted to include the potential state that a player may have saved a particular crafting recipe
User Interface
Visual Style
From the game environment imagery provided, I collated a mood board of visual inspiration both from literal user interfaces but also other media such as Terry Pratchett’s Discworld that I thought fit the aesthetic and served as wider inspiration.
Wireframes
I used wireframes to block out the layout of where information on the user interface would sit without getting overwhelmed by the visual aspect. At this time, I didn’t know what it would look like, but I knew that a player would be able to use the options across the top to navigate between the inventory menu, crafting menu, and settings menu.
Assets & Colours
Based on the environment art being brightly coloured, I decided on a more subdued palette for more visual contrast to help the UI stand out. Accessibility is something I kept in mind when considering text elements such as the category tabs. For them, I used a bright gold colour for maximum visibility against a dark brown background.
I quickly designed and prototyped the UI elements, including a hover/selected state for a singular item, in Figma to demo how the UI could potentially work.
User Interface
Using Figma, I created two different mockups of a potential crafting interface where the player is missing one of the required resources. Here the player has the option to save the recipe for later, and if they had the resources, there is the ability to craft 1, 10, or the maximum available.
Key Takeaways
Visual Iteration
As the focus was on overarching UX and UI, I chose to spend my time on each step of the process rather than just focusing purely on visual UI. However, with more time, I would have iterated over the visual aspect to design more concepts potentially in another tool like Procreate or Photoshop.
Console Considerations
This project was completed with mouse & keyboard controls in mind, and while keyboard navigation shares some similarities with a controller, I think that more time could have been spent considering how assets would interact without a mouse-hover state (e.g. buttons).
Still curious?
There’s plenty more to check out