Project Aifir
Overview
My role: Design, implement, and animate all game UI functionality, template modular UI elements, create cinematics & camera animations associated with UI, ideate solutions for various UX problems as they arise, prototype player tool mechanics to determine feasibility
Duration: 5 months (Development will be complete in July, making for a total of 7 months)
Team: 16 people, agile development environment
Tools: Figma, Unreal Engine 5.1 UMG & Blueprints, Perforce, Confluence, Jira
Description: First-person, puzzle-platformer adventure game. Play as a shipwrecked scientific illustrator who must work with a rock giant companion to navigate to a lighthouse located on the opposite end of the island.
STILL IN DEVELOPMENT
〰️
STILL IN DEVELOPMENT 〰️
Warning: You’re about to see work that may be imperfect, incomplete, or buggy. This is a work-in-progress, so please check back for updates!
The Ask & Constraints
Project Aifir targets an audience of young professionals who seek escapism from the "real world" via entertainment. Based on this, we decided to design a highly immersive, narrative-driven gameplay with unique mechanics centered around player tools that allow the player to manipulate their environment and a companion character in a way that wasn't too twitchy or complex.
The primary in-game UI ask was to find a way to tutorialize mechanics, store collectible narrative artifacts, and document environmental interactions for the player.
Storing Narrative Artifacts
Upon using the words "immersive" and "escapism," we had already determined a few key details about the UI. It would need to be minimal and as diegetic as possible to support player immersion and gameplay flow. I determined that the bulk of the UI could live inside the pause menu because it wasn't mission-critical or needed unless being referenced. I worked with our narrative designer to conceptualize the pause menu as a diegetic journal, given that the player character is a scientific illustrator.
Initial Prototype: Determining Feasibility
I had two main concerns about representing the pause menu in a truly diegetic way- would it feel natural to players and would the content be readable and accessible? I made an in-engine prototype to answer these questions and get an idea about how it might be architected technically.
Tutorializing Mechanics
Mechanics involved three tools, each with a number of distinct use cases. For example, our rock tool can be thrown at objects in the environment to lure the companion character through a level, thrown at enemies to kill them, or thrown at the companion character to anger it into strategically destroying objects in the environment.
I worked with level and narrative designers to decide to progressively introduce these mechanics through shrines found in the environment to the player over the course of a few levels to ease mental load. The experience of being introduced to and "unlocking" the mechanics involved finding a shrine that displays a representational drawing, getting a notification informing the player that the mechanic was added to the journal, then the player having the ability to review the mechanic's use in the journal pause menu. I designed the initial shrine instructional drawings and worked with an environment artist on the overall look of the shrine model.
Mechanic Discovery Flow
What did we learn? How will we implement those findings?
The repetitive page turn animations will become cumbersome and frustrating for players trying to access information quickly. The next iteration will include limiting page turn animations to tab navigation only. This makes the animation feel more intentional as it signifies the shifting of types of information, while still allowing us to maintain the tactile and diegetic feel page turning.
Text was often hard to read due to a combination of its size and dark, moody environmental lighting. The next iteration will sacrifice some of the journal's diegetic qualities in favor of 2D UI that supports better readability. Content shown on the actual diegetic journal page UI widgets will be primarily visual or iconographic to mitigate the need for text readability.
Wireflow of key screens
Prototype 2: Key Screens Functionality and Feel
When implementing the journal wireframes, I made UI template blueprints for all widgets that are used more than once, such as timeline events and illustration popups. The content of these widgets are fully customizable in-editor to limit UI rework as the design team writes and iterates on narrative so we can switch out images, text, and textures as needed.
Main Menu and Settings MVP Concept Mockup
The art, environment, and tone of our game is extremely critical to the player experience. I wanted to design the menu around a found composition in the environment that allows the environment and mood to shine while maintaining some of the tactile, drawn elements of the journal UI. I’m hoping to experiment with using the rock tool mesh as a hovering, diegetic element that follows button selections to create additional depth within the main menu scene.
What’s Next?
Filling in journal narrative content, working with artists on the final look of the widgets, implementing an enlarged view of timeline events
Integrating journal section unlocking into the gameplay experience as shrines and narrative content are encountered
Implementing the main menu
Playtest sessions involving the UI