UI Design - Case Files

Mapped the Information Architecture to inform systems implementation.

Whilst the final design simplified the original navigation structure, the core architecture remained. 

Planned full narrative and gameplay loop.

I planned the narrative structure using Freytag's Pyramid and a narrative asset list to ensure production goals were met. I also used a timeline to plot both the background narrative (the case itself) and the narrative the player uncovers through investigation, keeping the two in sync. 

Using the narrative design I had build, I began to structure the gameplay loop in more detail. The gameplay loop follows an investigation structure: the player is informed of a case, sent to investigate, collects clues, and deduces the suspect to reach a resolution. This structure informed which UI screens and systems the vertical slice needed to support.

Low-fidelity wireframes in Figma for all key screens.

Created low-fi wireframes whilst iterating on layout to explore structural options before finalising designs for implementation. From there, designs went straight into engine.

I prioritised implementing working UI systems over producing high-fidelity wireframes because I had to deliver a full vertical slice and meet deliverable goals. Testable in-engine screens took priority over polished mock-up screens. 

Style sheets for UI Art and asset creation.

I explored several colour palettes and styles, drawing on visual research to guide the direction. I applied the 60/30/10 rule to structure colour usage and maintain a clear visual hierarchy: neutrals and primary form the majority of the UI kit, such as containers, buttons, backgrounds, while accent colours are used sparingly to draw attention to important actions and states.

Initial Implementation of UI

After first round of playtesting based on a prototype, UI art was made using Figma and Photoshop. At this stage, UI animations were also implemented and made using UMG.

The main menu was designed to be 3d to create a thematic and visually engaging interface; the buttons and cork board background are textures I made in Photoshop, then applied into a 3d world-space UI and environment.

Developed UI Art for the game