Health• Emotion
MoonLog
MoodLog is the platform that can help people to reflect the mood and user to manage their emotions.
A guide surrounded by emotional states
Moodlog
Health & Lifestyle Tool
Main Role
Product Designer & Creative Lead
Front-end Developer
Full-Stack Designer
Duration
10 weeks
Timeline
2025 March - May
Project Type
Tracking & Mental Wellness
Project Overview
MoonLog is an interactive, mindful mood-tracking web application designed to help users navigate their emotional landscape through intuitive daily logging and reflective journaling. By transforming abstract feelings into visual patterns, the platform bridges the gap between daily emotional fluctuations and long-term mental clarity.
My contribution
As the Product Designer and Front-end Developer for MoodLog, I led the project from conceptual narrative to a functional, high-fidelity web application by integrating UX research, emotional storytelling, and technical implementation. My work included defining the project's narrative structure and user personas to ensure an empathetic interface, while also architecting the "Mood Booth" flow to simplify traditional mood-tracking into a cohesive three-module experience. On the design side, I established the visual identity through custom emotion icons and a responsive, card-based layout featuring contextual feedback loops for tailored user reflection. Technically, I co-developed the application using HTML5, CSS3, and Vanilla JavaScript, ensuring high-fidelity design restoration and engineering data persistence via localStorage and sessionStorage to allow local journal archiving without a complex backend
Research
The Challenge
Overcoming "Journaling Fatigue"Traditional mood-tracking apps often feel like a chore, leading to high drop-off rates. Our research identified that users feel overwhelmed by blank pages and clinical interfaces.
Key Insights & Solutions:
Empathy-Driven Navigation
Visual Literacy
Privacy-First Architecture
Design Development
Coding Development
Component design
How are you feeling right now?
Welcome to MoodShop!
Peaceful
-
4-19-25
[7:05 AM]
Worried
-
4-17-25
[10:43 AM]
Proud
-
4-16-25
[6:29 PM]
Peaceful
-
4-19-25
[10:43 AM]
Definition
A natural response to loss, disappointment, or emotional pain.
Save
Save
Save
Save
What helped you feel calm today? Was there a moment where you truly felt at ease? write your thoughts...
Welcome to MoodShop!
Archive
Peaceful
-
4-19-25
[7:05 AM]
Worried
-
4-17-25
[10:43 AM]
Proud
-
4-16-25
[6:29 PM]
Happy
Happy
Happy
Mobile-side
Calm
Happy
Sad
Angry
placeholder
Anxious
Hey, how are you feeling today?
Definition
Uneasy tension about potential threats or uncertainty.
Definition
Uneasy tension about potential threats or uncertainty.
Calm
Happy
Sad
Angry
placeholder
Anxious
Hey, how are you feeling today?
Definition
Tap an emotion to see its definition, tap the same one again to select it.
Disappointed
Lonely
Grieving
Lets try to get a bit more specific
Definition
Let down when hopes or expectations aren't met.
Definition
Let down when hopes or expectations aren't met.
Disappointed
Lonely
Grieving
Lets try to get a bit more specific
Definition
Let down when hopes or expectations aren't met.
Definition
Let down when hopes or expectations aren't met.
Which expectation fell short today?
Definition
Let down when hopes or expectations aren't met.
Disappointed
Reflect on feeling in journal
Which expectation fell short today?
Definition
Let down when hopes or expectations aren't met.
Disappointed
Reflect on feeling in journal
Which expectation fell short today?
Definition
Let down when hopes or expectations aren't met.
Disappointed
Reflect on feeling in journal
Archive
Peaceful
-
4-19-25
[7:05 AM]
Worried
-
4-17-25
[10:43 AM]
Proud
-
4-16-25
[6:29 PM]
May 25, 2025
What helped you feel calm today? Was there a moment where you truly felt at ease? write your thoughts...
Save
Web-side
Happy
Sad
Calm
Anxious
Hey, how are you feeling today?
Definition
Uneasy tension about potential threats or uncertainty.
Angry
Angry
Happy
Sad
Calm
Anxious
Welcome to MoodShop!
Hey, how are you feeling today?
Definition
Uneasy tension about potential threats or uncertainty.
Annoyed
Resentful
Frustrated
Definition
Lingering bitterness over unfairness.
Excited
Proud
Playful
Definition
Satisfaction from an achievement or quality.
Nervous
Worried
Insecure
Welcome to MoodShop!
Lets try to get a bit more specific
Definition
Doubt about your worth or abilities.
Disappointed
Lonely
Grieving
Welcome to MoodShop!
Lets try to get a bit more specific
Definition
Let down when hopes or expectations aren't met.
Annoyed
Resentful
Frustrated
Welcome to MoodShop!
Lets try to get a bit more specific
Definition
Lingering bitterness over unfairness.
Excited
Reflect on feeling in journal
Definition
Enthusiastic anticipation for what’s ahead.
What future event sparks this excitement?
Excited
Reflect on feeling in journal
Definition
Enthusiastic anticipation for what’s ahead.
What future event sparks this excitement?
Nervous
Reflect on feeling in journal
Definition
Fluttery tension before something specific.
What upcoming moment feels risky or scary?
Annoyed
Reflect on feeling in journal
Definition
Mild irritation at minor offenses.
Describe the small thing that bugged you.
Disappointed
Reflect on feeling in journal
Definition
Let down when hopes aren’t met.
Which expectation fell short today?
Proud
Reflect on feeling in journal
Definition
Satisfaction from an achievement or quality.
Which win makes you feel proud today?
Proud
Reflect on feeling in journal
Definition
Satisfaction from an achievement or quality.
Which win makes you feel proud today?
Worried
Reflect on feeling in journal
Definition
Repetitive thoughts about negative outcomes.
List out the ‘what‑ifs’ looping in your mind
Lonely
Reflect on feeling in journal
Definition
Sense of social or emotional isolation.
Who could you reach out to, even briefly?
Resentful
Reflect on feeling in journal
Definition
Lingering bitterness over unfairness.
What unmet need sits beneath the resentment?
Playful
Reflect on feeling in journal
Definition
Light‑hearted urge for fun and spontaneity.
Describe a small moment of play you enjoyed
Playful
Reflect on feeling in journal
Definition
Light‑hearted urge for fun and spontaneity.
Describe a small moment of play you enjoyed
Insecure
Reflect on feeling in journal
Definition
Doubt about your worth or abilities.
Try to name one strength that challenges the doubt
Grieving
Reflect on feeling in journal
Definition
Deep sorrow after a significant loss.
Write down a memory you cherish about what’s gone.
Frustrated
Reflect on feeling in journal
Definition
Blocked from a goal despite effort.
What obstacle triggered this frustration?
Welcome to MoodShop!
Vanilla JavaScript Interactions
I engineered the interaction model using pure Vanilla JavaScript to handle complex state changes without dependencies.
Hover-Based Definitions: Utilizing hover-script.js, I implemented event listeners that dynamically update the UI based on cursor position, offering immediate emotional definitions.
Contextual Feedback Loops: Programmed conditional logic to trigger "speech bubble" prompts that adapt to previous input, creating a conversational UI.
Client-Side Persistence
Given the sensitive nature of mood tracking, I prioritized user privacy by architecting a "Zero-Backend" solution using the Web Storage API.
Local & Session Storage: User data is serialized via JSON.stringify and stored directly within the browser.
Data Sovereignty: Personal journal entries never leave the user's device, creating a secure archive without requiring login credentials.
High-Fidelity Transition
Translating the design from Figma to code required a strict adherence to semantic HTML and modern CSS methodologies.
Responsive Fluidity
I utilized Flexbox architecture and CSS Media Queries to ensure the layout adapts fluidly. The "Mood Booth" module resizes grid elements dynamically, maintaining touch targets on mobile while utilizing whitespace effectively on desktop.
Pixel Perfection
The build maintains 1:1 fidelity with the high-definition prototypes, ensuring that gradients, shadows, and transition timings were implemented exactly as envisioned.
Inclusive Engineering & Accessibility
Code is only as good as it is usable. I implemented technical accessibility standards to ensure MoodLog is usable by everyone.
Semantic Tags (<nav>, <main>)
Keyboard Nav (Tab & Enter)
Descriptive Alt Text
Back to home
Interest in the logic?
View Repository
Back to home
Interest in the Design?
View Repository