Building Connection: A Prosocial UI Tech Art Exploration

UI UX Technical Art Intern

Unreleased Title - Chronicler Software

Third Person Co-op Puzzle Shooter

September 2024 - May 2025

A Shared Sense of Direction 

Chronicler Software’s foundation is prosocial design philosophy centered on cooperation, trust, and shared awareness, both within the team and the games we create. My task was to apply and translate that principle into a functional and emotionally resonant map UI. The challenge was to build not just a navigation tool, but an interface that embodied the core principles of clarity, accessibility, and game design itself. The map needed to offer a low-barrier, intuitive interaction that felt tactile and responsive to the rhythm of the world. 

Exploring Design Questions 

To guide the design, I began by asking: 

  • How can I represent a 3D environment efficiently without obstructing gameplay? 

  • How much information does the player truly need—exits, teammates, or every detail? 

  • What is the balance between immersion and clarity? 

These questions shaped both technical feasibility and user experience goals, emphasizing minimal clutter, quick readability, and intuitive comprehension during gameplay. 

Prototyping and Implementation 

I built three prototypes inspired by real-world scanning technologies such as LIDAR, SONAR, and MRI. My focus was on achieving a tactile, responsive feel with quick toggles and rapid information recognition inside a procedurally generated environment. 

The map needed to feel like a genuine navigation tool that made sense both visually and mechanically. Its timing, animation, and practicality had to align with the player’s experience. Games like Deep Rock Galactic, Satisfactory, and Death Stranding informed this approach to tactile navigation and environmental awareness. 

A. Hologram UI Widget 

This prototype displayed a holographic widget of the environment directly in the player’s HUD, inspired by Deep Rock Galactic’s terrain scanner. It highlighted exits, points of interest, and teammates. While functional, it took up too much screen space and disrupted gameplay. I initially used two scene-capture cameras with color overlays, but this setup was costly and required heavy optimization.  

B. Top-Down Level Scanner 

This version used a static top-down capture with a scrollable depth mask, similar to an MRI scan. The player could scroll through layers of the map within a fog-of-war radius, creating a sense of depth and spatial awareness. It provided clarity but lacked the immediacy and collaboration I wanted to encourage. 

C. Hologram World Projection 

Using the same assets as the hologram widget, this prototype projected the map into 3D game space through Niagara particles. It created a diegetic hologram that players could place and walk around. At first, I viewed its fixed position as a flaw because the hologram did not follow the player. When I presented it to my team leads, however, their reaction changed my perspective. 

“Wait, that’s so neat! Everyone can see the map. They can plan their missions together.” 

What I had seen as a limitation became a feature that naturally encouraged cooperation and shared strategy. The diegetic design using a Niagara-based hologram immediately stood out. It encouraged real-time collaboration and aligned perfectly with both the game’s and the team’s prosocial goals. The realization that the idea itself promoted connection became a moment of prosocial design in action. 

What Is Prosocial Design?

Prosocial design intentionally creates systems that encourage cooperation, empathy, and mutual support. Instead of rewarding competition or individual gain, it focuses on helping players feel connected, valued, and interdependent within a shared experience. 

I first discovered this concept through Deep Rock Galactic, a game rooted in teamwork and problem-solving. Its systems—like the MULE, pinging mechanics, and shared mission objectives—foster unity and communication. You can play alone, but when you join others, every action becomes collaborative. Once I experienced this with a group of friends, I understood how prosocial design transforms ordinary mechanics into meaningful connection. That realization shaped how I approached the hologram map.  

Evolving the Idea

Prosocial design intentionally creates systems that encourage cooperation, empathy, and mutual support. Instead of rewarding competition or individual gain, it focuses on helping players feel connected, valued, and interdependent within a shared experience. 

I first discovered this concept through Deep Rock Galactic, a game rooted in teamwork and problem-solving. Its systems—like the MULE, pinging mechanics, and shared mission objectives—foster unity and communication. You can play alone, but when you join others, every action becomes collaborative. Once I experienced this with a group of friends, I understood how prosocial design transforms ordinary mechanics into meaningful connection. That realization shaped how I approached the hologram map.  

Obstacles and Solutions

The game’s multi-dimensional environments made a traditional 2D map impractical. Rather than generating a full 3D model, I created the illusion of depth using an orthographic scene capture rendered as a rotating hologram. This approach maintained performance while providing the visual effect of dimensionality. 

Further optimization came from reducing multiple scene captures to one and encoding key points of interest into RGB channels. This method improved efficiency while preserving clarity and readability.  

Feedback and Iteration 

After receiving feedback from the creative leads, I refined the system further: 

  • Simplified to a single orthographic camera and encoded points of interest into color channels for texture masking 

  • Added teammate waypoints with distance indicators 

  • Integrated a curved visor HUD to display mission data 

  • Reintroduced a small top-down map in the lower-left corner for reorientation 

  • Added adjustable field-of-view settings for accessibility and personalization 

Outcome 

The hologram map evolved from technical visualization into a shared interface that united players through cooperation, empathy, and mutual awareness. What began as a simple navigation aid became evolved into a potential prosocial feature that encouraged real-time communication and accessibility, reflecting the very design philosophy it was built from. 

This project also highlighted the importance of prosocial design practices within the development process itself. Feeling heard, supported, and encouraged by my team created the same sense of connection that I was designing for in the game. It was through open critique and shared excitement that the realization emerged: the hologram’s shared visibility was not a flaw but a strength. If I had been working in isolation, I might never have recognized the full potential of the idea. 

Designing prosocial mechanics and practicing prosocial collaboration are deeply connected. Both rely on empathy, curiosity, and the willingness to listen. The hologram map became more than a visual tool; it became a symbol of what prosocial design can achieve within a team and within the worlds we create.