Death Echoes

Overview

Death Echoes was a professional group project briefed by industry clientele at Abertay University to create a game prototype.

As a small team built up of eight developers, I accepted the lead role in most design departments, including UI, gameplay, narrative, and level design. Governing the game's design document and final design decisions, I kept the team in line with the game's vision.

Our teamwork led us to create an ambitious prototype that received the approval of the studio client, and I enhanced my knowledge of the design departments I engaged with and supervised.

This discovery explores the process behind Death Echoes' UI development.

Brief

The team was required to create an interactive experience that aimed to tell an emotionally driven and meaningful narrative without using text or dialogue.

The project's theme was "what it means to be human", and it needed to influence the experience's narrative and concepts. The team was allowed to interpret this freely, and we weren't restricted by genre or style.

The experience was aimed at older teens and adults with appropriate narrative theming.

Pause Menu

Exclusive Variation's Lo-Fi Wireframe

Exclusive pause menu variation's adjusted main menu design.

After designing the game's main menu, I designed its pause menu.

I slightly adjusted the fifth main menu variation to create an exclusive pause menu variation, following my intention to base additional menus on the main menu.

The design maintained the top-centre-aligned layout and settings sub-screen. In contrast, blurred in-game scenery would fill the menu's negative space. A resume function replaced the start button, and I introduced an extra button to lead back to the main menu.

State Menu

First Variation's Lo-Fi Wireframe

First state menu variation's lose state screen.

The game required a distinct state menu to depict losing and winning.

For the first variation, I maintained a similar set of elements from the fifth main menu variation's title screen. However, I flipped the layout to create distinction from the previously designed menus while maintaining a sense of consistency.

A title would portray the nature of the menu, while buttons would lead to the main menu or allow the player to retry the level or quit the game.

Soul Energy Menu

First Variation's Lo-Fi Wireframe

First Soul Energy menu variation's hint selection screen.

The game required a menu for its Soul Energy mechanic.

The mechanic would allow the player to guide the character to various points of interest on the map through three available hints.

For the first variation, I designed a layout where each hint's image alongside its respective selection button was confined to an outlined card. A top-aligned title would portray the mechanic and relay instructions to the player.

Second Variation's Lo-Fi Wireframe

Second Soul Energy menu variation's reorganised hint selection screen.

For the second variation, I reorganised the menu's layout.

After review, I deemed the previous variation's card layout too busy. Instead, I tested a carousel-inspired design that made room for larger hint imagery. The player could choose their hint through the left and right-aligned arrow buttons.

I removed the card outlines in favour of painterly border effects for each image. A bottom-aligned selection button would persist until the player selected a hint.

Third Variation's Lo-Fi Wireframe

Third Soul Energy menu variation's reverted hint selection screen.

For the third variation, I reverted the menu's design.

After review, I realised the second variation's design was intrinsically hiding hints from the player. This nature could induce a sense of bias since the player couldn't fairly compare all three hints.

So, I reverted the menu's layout to encompass all three hints. However, I displayed images with the same painterly border effect from the previous variation in mind to maintain the minimalistic style.

Story Flashback Menu

First Variation's Lo-Fi Wireframe

First Story Flashback menu variation's interpretation screen.

The game also required a menu for its Story Flashback mechanic.

The mechanic would portray images of the backstory from the character's perspective. The player would be free to interpret these images. The menu would appear randomly throughout the game as the character experiences flashback episodes.

For the first variation, I allowed the flashback image to encompass a large area. A top-left-aligned close menu button would persist until pressed.

Second Variation's Lo-Fi Wireframe

Second Story Flashback menu variation's expanded interpretation screen.

For the second variation, I expanded upon the previous design.

I thought hinting at what the images are and portraying the mechanic through a heading would be another nice quality of life improvement. So, I introduced a top-aligned heading.

The flashback images would also maintain the painterly border effect from the Soul Energy menu's hint images.

Hi-Fi Prototypes

After designing each menu through wireframes, I built their prototypes in Adobe Xd to obtain feedback from the team and client for the UI's design vision.

These prototypes were based on the latest menu wireframes. However, some included parts of previous variations. I formed interactions using Xd's Connectors that allowed me to visualise and refine menu animations.

The team's feedback was positive, as was the client's response: "menu prototypes look slick, readable and with clearly defined navigation, no complaints here".