Video Game UI (WIP)

Project Overview

This project focused on designing the main menu system for "Hawthorn," an upcoming indie game. Building upon my previous experience designing Near Studios' launch website, I was tasked with creating an engaging and intuitive menu interface. I worked in close collaboration with and guidance from industry veterans from companies such as Bethesda Game Studios, Bioware, and Naughty Dog. The project involved working closely with the lead developer in an iterative design process, and the use of various tools including; Unreal Engine 5, UMG, Figma, and Adobe products.

Roles: Sole UX Designer, Technical UI Designer, and Graphic Designer, UX/Art Consultant

Tools: UMG, Unreal Engine 5, Figma, Adobe Photoshop, Adobe Illustrator, Audacity

Initial Designs

After previously helping Near Studios design their launch website for their new indie game Hawthorn, I was asked to help design the main menu system in their game! Initially we had meetings to discuss scope and general aesthetics.

From there I developed a style and theme on my own which I then shared with the lead developer of the game. He liked what I came up with so I set on to develop my user flows and low fidelity wireframes.

Initial Lofi Wireframes/Userflow

Meeting again with the lead developer this time he had some feedback on how he thought the flow of the menu system should go. With some back and forth we came up with a vision that satisfied the project's needs.

Mid-fi Wireframes After Reworking Userflow

Implementation in Unreal Engine

With the new user flows organized and the mid-fi wireframes made up, I started to design some graphics that I needed in Photoshop and Illustrator that I needed to start making the menus.

Once done with some basic backgrounds I started my work in Unreal Engine. I started by creating each of my menu widgets in UMG, as well as basic button and text layouts.

Inside Unreal Engines UMG

My process from here involved going back and forth between Unreal Engine, Photoshop, Illustrator and Figma. I created icons, backgrounds, buttons, and other graphics as I needed them. It was a very iterative process, setting up certain buttons made me realize I needed other graphical assets, or that certain ones didn’t look the way I had hoped.

Testing Button Hover States

One example of this was my initial parchment menu was way too busy once I had the menu text in it, so I simplified it and cleaned it up of objects such as an ink pen. Another example is I realized the menu buttons needed a hover state to help communicate when they were being considered for selection.

Programming the Menu Interactions

As I completed various buttons and screens, I programmed them to lead to and interact with each other. To do this I used Unreal Engine’s visual coding tool Blueprints.

Title Screen Interactions with Blueprints

At this point I had finished most of the features of the interface aside from a few hover and press states. Enough time had passed I felt it was time to give an update to the lead developer, so I sent him everything I had up to that point in the form of a video walkthrough (which is what you see at the beginning of this case study).

Key Takeaways

The importance of an iterative design process in game UI development.

The need for flexibility and adaptation in response to feedback and evolving project requirements.
The value of clear communication and regular progress updates with stakeholders.
The significance of instant feedback within a UI, such as hover states, in creating an intuitive and engaging user experience.

Conclusion

Having never been trained I taught myself Unreal Engine and UMG for this project. I enjoyed this challenge and learning these new tools. Learning how to use Blueprints was difficult for me, as programming is something I am uncomfortable with. However the node based and visual nature of it is more intuitive and easier for me to pick up than conventional programming.

I will continue to work with Near Studios building their menus, provide UI direction, and help with other in game assets for the foreseeable future.