At Wonderstorm, my responsibilities as a UI Engineer include implementing the UI designed by the UI/UX Designer and Artists by taking their wireframes and assets and making the interactive animations, and adapting the game layouts in multiple resolutions to determine that they can be played on all mobile devices.

I came into the team years late in the development just as the team was starting to figure out what the UI might look like. After initially developing the screens for desktop and console, the team had to pivot to mobile to launch the game within eight months. That meant redesigning and re-implementing the screens entirely to fit the new platform within that time frame. We were able to achieve this and launch the game at the end of July 2024.

I mainly worked on the menu screens (lobby, settings, hero loadout, season pass, etc.). We had a modular approach to the UI, creating windows, buttons, effects, etc. out of simple native shapes, limited number of imported sprites as much as possible, and reused widgets across menus. I was also trained in the MVVM pattern and extensively used C++ to bind the data to the UI. We had a localization pipeline as well, using localized string tables to feed text into the UI.

Below are some of the screens I've implemented and animated under the guidance of the wonderful Principal Gameplay Engineer, John McElmurray. Everything was done in Unreal Engine 4 (Blueprints and C++) and an in-house tool for writing and exporting data.

(The following footages were captured in the engine, hence the mouse + keyboard controls and debug HUD.)

[ HERO SELECT ]

[ HERO LOADOUT ]

[ SETTINGS ]

[ CREDITS ]

(The following footages are sourced from players of the game, posted on their youtube channels.)

[ MISSION RESULTS ]