Highguard War Chest Breakdown

This is the progression of the War Chest UI in Highguard from Figma spec (done by Luke Aiello https://lukeaiello.com/) to final implementation in Unreal Engine. A big part of my job as a Technical UI Designer is to take the UI/UX Designer and UI Artist's vision and implement it as 1:1 as possible. Our team leveraged Figma, Unreal Engine, and Photoshop to make this happen. After the initial UX design and wireframing (done by Jamile Marcellino https://www.linkedin.com/in/jamile-marcellino/), the UI Artist (Luke Aiello) would iterate on the final art spec in Figma and provide detailed breakdowns of the content. When the art spec was completed and passed off, I would iterate on it in Unreal Engine frequently taking screenshots and leveraging Photoshop guides to ensure my implementation was 1:1.

With the exception of iconography all of the work shown was built either using the Material Editor or UMG. No rasterized bitmaps were used for War Chest elements. I also implemented the system that allowed us to show 3D items in various poses and transformations across the entire front-end.

At the time of this post, some elements have pivoted from the original spec and may not be accounted for in the Figma examples.