Murder Mystery UI

Key Points

• Designed 4 menus and HUD for a proposed murder mystery game to demonstrate real UI design knowledge.

• Created an action list system to rapidly iterate on UI animations that felt polished even at a prototypical level.

This project was the first of two projects in my UX design class. It is a complete demonstration of the UI for a theoretical murder mystery game. This includes implementing what UI for the main menu, pause menu, options menu, save/load menu, and gameplay HUD and UI would look and feel for a game in the same genre as Phoenix Wright: Ace Attorney and Danganronpa.

Accomplishments

• I designed and created 4 different menus: the main menu, the options menu (with submenus for system, graphics, sound, controls, and credits), the pause menu, and the save/load menu. In addition, I created HUD and UI elements for three modes of gameplay: dialogue, autopsy, and inspection.

• The major menus were created dynamically to allow for new options to be added easily by tweaking values in the editor.

• I created dynamic animations for every menu and nearly every button that was usable, all of which could be tweaked while the game was running.

Takeaways

• Dynamically created UI is difficult, but is hugely rewarding to pull off. Not only that, but it has the huge advantange of being able to be tweaked by exposed properties by a designer, or by code at a designer's request. It is also very useful for when the UI has to accommodate for different screen form factors, where that is a change in resolution, physical size, distance from the user, etc.

• Every animation seen in the video was created thanks to a data structure called the action list. The action list's command pattern structure, combined with being able to block certain actions from executing before others are done, fits perfectly with UI design, and allows for concepts that would otherwise be challenging to program, like beautiful transitions between scenes, custom animations for every button press, fancy UI animations, etc.