2025 states - emotional journal
UI/UX high-fidelity prototype branding
minimalistic emotional journal without the stress of statistics
Most journaling apps treat emotions as data points, like checkboxes, dropdowns, numerical scales. The goal with states was to create an interface that feels as organic and layered as emotions themselves. It is an app where the UI responds to your inner landscape rather than reducing it to a form.
- make emotions tangible — color, motion, and light as emotional language
- reduce friction — glass surfaces that invite touch, not demand them
- create calm — a space that feels serene, never overwhelming
As the UI/UX designer on this project, I was provided with research findings from a discovery phase that analyzed 12 popular emotion tracking apps (Daylio, Moodpath, Reflectly, etc.) and included informal interviews with 8 users who had tried and abandoned emotion journaling. My design challenge was to translate these insights into an interface that addressed the identified friction points.
Pain Point 1: Forms Feel Clinical
Research Finding: Users described existing apps as treating emotions like medical data. Dropdown menus, 1-10 scales, and multiple-choice questionnaires created a "filling out paperwork at the doctor's office" experience. One user quote:
"It kills the moment. By the time I've clicked through all the menus, I don't even remember what I wanted to write."
Pain Point 2: Emotions Reduced to Data
Research Finding: Most apps force emotions into preset categories with emoji icons. Users felt their experiences were being flattened into oversimplified data points. Research quote:
"I can be happy and anxious at the same time.
The app makes me pick one."
The app makes me pick one."
Pain Point 3: Visual Overwhelm
Research Finding: Feature creep is rampant in emotion tracking apps. Charts, graphs, streak counters, mood analytics, habit trackers, and guided prompts create cluttered interfaces. Users reported feeling more anxious using apps meant to reduce anxiety. The core insight: tools designed for mental clarity were creating cognitive overload.
Pain Point 4: Lack of Emotional Resonance
Research Finding: Users noted a disconnect between content and presentation. Writing about sadness in bright, cheerful interfaces. Expressing joy in gray, serious layouts. The research indicated users wanted the interface itself to feel emotionally intelligent.
Key Design Principles I Established
Based on the research findings, I defined five core design principles to guide all decisions:
- Calm over functionality: If a feature adds visual noise, remove it
- Metaphor over literalism: Auras instead of emoji, glass instead of cards
- Ambient over assertive: The UI whispers, it doesn't demand
- Organic over mechanical: Float animations, breath-like pulses, mist dispersions
- Personal over prescriptive: Users define their own emotional vocabulary
Given: Research identifying clinical interfaces, data reduction, visual overwhelm, and emotional disconnect as core problems
I translated these insights into a cohesive visual language built on liquid glass, aura visualization, extreme minimalism, and organic motion
Outcome: An interface that feels less like a productivity tool and more like a quiet companion
- Lowercase typography: removed the authoritative voice of capital letters throughout the entire interface
- Ambient auras: created a calm, meditative background instead of sterile white space
- Free-form text first: inverted the typical flow so users write naturally, then tag, not the reverse
- Color auras instead of emoji: Emotions as ambient, diffuse, overlapping glows rather than discrete symbols. This allows multiple emotional states to visually coexist
- Custom emotional vocabulary: Users can create their own states with personally meaningful colors
- Visual metaphor in logo: App logo to show overlapping auras converging into a unified core, representing how multiple emotions exist simultaneously
- Non-hierarchical architecture: Structured the data model so entries aren't locked to single categories
- Three-screen architecture: splash, landing, homepage only.
- No analytics dashboard: The emotional landscape is the visualization. The auras themselves reflect entry patterns organically
- Gestural interactions: I designed long-press for delete mode, tap for glimmer effects, swipe for browsing
- Liquid glass as metaphor: Transparency suggests emotional honesty; the frosted layers suggest depth beneath the surface
- Organic motion language: I animated auras to float and pulse like breathing, not bounce or pop
- Naturalistic color system: I selected sage, cream, soft yellow-green to evoke calm outdoor spaces rather than digital brightness
User Flow
The app transitions through three distinct states: a meditative splash with the pulsing logo, a vibrant aura landing that establishes the emotional palette, then the homepage where glass components emerge over softened auras.
Creating an entry
Tapping "new entry" slides in a glass form panel over softened auras. The user writes freely, selects an emotional state from the tag grid, and saves. The entry appears on the homepage grouped under its emotion.
The six default states are just a starting point. Users can create their own emotional vocabulary: type a name, pick a color from a curated palette, and the new state becomes a first-class citizen with its own aura, tag, and section on the homepage.
Why auras, not icons?
A smiley face reduces "happy" to a single expression. An aura, a soft, glowing, breathing orb of color, captures the ambient and diffuse nature of real emotion.
The logo is built from overlapping auras converging into a unified core, representing how all states coexist within one self.
Why lowercase?
Capital letters carry authority; they announce and command attention. Lowercase text whispers. For a journaling app that's meant to feel like a safe, quiet space, the typographic choice reinforces the calm, un-demanding tone of the entire interface.
Why Liquid Glass?
Glassmorphism is a metaphor for emotional transparency. The frosted layers let background auras bleed through, suggesting that emotions are always present beneath the surface. The distortion filter adds an organic, imperfect quality that flat UI can't achieve.