Mood Hues
Your pocket-sized emotional companion
Role
Sole Product Designer
Timeline
4 weeks (iOS + Android, end-to-end)
Tools
Figma · Adobe CC
Project
CareerFoundry Native-app brief
Challenge
Capture emotions without oversimplifying feelings, and surface real-time support.
Target
Adults seeking self-reflection tools who feel existing mood trackers are one-note.
Solution
Inspired by Brené Brown's research on emotional granularity, Mood Hues lets you name and layer complex feelings. Track grief mixed with relief. Log anger tinged with disappointment. Understanding starts with naming what you actually feel.
6 of 7 testers
logged a complex, multi-emotion entry without help
2× faster navigation
Average 1 min 10 s → 35 s after hierarchy tweaks and smart logging presets.
The gradients are beautiful
What every tester said about the visual approach to emotions.
n = 7 usability participants
The gap
CareerFoundry asked for a native app. I chose mood tracking because existing apps frustrated me, I'd feel angry, betrayed, and grief all at once, but logging each emotion meant tedious back-and-forth navigation.
Research revealed I wasn't alone. Most apps oversimplify emotions or make complex logging a chore. Inspired by Brené Brown's work, "if you can name it, you can tame it," I designed for emotional complexity.
Three pivotal moves
Gradient-coded Mood Cards
Colors that blend like real emotions do. Testers loved how the gradients made emotional complexity feel natural and beautiful.
Care alerts
When patterns emerge, gentle nudges connect you to support. All 7 testers called this thoughtful, not preachy.
Layered Emotion Logging
Log multiple feelings in one flow. No more back-and-forth. One tester said: "Finally, an app that gets that I can be sad AND relieved"
Steps
Focus
Outcome
1
Research & empathize – 3 app scans (competitive analysis)
Pain points mapped
2
Low/Mid-fi wireframes (iOS + Android)
Early tests flagged hierarchy issues
3
Hi-fi prototype & usability - 7 users
Completion ↑ to 86 %, nav time ↓ 2×
4
Polished visuals, privacy copy, cross-platform QA
Branding + gradients finalized
Learnings
Emotion ≠ one-word
Layered logging resonated. One tester: "I never realized I could feel grateful and guilty at the same time until I could log both."
Hierarchy drives navigation
Clear visual hierarchy cut navigation time in half. Sometimes the basics matter most.
Next up
Building my vision: an AI companion that changes colors with your moods. Think Duolingo owl meets mood ring, because everyone deserves an empathetic friend in their pocket.
The Vision Behind the Gradients
Colors blend. Emotions do too.
The gradient approach came from my own experience, feeling multiple emotions that existing apps couldn't capture. While this version uses static gradients, I'm learning Rive to create what I really envision: a companion that morphs and flows with your emotional state.
This student project was just the beginning. The real goal? Make emotional awareness as engaging as language learning, because mental health deserves emotional and empathetic design.
© 2025 by IvanAtlas