MoodSteady

• 

  Home Page

• 

  Color Selection

• 

  Analysis Page

• 

  Smart Room Page

Inspiration

MoodSteady was inspired by a simple idea: what if your room could respond to how you feel? We were interested in how color affects mood, focus, and stress, and wanted to connect that with wearable biometric data instead of making wellness tracking stay passive and numbers-only. That led us to designing a system where lighting becomes part of emotional support.

What it does

MoodSteady is a personalized wellness system that uses biometric sensing and adaptive color environments to help users shift from stress and overload to calm, focus, and emotional balance.

The app connects to a wearable device, reads signals like heart rate and HRV, and estimates the user’s current state. It then recommends a color environment, explains why that color was chosen, and lets the user apply it to a connected room lighting setup. Over time, it learns which colors work best for each user.

How we built it

We built MoodSteady as an interactive prototype focused on the experience of biometric-responsive environments. We mapped the user flow across key screens: home dashboard, color selection, “Why this color?”, personalization insights, device connection, and room preview.

We designed the UI in Figma with a soft, floating, liquid-glass aesthetic. To make the logic feel believable, we centered the prototype around this idea:

$$ f(\text{biometrics}, \text{context}, \text{history}) \rightarrow \text{personalized color recommendation} $$

This means the app’s output depends on current body signals, the user’s situation, and past feedback.

Challenges we ran into

One challenge was making the concept feel both innovative and believable. MoodSteady combines biometrics, emotion analysis, color psychology, and smart lighting, so it was easy for the experience to become too complicated.

Another challenge was tone. We wanted the app to feel supportive, not overly clinical or like it was diagnosing emotions too confidently. We also had to figure out how to visualize emotional state in a more sensory and calming way instead of using only charts and data panels.

Accomplishments that we're proud of

We are proud that MoodSteady feels like more than a mood-tracking app. It actively turns emotional insight into environmental change.

We are especially proud of:

• adaptive personalization, which makes the experience feel user-specific
• “Why this color?” explanations, which make the recommendations transparent
• environmental preview and smart lighting connection, which make the idea feel tangible and immersive

What we learned

We learned that wellness technology becomes much stronger when it helps users act on data, not just view it. We also learned that transparency is important in personalized systems, especially when recommendations are based on sensitive signals.

On the design side, we learned that abstract emotional ideas are often communicated better through atmosphere, color, and motion than through numbers alone.

What's next for MoodSteady

Next, we want to connect MoodSteady to real wearable APIs and real smart lighting systems so the experience can work outside the prototype. We also want to improve the adaptive system so it can learn from time of day, routines, and longer-term user feedback.

In the future, MoodSteady could expand beyond individuals into shared spaces like classrooms, study rooms, offices, or therapy environments, creating spaces that adapt to the people inside them.

Built With

• and-motion-(framer-motion)-for-smooth-animations.-the-prototype-uses-mock-integrations-for-apple-healthkit/watch-biometric-apis-and-smart-home-lighting-apis-like-philips-hue-and-homekit
• css
• ml
• motion
• postgresql
• postgresql-database
• react
• react-router-for-navigation
• router
• supabase
• tailwind
• tailwind-css-v4-for-the-premium-pastel-design-system
• typescript
• with-plans-to-add-supabase/firebase-backend