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.
Target 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 otehr 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.
In the MoodCast UI Style Guide, I included color scheme, typography, logos, buttons, and icons. I included the gradient in the color scheme as well since it is intergral to the app's
UI visual.
Interactive Prototype
This project left room for a lot of though regarding how data collection has to be processed and compared with real-life weather reports, which makes it complicated to display all kinds of data. When doing my initial research on weather's impact on mood, I found a lot of academic studies that went in depth with the psychological effects depending on the climate of certain areas. It was a bit overwhelming to consider all these aspects since I was going a bit beyond just self-tracking.
Some things I wish I could work on more is the accessibility of the visuals/design in terms of inclusive design or designing for color blindness, as well as a new way of making people want to keep using the app, which directly impacts the longevity of interfaces like these. I would also have liked to include a screen about mindfulness method examples to potentially help users to take advantage of good weather/prepare for bad weather, but I felt out of my depth with how complicated it could get with the ideas I could suggest for these methods.
I got some good feedback from family about not giving the user too many choices with the mood slider, since the color changes would make it confusing for users to tell apart the intensity of the moods when viewing them in the weather impact analysis screen. This helped me narrow down some final pragmatic elements of the design.
Overall, I enjoyed this process and learned a lot about user-focused designing, which I do not have much experience of. It is definitely a whole new world when it comes to designing for interactions instead of just a static visual.