Daily Moo Mood

Cow-Themed Emotional Wellness Tracker

Hackathon UI/UX Design Wellness

Team (3)

Michelle Chen, UI/Front-end Lead (me)
Cathy Chen
Jerry Chen

Timeline

RoseHack 2025

Tools

Figma React Alpine.js Tailwind CSS ASP.NET Core MVC SQLite JavaScript HTML5 CSS

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 field, and calendar in a calm blue and green visual style.
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.

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.

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.

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.

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.

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.

Let's build something
that ships.