359:361 - Mapping the Architecture of Identity
Identity isn’t a timeline - it’s a network.
359:361 is an interactive system that transforms personal experiences into a dynamic, visual network.
Originally developed as an “Identity Lab” for a graduates exhibition, this interface translates complex human moments into a structured, navigable ecosystem - visualizing identity as an evolving journey rather than a fixed state.
Identity isn’t a timeline - it’s a network.
359:361 is an interactive UX/UI system that transforms personal experiences into a dynamic, visual network.
Originally developed as an “Identity Lab,” this interface translates personal experiences into a structured, navigable network - allowing identity to be explored as something dynamic and evolving, rather than fixed. Presented as part of a final graduates exhibition.
Role
UX/UI & Interaction Designer (End-to-End)
Role
UX/UI & Interaction Designer (End-to-End)
Tools
Figma · Base44 (No-code) · Observable (D3) · ChatGPT
Tools
Figma · Base44 (No-code) · Observable (D3) · ChatGPT
Format
Interactive Interface · Data Visualization · UX/UI Design
Format
Interactive Interface · Data Visualization · UX/UI Design
Overview
The Idea
Identity is shaped not only by what we experience - but by how we interpret those experiences over time. This project explores identity as a layered, evolving network - where contradictions, imperfections, and personal narratives coexist within a constantly changing whole.
Challenge
How can an abstract, deeply personal concept like identity be translated into a structured, usable interface - without oversimplifying its complexity?
Experience
Users interact with the interface by selecting and categorizing personal experiences, assigning meaning and exploring their connections. Through navigation and filtering, they reveal patterns - allowing them to see their identity from new perspectives and reinterpret it.
Overview
The Idea
Identity is shaped by how we interpret our experiences over time. This project visualizes identity as a layered, evolving network where contradictions and personal narratives coexist within a dynamic whole.
Challenge
Translating a deeply personal, abstract concept like identity into a structured interface without oversimplifying its complexity.
Experience
Users categorize experiences and assign meaning to reveal hidden patterns. Through interactive navigation, they can explore and reinterpret their journey from new perspectives.
The Concept: 359:361
The Concept: 359:361
Concept & Meaning
359:361 marks a deviation from the “perfect” 360° - a space between perceived lack and excess, where identity exists in tension rather than resolution. 360 (the degree) is intentionally excluded. Perfection is treated as an illusion - a temporary, constructed state. Identity here is not fixed, but continuously shaped through experience, contradiction, and interpretation.
359:361 marks a deviation from the “perfect” 360° - a space between perceived lack and excess, where identity exists in tension rather than resolution. 360° is intentionally excluded. Perfection is treated as an illusion. Identity here is not fixed, but continuously shaped through experience and interpretation.
359
STATE: IMPERFECTION
The Lack
One degree away from whole.
A sense of imperfection - something feels missing. A subtle gap that shapes how we see ourselves. Creates a constant tension between what is and what’s missing.
360
STATE: PERCEIVED WHOLENESS
The Balance
Perfect completion. The 360 loop represents a moment of being whole.
Nothing feels missing, nothing feels excessive. everything aligns - internally or externally. A brief, passing alignment.
361
STATE: OVERFLOW
The Excess
The extra degree.
An overflow that disrupts balance.
Too much of something - beyond what feels right. A state where more becomes destabilizing.
359/Lack
One degree from whole. A sense of imperfection, creating a constant tension between what is and what’s missing.
360/Balance
A moment of being whole.
Nothing feels missing, nothing feels excessive. everything aligns - internally or externally.
361/Excess
An overflow that disrupts balance. Too much of something - beyond what feels right. A state where more becomes a burden.
Conceptual Research
RESEARCH → CONCEPTUAL
RESEARCH → CONCEPTUAL
Associative Ecosystem
INSIGHT
Identity is a network of connections, not a linear timeline.
Design Direction
→ Points toward a non-linear, network-based structure.
The Strength in "Scars"
INSIGHT
Painful or "broken" moments are sources of strength, not flaws. Like a scar that represents healing, these experiences are integral threads that build our character.
Design Direction
→ Suggests space for reinterpretation instead of labeling experiences as failures.
Subjective Perception
INSIGHT
Our sense of wholeness is often distorted by external norms. What we perceive as "imperfect" is a personal interpretation, not an objective metric.
Design Direction
→ Calls for a non-judgmental experience prioritizing personal meaning over evaluation.
Associative Ecosystem
INSIGHT
Identity is a network of connections, not a linear timeline.
Design Direction
→ Points toward a non-linear, network-based structure.
The Strength in "Scars"
INSIGHT
"Broken" moments aren't flaws; they build character and strength.
Design Direction
→ Suggests reinterpretation instead of labeling moments as failures.
Subjective Perception
INSIGHT
What we perceive as "imperfect" is a personal interpretation.
Design Direction
→ Calls for a non-judgmental experience prioritizing personal meaning over evaluation.
Taking a risk
A new job
Moving forward
I'm courageous
Being alone
Out of control
Gratitude
Success
Shift
Feels right
Connected
Big change
Capable
Relief
Overwhelming
Having surgery
I'm intuitive
Opening up
Healing
Development
Uncertain
Taking a risk
A new job
Public speaking
Being alone
experience
Connected
Relief
Opening up
Uncertain
Visual Research
RESEARCH → VISUAL
Research Focus
Research Focus
To explore how these ideas could take form, I examined visual systems based on connections, graphs, and data structures.
Key Visual-Research Takeaways
Key Research TAKEAWAYS
Identity should be represented as a network, not a linear timeline.
The meaning of each experience emerges through its connections to others.
Contradictory or disruptive experiences are part of the whole, not exceptions to it.
A graph-based structure allows users to build "themselves" through interaction rather than explain themselves through text.
Force graph behavior enables users to perceive identity as a living, evolving system.
Network Structure: identity is a web of connections, not a linear timeline.
Building through Interaction: Users reveal their own patterns by active categorizing rather than just reading text.
Evolving System: A dynamic graph was essential to show that identity is constantly changing.
From Concept to System
System Architecture
System Architecture
To make an abstract concept like identity usable, I defined a system that structures experiences as interactive components.
Experiences became nodes
Nodes have types
Each type has behaviors
Behaviors define relationships
Relationships form a dynamic identity map
node
network
force graph
connection
dynamic layout
motion
topology
Experience Types
System Breakdown
No.1
STATE: Initiation
Seed
A starting point.
An experience that introduces a new belief.
It lays the foundation for future growth.
A starting point.
An experience that introduces a new belief.
It lays the foundation for future growth.
SEED EXPERIENCE
No.2
STATE: Reinforcement
Affirmer
A stabilizing moment.
An experience that reinforces what already exists.
It strengthens a belief, whether positive or negative.
affirmer EXPERIENCE
No.3
STATE: Disruption
Shifter
A turning point.
An experience that disrupts an existing belief. It introduces doubt or tension, leading to re-evaluation.
shifter EXPERIENCE
No.4
STATE: CONTEXT
Context-giving Experience
In early iterations, I explored a fourth type of experience: Context-Giving: subtle, ongoing conditions (like environment or emotional states) that influence how other experiences are perceived.
designed as an ambient layer
Why it was removed
It was designed as an ambient layer rather than an interactive element.
In practice, it introduced friction:
Added cognitive load
Required a less intuitive interaction model
Reduced the clarity between the core experience types
Added complexity without clear value
It created unnecessary friction and cognitive load without delivering clear value.
Design Decision
I removed this layer to keep three clear experience types, embedding context implicitly within the network.
Logic & Behavior
STATE: RULES
System Logic
Each experience type plays a distinct role in the network.
Seeds introduce new beliefs.
Affirmers reinforce them.
Shifters challenge and reshape them.
Together, they form a dynamic system of evolving beliefs.
FORMING AN EVOLVING SYSTEM
STATE: BEHAVIOR
System Behavior
Seeds are created from user-defined experiences and become active once a belief is defined.
Affirmers appear in relation to existing beliefs, reinforcing and stabilizing them.
Shifters can alter or break existing connections within the network based on user input.
STATE: INTERACTION
User Interaction
Users select personal experiences and define the belief formed from them.
Each input generates a node within the network or alter an existing node within it.
Users can explore connections and respond to disruptive nodes, influencing how the structure evolves.
User Flow
INTERACTION research
OVERVIEW
This is a High-level flow of how a visitor creates an identity map.
Visual Design
AESTHETIC FRAMEWORK
To create a cinematic and slightly dystopian atmosphere, the design utilizes a stark, monochromatic palette set within an absolute digital void. Particle-based nodes emerge from the darkness, reflecting the fragility and complexity of the human psyche. By isolating the interaction in a darkened room, the experience shifts from a simple tool to an immersive, high-tech reflection that is both clinical and profoundly introspective.
To create a cinematic and slightly dystopian atmosphere, the design utilizes a stark, monochromatic palette set within an absolute digital void. The installation was set in a darkened room, the shifting from a simple tool to an immersive, high-tech reflection that is both clinical and profoundly introspective.
Interaction Design
Key Interactions
Key Interactions
No.1
STATE: INTRODUCTION
0:00/1:34
01 // GUIDED ENTRY
Voice-guided introduction draws the user into the experience, setting the mood and direction.
THE INTERACTION
I designed a narrative-driven entry sequence led by an AI entity that acts as a mirror to the user. The interaction relies on a precise balance of voice-over, timed typography, and camera movement (zooming into the nodes).
DESIGN DECISIONS
01 // GUIDED ENTRY
The "Human-Digital" Balance: Refined the micro-copy to strike a balance between a structured digital system and an empathetic human voice.
Pacing & Immersion: Carefully timed the narration and transitions to lead the user into a "reflective state" and prevent cognitive overload.
Contextual Zoom: Integrated camera movement with the narrative - moving from a global map view to specific "Nodes" - to visually anchor abstract concepts.
To draw the user into a reflective state, I designed a narrative-driven sequence led by an AI entity. By balancing empathetic voice-over with timed typography and contextual camera movement, I ensured a seamless transition from a global view into specific personal "Nodes" - minimizing cognitive overload while instantly building intimacy.
No.2
STATE: ONBOARDING
02 // Experience Selection
In this stage, the user moves from listening to acting. By selecting core life events, they begin to "plant" the data that will grow into their personal map, turning abstract memories into tangible interface elements
THE INTERACTION
Users browse experience categories and select formative moments. Upon confirmation, the system dynamically generates "Seed Nodes" that materialize and float on the map, providing immediate visual feedback.
DESIGN DECISIONS
02 // EXPERIENCE SELECTION
Inclusive Taxonomy: Developed a diverse set of experiences to ensure content is relatable and inclusive for all life paths.
Minimal Friction: Optimized selection steps to reduce cognitive load, balancing system requirements with user effort.
Agency & Personalization: Integrated a "Something Else" option in every category to ensure users never feel limited by predefined labels.
Moving from listening to acting, users select formative moments from a diverse taxonomy of life events. To minimize friction and ensure agency, the system dynamically generates "Seed Nodes" - immediate visual feedback that transforms abstract memories into tangible interface elements. This optimized flow balances system requirements with user effort, preventing a "robotic" feel through inclusive, personalized options.
No.3
STATE: BELIEF CONSTRUCTION
03 // Belief Construction
This phase guides the user through "Reframing"—transforming a past event into a core belief. By zooming into a single node, the system isolates focus, turning a complex psychological shift into a structured, tactile interaction.
THE INTERACTION
The system splits the node into two halves: "Experience" and "Belief". Users construct a three-part belief sentence by selecting a perspective, an emotional state, and a dynamically generated outcome. Once complete, the map zooms out to reveal the belief as the primary data point, rooted in the original experience.
DESIGN DECISIONS
03 // BELIEF CONSTRUCTION
Conceptual Mediation: Used the "Split-Node" visual metaphor to simplify abstract psychological concepts, linking past experiences to resulting beliefs.
Dynamic Scaffolding: Designed a 3-step "Sentence Builder" with AI-driven suggestions to eliminate friction during complex reflection.
Hierarchical Shift: Created a visual transition that moves the original experience to a secondary role, reinforcing that beliefs are the active forces shaped by our past.
To simplify the complex process of "Reframing," I designed a tactile interaction where a single node splits into "Experience" and "Belief". Users build a core belief through a 3-step "Sentence Builder," utilizing AI-driven suggestions to eliminate friction. A strategic hierarchical shift then moves the original experience to a secondary role, visually reinforcing that our beliefs are the active forces shaped by our past.
No.4
STATE: Disruption & Exploration
04 // THE SHIFTER & REFLECTION
The journey concludes with a "Shifter" - a disruptive event that challenges the user’s belief system. By choosing how to respond to crisis, users dictate the map’s final state, leading to a holistic reflection on their identity as a complex, interconnected whole.
THE INTERACTION
When a "Shifter" appears, users choose between two paths: "Let it take over" (breaking map connections) or "See beauty in it" (mending the node with Kintsugi gold). This final choice opens a free-roaming exploration mode where users navigate the full complexity of their experiences.
DESIGN DECISIONS
04 // THE SHIFTER & REFLECTION
The Binary Pivot: Simplified an emotional crisis into a clear choice, externalizing the internal decision to either break or heal through resilience.
Kintsugi Metaphor: Used the visual language of gold-filling to transform a disruptive node into a point of strength.
Non-Linear Identity: Shifted from task-oriented interactions to open-ended reflection, reinforcing that identity is the "sum of all parts".
The journey concludes with the "Shifter" - a disruptive event presented as a binary choice: to break under pressure or to heal through resilience. I used the Kintsugi visual metaphor, where choosing to "See beauty in it" mends the node with gold, transforming a point of crisis into a point of strength. This final interaction transitions the user from task-oriented steps to a non-linear, free-roaming exploration, allowing for a holistic reflection on their identity as the sum of all its parts.
Context & Outcome
THE EXHIBITION CONTEXT
Designing for a graduation exhibition required an intuitive, self-guided experience that fits a limited timeframe. To balance deep reflection with a public gallery setting, I focused the interaction on a "Core Moment"- the breakdown of experience into the event and the belief - ensuring a profound impact while maintaining a seamless, rapid journey.
To balance deep reflection with a public gallery setting, I focused the interaction on a "Core Moment", designed for the limited-time experience.
Physical Setup: The project was housed in a dark room, utilizing a touch-screen console mirrored onto a large-scale projection to create an immersive, atmospheric laboratory.
Collective Insight: A secondary display showcased an aggregated "Global Map," visualizing common experiences among visitors and fostering a sense of shared human resilience.
Physical Setup: A touch-screen console mirrored onto a large-scale projection in a dark room, creating an atmospheric space.
Collective Insight: A secondary display visualized an aggregated "Global Map," fostering a sense of shared human experience among visitors.
Outcome: The Identity Map:
A real-time, generative system that manifests a dynamic "Identity Map" based on personal inputs.
Outcome: The Identity Map:
A real-time, dynamic "Identity Map" based on personal inputs.
The Value: The system transforms identity from something abstract into a visible, explorable structure, allowing users to understand how experiences shape beliefs and connections over time. By stepping back and observing their map as a whole, users experience a shift in perspective similar to the “overview effect” - seeing themselves from a distance, where everything connects into a larger, meaningful whole. This leads to a clear “aha” moment, where identity is understood as something shaped by all experiences, including the difficult ones, which become recognized as essential parts of who we are.
The Value: The system transforms identity into a visible, explorable structure, allowing users to perceive their life path as a whole. By observing the map from a distance, users experience a shift in perspective similar to the “overview effect” -recognizing that even the most difficult experiences are essential, interconnected parts of a larger, meaningful identity.
Key Decisions
From Figma to Base44
To enable deep personalization and creating a unique map for every visitor, I transitioned from static prototyping in Figma to a logic-driven, adaptive system in Base44.
Key Decisions
From Figma to Base44
To enable deep personalization, I transitioned the project from a Figma prototype to a dynamic logic-driven system in Base44, where the interface adapts in real-time to user inputs. By prioritizing system flexibility over granular visual control, I successfully delivered a non-linear journey that generates a unique Identity Map for every visitor.
Bite-size empathy
To prevent abandonment in a complex philosophical experience, I focused on a "Minimalist Hook" strategy. By refining the AI Narrator’s script into bite-sized high-impact phrases, I balanced human empathy with precision. This approach creates immediate curiosity and lowers the barrier to entry - transforming abstract depth into an accessible, intuitive journey.
