The Systems Thinking Behind the Aura
We have instruments for the physical body, but nothing for the invisible labor of emotional presence. For our project Tide, we wanted to create a bio-responsive interface that visualizes "social proprioception"—the implicit awareness of emotional proximity and relational pressure.
🛠 The Build: Logic Over Pixels
Rather than just drawing screens, we built Tide as a functional simulation within Figma. We leveraged:
- Figma Variables & Expressions: To track the "Emotional Reserve" and dynamically update UI states based on user interaction.
- Advanced Prototyping: Utilizing "Smart Animate" and "After Delay" triggers to create the organic, bioluminescent pulse of the aura system.
- Component Properties: To handle the complex transitions between data-heavy states and ambient visualizations.
🧮 The Math of Empathy
To make Tide more than just a visualizer, we modeled a caregiver's emotional reserve R(t) over a session using this integral:
R(t) = R₀ - ∫₀ᵗ α I(τ) dτ
Where:
R₀ is the starting reserve.
I(τ) is the emotional intensity.
α is the individual’s absorption coefficient.
Tide makes this "empathy calculus" visible in real-time, helping users identify depletion before it leads to burnout.
🎨 Visualizing "Bioluminescence"
The hardest challenge was making data feel felt, not just seen. We moved away from rigid charts and used layered gradients and noise textures in Figma to create a glowing, organic UI.
Compassion Mode: The Interaction Logic
Highly empathetic users are often already overwhelmed by the signals they absorb. A tool that surfaces more raw data could make things worse.
We implemented "Compassion Mode"—a single toggle that shifts the UI from high-fidelity data points to ambient "weather" patterns. It resolves the tension between personal insight and cognitive fatigue by turning "raindrops" of data into a soft, atmospheric glow.
🔗 Explore the Project
To see the "Living Aura" system and our full design logic, you can explore our Figma files below:
- Interactive Prototype — Experience the "Flow Ribbon" and Compassion Mode in action.
- The Tide Strategy Deck — A deep dive into the research, sensory systems, and future roadmap.
What's next? The immediate next step is a wearable patch prototype: a non-invasive biosensor that correlates skin conductance and HRV to feed the environmental emotional model Tide currently simulates.
Designed by Bibi Sufiya Shariff and Mohammed Ayaan Adil Ahmed.
Top comments (0)