Team Tools Timeline
Individual HTML/CSS/JS Jan. 2021- May 2021
Brief
Paint by Mood is a meditative website that aims to quickly improve your mood by generating an interactive surprise paint by number, playing music and displaying quotes, all correlating to how you’re feeling.
The Problem
We all experience negative mood states, but how we respond to those emotions is different for all of us. If we don’t practice emotion regulation or prioritize improving our mood state then that can lead to more serious mental health issues down the line. There’s a scientific journal [1] that examines the positive relationship between emotion regulation and mental health.
Research Plan
Topic
Combining technology and art to improve mood levels
Background
This research was done to see how interested people would be in using a website where paint by numbers, music, and quotes would be used in conjunction to improve mood.
Goals
To collect data on whether paint by mood would be effective and how it might be used as well as get a sense of people's interest levels
Survey Questions
1. Is the idea of digitally painting a surprise paint by number in 15-20 min appealing?
2. When and where would you use Paint by Mood?
3. Do you see yourself using Paint by Mood instead of physically painting or coloring?
4. Do you think Paint by Mood would be effective in improving your mood?
5. Do you see yourself or others using Paint by Mood to focus during a zoom lecture?
2. When and where would you use Paint by Mood?
3. Do you see yourself using Paint by Mood instead of physically painting or coloring?
4. Do you think Paint by Mood would be effective in improving your mood?
5. Do you see yourself or others using Paint by Mood to focus during a zoom lecture?
6. What other feedback or comments do you have?
Methodology
Google survey containing a simulation of the project and questions. Survey link was sent through text, email and group chats
Survey Results
In order to get a feel for how people were feeling mentally prior to taking the survey, I wrote some statements, as shown below, and they were asked to check off any that applied to them.
More than half of the people that filled out the survey felt like the don't dedicate enough time to their mental health, have used art to improve their mood, but don't have time to physically paint or color (figure 1). With this information, I could see the value that paint by mood could bring to people and the way it could make a positive impact.
Figure 1.
A someone who sees the benefits to physically painting or coloring, I was concerned that most people wouldn't be as interested in the idea of digital painting. The survey showed that only 15.4% of people would rather physically paint or color, but there was still a high percentage of people who were unsure (figure 2).
Figure 2.
However, I made the assumption that people don't have enough time in their day to physically paint or color, and this turned out to be true for 57.7% of people. Being able to digitally paint something in a short amount of time felt like a viable solution and 92.3% of people found that solution appealing (Figure 3).
Figure 3.
The goal of Paint by Mood is to improve your mood. Seeing that 92.3% of people think it would be effective helped me move forward with this project (Figure 4).
Figure 4.
Scientific Research
Why Paint by Numbers?
This project began with an interest for paint by numbers. Figuring out what to paint or draw tends can be a lengthy or stressful process for some people. Paint by numbers allow you to start painting right away by providing the image and color palette.
I wanted my preference for paint by numbers to be justified by research that proved their effectiveness in improving someone's mood.
There’s a scientific article [2] called “The Influence of Art-Making on Negative Mood States in University Students”, and in the study, university students were divided into three different coloring groups, the first group colored a mandala design, the second group colored a plaid design, and the third group colored on a blank piece of paper. The results showed that anxiety declined significantly in all groups but students who were given a pre-drawn design had more significant reductions in anxiety, depression and tension.
Color and Images
Before I could start designing the paint by numbers, I needed to research the effects of certain colors and images on mood. I created mood boards for four negative mood states (sad, angry, stressed, bored) and determined through research which colors and images had positive impacts on each mood.
Color psychology[5] proves how colors influence our mind and emotions, so I focused on certain colors for each mood. For example, the color red raises your pulse rate and stimulates your mind, that is why the bright colors and color red were chosen for "Bored". The color yellow is associated with laughter, happiness and optimism, also studies [4] show that animals increase serotonin (“happy hormone”) levels in our brain. With that research I gathered pictures of animals and focused on yellow for the "Sad" mood board. "Angry" and "Stressed" have a similar color palette, but a study [3] I found described how nature, especially fractal patterns, help with stress.
Music
The mental health benefits of listening to music are evident in the correlation between music and mood. A study[6] was done on the psychological functions of music testing, and the responses from 183 individuals revealed that “People today hardly listen to music for social reasons, but instead use it principally to relieve boredom, maintain a pleasant mood, and create a comfortable private space”.
I researched what type of genres help with sadness, anger, stress, and boredom. I found an article[8] which explains that "Listening to music can have a tremendously relaxing effect on our minds and bodies, especially slow, quiet classical music". This is due to the music's ability to slow down your heart rate and lower your stress hormones.
Similar to feeling sad, many people tend to listen to angry music when they are angry. However, that tends to only be effective for people who prefer that type of music. A study[9] showed that listening to classical or calming music is more effective in reducing anger and anxiety. Therefore I opted for slow, ambient and classical music for the stressed and angry playlists. As for boredom, there is a study[10] that explains how listening to music can improve efficiency and foster creativity. For the feeling bored playlist I gathered a mix of genres labeled as inspirational.
Quotes
The use of motivational or inspiring quotes has been a very popularized practice. I found an article[11] that examines the correlation between mental health and motivational quotes. Gathered from various clinical and educational settings, motivational quotes have been observed as "...effectively increasing confidence, motivation, empowerment, and satisfaction in adults struggling with stress, anxiety, depression, mental illness, and substance abuse”.
Design
Paint by numbers
After conducting and gathering all my research on the effects of color, images, music, and quotes on mood, I was ready to work on the design.
I used Adobe Illustrator to create paint by numbers for each mood, and there is a total of 30 unique paint by numbers. Show below are 4 paint by numbers, each one has a specific color palette and pattern/image that relates to how you are feeling (stressed, sad, bored, angry).
Stressed
Sad
Bored
Angry
Logo
I sketched some logos and brainstormed different ways in which I could combine painting and mental health into a single logo.
Once the logo concept was decided, I worked on the final design with the website color palette and font incorporated into it.
Buttons
The concept behind Paint by Mood is that everything is generated based on how you feel. I decided that I wanted the user to make that decision based on images that represented each mood. This way the user is able to abstractly pick which one they resonate with the most. On the website, the faces I designed below are buttons that take you to an interactive experience.
HTML/CSS/JavaScript
I coded a simple HTML/CSS website layout and experimented with p5.js for the painting interface. After some trial and error, I decided to search for open source code that could be directly implemented into my existing code. I found this JavaScript file on Github: https://github.com/collinph/jl-coloringbook.git
I began testing its functionality before making my own changes to the code.
I downloaded music from YouTube's audio library based on the music research. From there I created a javaScript file for each of the negative moods. Each file has an array containing all of the songs chosen for that specific mood. I then repeated this process for the quotes.
UX testing
I implemented my design elements to the website (color, font, images, text, layout) and I launched the site paintbymood.com.
Once the site was live, people began to test the website. The testing and design changes I made based on all feedback are in detail on my blog.
Usability testing outline
Purpose of test
- Receive feedback on usability of website tools
- Ask about layout, colors, icons etc
- Observe how the paint by number is colored
- Obtain mood before and after
- Ask for recommendations for improvement
User Demographic Information
Age:
Occupation:
Gender:
Questions
1. How are you feeling (Bored,Sad, Anxious Angry)?
2. Can you tell me what you think of the tools and buttons?
3. How did you find the experience of coloring the paint by number?
4. What is something you would change?
5. How do you feel now? (testing is over)
Methodology
1:1 in-person session, 15-20 minutes
I conducted multiple testing sessions and based on the feedback I continuously made changes to the website. Changes ranged from re-arranging design elements such as icons, tools, and the navigation bar to fixing browser inconsistencies with the cursor and images.
Survey
I received UX feedback throughout many testing sessions and implemented changes frequently. I wanted emotional feedback on the experience so I sent out a survey to my testers. For many sessions I measured mood changes through observing and asking questions, but the survey allowed me to collect some of the data and present it visually.
Figure 5.
Figure 6.
Sources
1. Hu, Tianqiang, et al. “Relation between Emotion Regulation and Mental Health: A Meta-Analysis Review.” Psychological Reports, vol. 114, no. 2, Apr. 2014, pp. 341–362, doi:10.2466/03.20.PR0.114k22w4.
2. Drake, Crystal R., H. Russell Searight, and Kristina Olson-Pupek. The Influence of Art-Making on Negative Mood States in University Students. American Journal of Applied Psychology 2.3 (2014): 69-72.
3. Hagerhall CM, Laike T, Küller M, Marcheschi E, Boydston C, Taylor RP. Human physiological benefits of viewing nature: EEG responses to exact and statistical fractal patterns. Nonlinear Dynamics Psychol Life Sci. 2015 Jan;19(1):1-12. PMID: 25575556.
4. Wells, D.L. (2009), The Effects of Animals on Human Health and Well‐Being. Journal of Social Issues, 65: 523-543. https://doi.org/10.1111/j.1540-4560.2009.01612.x
5. Cherry, K. (2020, May 28). Can color affect your mood and behavior? https://www.verywellmind.com/color-psychology-2795824#the-psychological-effects-of-color
6. Schäfer T, Sedlmeier P, Städtler C, Huron D. The psychological functions of music listening. Front Psychol. 2013;4:511. Published 2013 Aug 13. doi:10.3389/fpsyg.2013.00511
7. Garrido S, Schubert E. Moody melodies: Do they cheer us up? A study of the effect of sad music on mood. Psychology of Music. 2015;43(2):244-261. doi:10.1177/0305735613501938
8. Collingwood, J. (2016, May 17). The power of music to reduce stress. https://psychcentral.com/lib/the-power-of-music-to-reduce-stress#1
9. Sharman, L., Dingle, G. A. (2015). Extreme metal music and anger processing. Frontiers in Human Neuroscience, 9. doi:10.3389/fnhum.2015.00272
10. Lesiuk, T. (2005). The effect of music listening on work performance. Psychology of Music, 33(2), 173-191. doi:10.1177/0305735605050650
11. Bedrov, Alisa, and Grzegorz Bulaj. Improving Self-Esteem With Motivational Quotes: Opportunities for Digital Health Technologies for People With Chronic Disorders. Frontiers in psychology vol. 9 2126. 2 Nov. 2018, doi:10.3389/fpsyg.2018.02126 (Czuchry and Dansereau, 2005; Kendall et al., 2005; Brann and Sloop, 2006; Marchinko and Clarke, 2011; Littlechild et al., 2013; Poon, 2016)
