Jester and The Box
Designing UI for Immersion & Atmosphere
Oscar Viking Jansson
Game & UX/UI Designer
2026
During the third game project at Futuregames, I acted as the UX/UI Design Lead, managing the pipeline from initial research and ideation to assisting in final in-engine implementation.
Jester & The Box is a third-person puzzle adventure game set in a medieval fantasy world, where the player controls Trix the Jester and their companion through various challenges.
Team Size
6
Role
Lead UX/UI Designer, Audio Programmer & Game Designer
Timeframe
8 Weeks
Goal
Design and implement a data-driven and user-centric atmospheric interface that keeps the player immersed in the world.
Responsibilities
Led the entire design process, spanning from initial user research and wireframing in Figma to the technical execution of interactive UI materials directly inside Unreal Engine. I also structured and implemented the game's dynamic soundscape, managing surface-aware footstep systems, overall audio mixing, and blueprint-driven music and ambience transitions.
Procedural UI Materials
Performant and highly custom procedural UI Materials using Signed Distance Fields In Unreal Engine 5.
Procedural UI Materials
Performant and highly custom procedural UI Materials using Signed Distance Fields In Unreal Engine 5.
Custom Design System
A customized Design System made to make implentation in Unreal Engine smooth.
Custom Design System
A customized Design System made to make implentation in Unreal Engine smooth.
Project Deep Dive
The Challenge
The core game loop heavily centered around the companion box. My primary UX objective was to ensure that the interface and interactions reinforced the box's identity as a living, trusted friend, rather than a sterile puzzle tool, while maintaining a deeply atmospheric and low-stress player experience.
Research
To anchor our design decisions, our team established a central design compass: a persona named Elias, the Atmosphere-Driven Explorer. Elias plays games to relax and disconnect.
Survey
During our user research phase, we conducted a survey that gathered responses from a wide range of players within our target demographic.
The Conflict: When surveying players within our demographic, a majority favored complex action mechanics and requested visual trajectory lines and landing markers for a box-throwing feature.
The Insight: Blindly following the quantitative survey data would have compromised our core design goals. Introducing high-precision aiming and heavy UI indicators transformed our companion box into a mere mechanical tool, completely disrupting the calm pacing Elias desired.
The Solution: We pivoted by scaling back the mechanic to a physical drop and carry system, completely eliminating the need for aiming reticles and UI markers to keep the screen calm and minimalist.
Benchmarking
To create an experience that's aligning with the mental models of our target demographic, I held a lightweight Benchmarking workshop with the team to analyze how other titles are handling similar mechanics.
UI Production
Ideation
I held an ideation-workshop within the UX Team where we came up with different solutions.
Lo-Fi Mockups
Low Fidelity Wireframes created in Figma.
Visual Identity
Design Language: Drawing inspiration from the mood boards and artwork created by our Concept Artist, Johanna, I established a unified style guide and component library in Figma. I utilized organic shapes and historical motifs, such as a wood-carved sun, to form a whimsical design language that complemented the game’s warm and bright color palette.
Design System
Complete with a solid Typography Scale, Color Palette and Custom Components.
Hi-Fi Design
High Fidelity Mockups created in Figma.
Minimalist HUD: Because our game design explicitly excluded combat or survival elements, traditional HUD elements like health, stamina, or action bars were completely unnecessary. I leveraged this to the player's advantage, keeping the screen clutter-free. This visual minimalism fostered a calm, relaxed atmosphere, keeping the player's attention fully immersed in the world and characters.
Technical UI
Going Procedural in Unreal Engine
To elevate the first impression of the game, I wanted to move away from a standard, text-based button list over a static 3D scene for the main menu. I conceptualized an interactive layout where our central wood-carved sun motif acted as the primary interface, with the individual sun rays functioning as the menu buttons.
To achieve a polished, high-fidelity look without compromising performance, I brought this design into the engine using a combination of UMG widgets and the Unreal Engine Material Editor.
Procedural Logic: I developed a fully procedural UI material. Because the shader was driven entirely by mathematical nodes rather than relying on imported static textures, we gained absolute control over hover states, responsive scaling, and parameter-driven animations.
Optimization: This technical solution meant that the entire interactive main menu layout carried a zero texture memory footprint. It allowed us to deliver a customized visual experience that was incredibly lightweight and performant from the second the game launched.
Reusing the Material
To eliminate jarring hard cuts between scenes, I created an inverted, scalable variation of the same material. This functioned as a thematic transition wipe that gracefully masked level loads while maintaining continuous immersion.
Audio Implementation
Alongside UI, I owned the game's soundscape implementation in Unreal Engine. I developed dynamic footstep systems responsive to physical surface materials (stone, wood, grass), configured 3D spatial attenuation to eliminate ear fatigue, and built a persistent Game Instance system to manage uninterrupted ambient audio and music crossfades across level loads.
Reflection
Looking back at the project, managing scope against a tight production deadline required pragmatic decision-making. While the final in-engine implementation didn't reach a complete 1:1 translation of our high-fidelity Figma mockups, we successfully achieved what we set out to deliver.
By prioritizing player feel and core interactions over surface-level pixel perfection, we ensured the experience remained atmospheric, calm, and clutter-free. The companion box felt like a living friend rather than a tool, proving that even under strict time constraints, staying anchored to your player's emotional needs protects the essence of the game.
When deadlines tighten, UX success isn't defined by matching every vector from Figma, but by whether the player feels the intended emotion in the final build.
Learning to identify non-essential visual elements and make deliberate trade-offs allowed us to preserve technical performance and nail the game's core identity.
Project Deep Dive
The Challenge
The core game loop heavily centered around the companion box. My primary UX objective was to ensure that the interface and interactions reinforced the box's identity as a living, trusted friend, rather than a sterile puzzle tool, while maintaining a deeply atmospheric and low-stress player experience.
Research
To anchor our design decisions, our team established a central design compass: a persona named Elias, the Atmosphere-Driven Explorer. Elias plays games to relax and disconnect.
Survey
During our user research phase, we conducted a survey that gathered responses from a wide range of players within our target demographic.
The Conflict: When surveying players within our demographic, a majority favored complex action mechanics and requested visual trajectory lines and landing markers for a box-throwing feature.
The Insight: Blindly following the quantitative survey data would have compromised our core design goals. Introducing high-precision aiming and heavy UI indicators transformed our companion box into a mere mechanical tool, completely disrupting the calm pacing Elias desired.
The Solution: We pivoted by scaling back the mechanic to a physical drop and carry system, completely eliminating the need for aiming reticles and UI markers to keep the screen calm and minimalist.
Benchmarking
To create an experience that's aligning with the mental models of our target demographic, I held a lightweight Benchmarking workshop with the team to analyze how other titles are handling similar mechanics.
UI Production
Ideation
I held an ideation-workshop within the UX Team where we came up with different solutions.
Lo-Fi Mockups
Low Fidelity Wireframes created in Figma.
Visual Identity
Design Language: Drawing inspiration from the mood boards and artwork created by our Concept Artist, Johanna, I established a unified style guide and component library in Figma. I utilized organic shapes and historical motifs, such as a wood-carved sun, to form a whimsical design language that complemented the game’s warm and bright color palette.
Design System
Complete with a solid Typography Scale, Color Palette and Custom Components.
Hi-Fi Design
High Fidelity Mockups created in Figma.
Minimalist HUD: Because our game design explicitly excluded combat or survival elements, traditional HUD elements like health, stamina, or action bars were completely unnecessary. I leveraged this to the player's advantage, keeping the screen clutter-free. This visual minimalism fostered a calm, relaxed atmosphere, keeping the player's attention fully immersed in the world and characters.
Technical UI
Going Procedural in Unreal Engine
To elevate the first impression of the game, I wanted to move away from a standard, text-based button list over a static 3D scene for the main menu. I conceptualized an interactive layout where our central wood-carved sun motif acted as the primary interface, with the individual sun rays functioning as the menu buttons.
To achieve a polished, high-fidelity look without compromising performance, I brought this design into the engine using a combination of UMG widgets and the Unreal Engine Material Editor.
Procedural Logic: I developed a fully procedural UI material. Because the shader was driven entirely by mathematical nodes rather than relying on imported static textures, we gained absolute control over hover states, responsive scaling, and parameter-driven animations.
Optimization: This technical solution meant that the entire interactive main menu layout carried a zero texture memory footprint. It allowed us to deliver a customized visual experience that was incredibly lightweight and performant from the second the game launched.
Reusing the Material
To eliminate jarring hard cuts between scenes, I created an inverted, scalable variation of the same material. This functioned as a thematic transition wipe that gracefully masked level loads while maintaining continuous immersion.
Audio Implementation
Alongside UI, I owned the game's soundscape implementation in Unreal Engine. I developed dynamic footstep systems responsive to physical surface materials (stone, wood, grass), configured 3D spatial attenuation to eliminate ear fatigue, and built a persistent Game Instance system to manage uninterrupted ambient audio and music crossfades across level loads.
Reflection
Looking back at the project, managing scope against a tight production deadline required pragmatic decision-making. While the final in-engine implementation didn't reach a complete 1:1 translation of our high-fidelity Figma mockups, we successfully achieved what we set out to deliver.
By prioritizing player feel and core interactions over surface-level pixel perfection, we ensured the experience remained atmospheric, calm, and clutter-free. The companion box felt like a living friend rather than a tool, proving that even under strict time constraints, staying anchored to your player's emotional needs protects the essence of the game.
When deadlines tighten, UX success isn't defined by matching every vector from Figma, but by whether the player feels the intended emotion in the final build.
Learning to identify non-essential visual elements and make deliberate trade-offs allowed us to preserve technical performance and nail the game's core identity.
Oscar Viking Jansson
Oscar Viking Jansson