Skip to main content

Daily Moo Mood

Cow-Themed Emotional Wellness Tracker
HackathonUI/UX DesignWellness
Team (3)
Michelle Chen, UI/Front-end Lead (me), Cathy Chen, Jerry Chen
Timeline RoseHack 2025
Tools
FigmaFigmaReactReactAlpine.jsAlpine.jsTailwind CSSTailwind CSSASP.NET Core MVCASP.NET Core MVCSQLiteSQLiteJavaScriptJavaScriptHTML5HTML5CSSCSS
    View on Devpost
    Daily Moo Mood interface showing the MooYourMood selector, comment field, and calendar in a calm blue and green visual style.
    Overview

    A Chill Space for Your Emotions — a bovine-themed emotional wellness tracker from RoseHack 2025 that makes self-reflection feel approachable instead of clinical.

    Daily Moo Mood interface showing the MooYourMood selector, comment box, and calendar in a calm blue and green visual style

    Core interface snapshot: mood selection, contextual comment input, and calendar-based longitudinal tracking.

    Strategist's Note

    The cow is not just branding. It is a neutral, non-judgmental mascot that lowers the psychological barrier to reporting negative emotions.

    In a wellness market that often feels medicalized, the bovine aesthetic creates psychological safety. Users can acknowledge “Awful” or “Bad” days without the weight of clinical stigma.

    Core value proposition

    Reduce emotional check-ins to a simple, friendly ritual that users can actually sustain under stress.

    Problem Statement

    Navigating a Fast-Paced World

    Modern life demands high-velocity performance, yet offers few intuitive tools for emotional maintenance. Journaling can feel high-effort, while many wellness apps introduce too much complexity at the exact moment a user has the least emotional bandwidth.

    Stress / Clutter
    • Journaling fatigue
    • Overly clinical wellness flows
    • Too much cognitive effort for daily use
    • No quick path from emotion to action
    →
    Daily Moo Mood
    • 5-stage visual Likert scale
    • Low-pressure comment field
    • Actionable “Clues to Fix” support
    • Calendar view for pattern recognition
    Strategist's Note: Reducing Cognitive Load

    We identified a gap between high-effort journaling apps and passive health trackers. By using a 5-stage Likert scale represented by cow icons, the product minimizes the paradox of choice and makes emotional logging fast enough for stressed users to actually complete.

    Project Goals

    Intentionality and Positivity

    The goal was to design more than a logger. The product needed to create a complete pathway from reflection to recovery.

    Reflection

    Provide an immediate guided pause in the user's day so self-check-ins feel lightweight and emotionally safe.

    Resilience

    Map long-term patterns so users can recognize emotional dips, anticipate them, and respond earlier.

    Action

    Move from passive tracking to intervention through “Clues to Fix” and other actionable wellness prompts.

    Strategist's Note: Moving from Passive to Active

    These goals shaped the hierarchy of the MooYourMood selector and the Clues to Fix feature. The product was designed so it does not simply record how users feel. It attempts to help them feel better next.

    Key Solutions

    From Mood Logging to Actionable Care

    The team worked through a disciplined User-Centered Design process inside a 24-hour hackathon sprint, balancing design quality, technical feasibility, and competition pressure.

    Phase 01 · Research & Ideation

    Relatable Mood Spectrum

    Relatable mood spectrum: Awful to Rad, not clinical labels.

    The team replaced clinical mood labels with a more relatable spectrum: Awful, Bad, Meh, Good, and Rad.

    Daily Moo Mood landing page with playful branding, blue sky background, and a welcoming sign-in prompt
    Early branded entry point: approachable, playful, and low-pressure.
    Phase 02 · Prototyping

    Figma to Production UI

    Soft, rounded Figma system shipped as production-ready UI.

    Figma helped translate a soft, rounded, pastel-heavy interface into production-ready frontend components with high fidelity.

    High-fidelity Daily Moo Mood product screen showing mood icons, a comment field, and calendar for long-term tracking
    High-fidelity product state: the final mood selector and tracking view used in the hackathon prototype.
    Phase 03 · Testing

    Iteration

    Post comment added: users needed qualitative context, fast.

    Sprint feedback showed users needed qualitative context, which led to the rapid addition of the Post comment feature.

    Additional Daily Moo Mood project photo from the RoseHack 2025 asset folder
    Sprint iteration: refining the mood check-in flow under hackathon time pressure.
    Strategist's Note: Iterative Validation

    The move from raw concept to 2nd Place was driven by iteration. Each round of testing helped eliminate UI friction and technical rough edges, making the solution feel closer to a production-ready product than a one-off demo.

    Design Process

    From Concept to Competition

    Daily Moo Mood guides users through a complete emotional check-in loop: select a mood, add context, receive support, and track patterns over time.

    5.1 The MooYourMood Interface

    MooYourMood interface with five color-coded cow icons and a post comment field below
    MooYourMood interface: five mood states with optional post comment for context.
    • 5-stage mood selector: vibrant visual states make emotional check-in instant and intuitive.
    • Post comment: a low-pressure journaling field helps users attach context without committing to a full diary entry.
    • Personalized session state: UI copy like “Welcome! Cathy Chen.” builds a sense of ownership and continuity.

    5.2 “Clues to Fix”: Actionable Care

    Clues to Fix screen featuring a floral plate used as a calming visual frame for a deep breathing meditation prompt
    The “Clues to Fix” screen reframes support as a gentle, daily-serving ritual rather than a clinical intervention.

    A prominent feature is the Deep Breathing Meditation, presented on a decorative floral plate.

    Strategist's Note: Normalizing Self-Care

    The plate is a deliberate domestic metaphor. It frames mental health support as a daily serving of care, something familiar, routine, and accessible.

    • Makes meditation feel less intimidating
    • Turns support into a clear next step
    • Connects reflection to recovery in the same flow

    5.3 Longitudinal Emotional Tracking

    The calendar view gives users a clean, high-level way to visualize emotional trends over time.

    • Supports pattern recognition
    • Helps identify environmental triggers
    • Makes “Rad” streaks visible and motivating
    Calendar view within Daily Moo Mood showing a monthly layout used for long-term emotional tracking
    Calendar view: monthly layout for long-term emotional tracking.
    Technical Implementation

    Fast Collaboration, High Fidelity

    Efficiency was critical. The project succeeded because design and engineering moved in sync, allowing the team to ship a polished experience within hours.

    Category Tools Used
    Frontend Framework React, Alpine.js
    Styling Tailwind CSS
    Backend / API ASP.NET Core MVC
    Database SQLite
    Languages JavaScript, HTML5, CSS
    Strategist's Note: Rapid Style Deployment

    Tailwind CSS enabled the team to implement the app’s soft shadows and custom “chill” palette directly in markup, reducing styling overhead and helping the React frontend stay visually faithful to the Figma vision.

    Impact & Reflection

    Beyond the Hackathon

    RoseHack 2025 presentation photo showing the Daily Moo Mood team and the project displayed on a laptop during judging

    RoseHack 2025 presentation moment: Daily Moo Mood was recognized with 2nd Place.

    Winning 2nd Place at RoseHack 2025 validated the team’s belief that mental health tools can be both whimsical and effective.

    For Cathy Chen, Jerry Chen, and Michelle Chen, the project became a compact but intense exercise in collaborative growth, rapid prototyping, and emotionally aware product strategy.

    Strategist's Note: A Template for Sustainable Habit-Building

    Daily Moo Mood demonstrates that when emotional tracking is designed with empathy and whimsy, it stops feeling like a chore and starts feeling like a sustainable habit.

    Future Vision

    Opportunities to Scale

    AI-Driven Mood Analysis

    Use NLP to extract deeper sentiment trends from user comments.

    Advanced Data Insights

    Explore correlations between mood data and factors like sleep or weather.

    Personalized Interventions

    Tailor “Clues to Fix” suggestions based on each user’s historical success patterns.

    Project Vision Achieved

    Daily Moo Mood successfully created a chill space for emotions. By combining a playful bovine aesthetic, actionable wellness interventions, and a robust technical foundation, the product lowered the barrier to emotional resilience in a way that felt approachable, memorable, and award-worthy.

    View on Devpost

    Next Projects

    Pic2Split
    Pic2Split
    End-to-End Design of a Social Bill-Splitting Web App
    ConsumerWeb AppAIB2C

    Pic2Split

    End-to-End Design of a Social Bill-Splitting Web App
    ConsumerWeb AppAIB2C
    Indigenous Cultural Museums
    Indigenous Cultural Museums
    WCAG AA Compliant Website for 30 Museums
    PublicWebsitePublic SectorAccessibility

    Indigenous Cultural Museums

    WCAG AA Compliant Website for 30 Museums
    PublicWebsitePublic SectorAccessibility