MoodCast: Data Dashboard
DATA VISUALIZATION • UI/UX DESIGN • BRANDING DESIGN RESEARCH • DESIGN THINKING •  

Existing mood tracking apps neglect the impact of external factors such as weather conditions. This is why I made an app concept that integrates mood tracking with local weather data to provide users with a deeper understanding of how weather patterns affect their emotional well-being. This app will empower users to gain deeper insights into the correlation between their mood and weather conditions.

Ideally, it will allow users to track their emotional fluctuations in response to different weather patterns, fostering self-awareness and mindfulness. It will encourage users to take an active role in managing their emotional and mental health, ultimately leading to a more ambient-aware lifestyle where users are aware and prepared for all kinds of weather.




ProcessTarget users
my target user demographic consists of:
  • college students who walk around campus
  • outdoorsy people
  • people who get SAD (Seasonal Affective Disorder)

Data Sources
Users will be able to enter mood adjectives, factors, and journal entries. As part of the weather data impact analysis, the app will visualize how mood has fluctuated over the course of a week in respect to the weather/climate.  
Everything I included:
  • mood tracking- keywords (adjectives), mood factors, rating
  • mood keywords can add colors to gradient: like a mood ring
  • weather integration- temperature, highest/lowest, location, sun visibility, precipitation
  • weather impact analysis- graphs showing correlation between: temp and mood, 
precipitation and -- mood, sun visibility and mood. potential word cloud for descriptors
  • significant weather alerts- severity in needed, extreme weather watch (storm, cold wave)
  • journaling- using mood keywords, images sound bytes, files, etc.
  • mood-weather insights- mindfulness methods, info about SAD, serotonin and sunlight
  • location permissions, feedback and support, privacy and security, etc




Ideation Sketches

My first iteration came in the form of an earlier assignment we did in this class. We were told to design 3 distinct interface ideas, represented as minimalist-styled wireframes, that displays the different data points for a self-tracked app concept. One of my concepts (far right) was about showcasing mood data and correlating weather to it to see how daily temperature has affected mood.





In my first attempt at creating multiple wireframes, I went about it without making a user wireflow. I made these low-fidelity wireframes to start visualizing what features to include or not. With my professor's help, I made minor changes to the content and she suggested that I work on making it more visually appealing. 




Wireflow

It helped to make a user wireflow since it acts as a process of elimination. It helped me cut down the number of screens I wanted to include, so that I can focus on the three key tasks I want the app to perform:
  • record mood daily or multiple times a day
  • see how weather and temperature affects mood through visualizations
  • journal about mood
I divided up the screens into cue, routine and reward stages to help with this elimination process. I also included a log in screen since I wanted to specify permissions that the app would require users to grant, such as a location tracking permission to keep track of local weather.


Testing plan and results + feedback

The first part of user testing was to consult my classmates. I asked them their initial feedback and wrote down notes about their feedback. I then read out a script for them to follow through the app and its functions and used that feedback to move onto my next iteration.





Once I made changes to the color scheme (made it more pastel) and spread out the text and other elements on the wireframes, I prepared for another round of user testing in class with a few grad students in our program.
They offered really good feedback that helped me think about my project from a different perspective. It was suggested that I use more interactions and buttons in my wireframes and add more obvious visual indicators for screens with buttons and screens with the sliding buttons. I was also told to make my wireframes less visually crowded.





Moodboard + UI style guide

I wanted to emulate a calming color scheme that was not too bright or too dark. This is based on feedback i got from other classmates who mentioned that some of the colors I had initially chose were a bit to bright in comparison to others.
I wanted it to be inviting and filled with smooth gradients and cloud patterns. I had an idea about using colors seen in mood rings, since I thought it would be nostalgic and familiar to users. The colors on the top left are some of the commonly used colors in mood rings.




Interactive Prototype



Final Thoughts

The project involved complex considerations around data collection and comparing it with real-life weather reports, especially given the extensive academic research on the psychological effects of climate. Balancing this depth with the scope of a self-tracking tool was challenging.

Moving forward, I would focus on improving the accessibility of the visuals, specifically for inclusive design and color blindness. I'd also explore ways to enhance user retention and engagement for long-term interface use. A planned feature, a screen with mindfulness method examples to help users proactively use the weather data, was ultimately scoped out due to complexity.

User feedback from family was valuable, leading to a crucial pragmatic design decision: limiting the choices on the mood slider to prevent confusion with color intensity in the weather impact analysis screen.

Overall, this process was an insightful introduction to user-focused design and the complexities of designing for interactions rather than static visuals.


Athira Vasu © 2025