UI Refactor Exercise
This is a UI exercise I did, representing some fictional UI redesign work done for a fake game called 'Psymech' as practice.
In this theoretical redesign, my objective is to translate one of Psymech's old screens with antiquated UI to match one of their newer screens with the much more recent look. Some of the banners in the screenshots utilize screengrabs from a TTRPG campaign I am in, and features minis/artwork attributed to https://retrogrademinis.com.
The reference for an old state of Psymech's PVP screen, presenting its game modes in the game's old interface.
The reference for one of Psymech's new screens, featuring an entirely new aesthetic to match the old screen to.
A breakdown of the elements present in the old reference of the PVP Game Modes screen, so that I could identify and keep all of the current elements of the page in the new layout.
The first Wireframe, ideating on how to place the elements broken down in the last image.
The second wireframe, adding in the possibility of previewing the player's current loadout and enjoying it visually as well as informing the player on their equipment.
FINAL REDESIGN- Hover Over Loadout, displaying current equipment
FINAL REDESIGN- Idle view, nothing highlighted
FINAL REDESIGN- Hover over game mode, highlighting the selected button