Emology

Inspiration

Understanding our emotions is difficult, especially when emotional changes happen gradually or without us noticing. Many people struggle to recognize emotional patterns until they become overwhelming. We wanted to explore a new way to make emotional awareness more intuitive and engaging. Inspired by city simulation concepts and emotional visualization ideas, we created Emology, an application that transforms emotional signals into a living city. By turning abstract emotional states into something visual and interactive, users can better observe, understand, and respond to their emotional landscape.

What it does

Emology visualizes a user’s emotional state as a dynamic Emotion City. Each building in the city represents a specific emotion such as joy, anger, sadness, fear, disgust, or envy. The intensity of each emotion influences how the building behaves—ranging from calm and stable to animated or highlighted when emotional levels become extreme.

The system also provides real-time guidance when emotional spikes occur. When an emotion reaches a critical level, an alert indicator appears near the corresponding building, along with suggested actions to help the user rebalance their emotional state. These suggestions might include short reflection exercises, breathing resets, or small actions that promote emotional awareness.

Through this city metaphor, Emology helps users perceive emotional patterns in a way that feels intuitive, interactive, and easy to explore.

How we built it

We built Emology as a web-based interactive interface using modern front-end tools. The UI and rapid prototyping were developed using Figma Make, allowing us to quickly iterate on the visual design and interactive behaviors of the Emotion City.

Key features include:

A city grid visualization where buildings represent emotions
A split-view insight panel for deeper emotional analysis
A dynamic city health indicator summarizing overall emotional balance
An emotion alert system that highlights extreme emotional changes
A hidden demo mode that simulates emotional intensity changes for testing and demonstration
Guided onboarding tooltips to help first-time users understand how to interact with the city

These components work together to create a responsive system where emotional signals dynamically affect the visual city environment.

Challenges we ran into

One of the biggest challenges was designing a system that communicates emotional information clearly without overwhelming the user. Emotions are complex and subtle, so translating them into simple visual signals required careful design decisions.

Another challenge was building interactive behaviors for the city elements. Because the buildings respond dynamically to emotion intensity changes, we had to carefully coordinate animations, alerts, and interaction states to ensure the system remained intuitive and visually coherent.

We also needed to simulate emotional data since real emotion detection systems were outside the scope of this prototype. Creating a demo mode that realistically demonstrates emotional changes while keeping the interface responsive required additional design and logic work.

Accomplishments that we're proud of

We are particularly proud of how the Emotion City concept came to life visually and interactively. The city metaphor makes emotional states easy to interpret, turning something abstract into something users can explore naturally.

We are also proud of:

The alert system that highlights emotional spikes
The action suggestion panel that encourages healthy responses
The demo simulation system that allows emotions to dynamically affect the city
The guided onboarding experience that helps users quickly understand the interface

Together, these features create an engaging experience that makes emotional awareness more approachable.

What we learned

Through this project, we learned how powerful visual metaphors can be when designing tools for emotional awareness. Representing emotions as parts of a city helped simplify complex psychological ideas into something users can quickly understand.

We also gained experience balancing information clarity with visual design. Emotional insights must be helpful without becoming overwhelming, and designing systems that surface insights only when needed was an important lesson.

Finally, we learned the importance of building systems that can evolve—from simulated emotion inputs today to potential real emotional sensing technologies in the future.

What's next for Emology

In the future, we would like to extend Emology beyond a prototype and integrate real emotional sensing technologies. Potential next steps include:

Integrating real-time emotion detection using facial expression analysis or wearable sensors
Adding emotion history and pattern analysis to help users identify long-term trends
Developing AI-driven emotional insights that provide personalized recommendations
Expanding the city metaphor into a richer environment with evolving districts and environmental effects
Introducing mobile notifications and emotional check-ins to help users stay aware throughout the day

Ultimately, we envision Emology as a tool that empowers people to better understand and manage their emotional well-being through intuitive visualization and supportive guidance.