Elevator pitch
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 text, all correlating to how you’re feeling.
Project Milestones
Week 10 Progress
What were your goals for this week?
My goals for week 10 are to meet with another expert and make any design changes based on their feedback, I also want to code the about page and add the research that I used, and design more paint by numbers.
What did you accomplish, please reflect on your time management. What worked or didn't?
I met with a design expert and implemented multiple changes, I coded an about section with a lot of content, and sent out the form to a few more people.
How did you integrate feedback?
I integrated almost all the feedback I received from the expert meeting and will continue collect feedback from my form.
What was unexpected / what lessons did you learn?
It was unexpected how long I worked on the about section, this led to me not creating more paint by numbers like I had planned.
HTML/CSS/JavaScript
Some design changes I made to the website included the logo, the outlines on the color palettes, and the cursor images. Alia mentioned it would be difficult to find or know where the about link is located. I initially was going to code a separate about page but decided to keep it in the home page for easy access. I added an arrow for more indication, and a short summary of the website. I had a lot of research I wanted to include but I didn't want too much visible text on the screen. The best solution I found was to create an accordion menu so information could be hidden and revealed. I was also able to separate the research into categories this way.
Expert Meeting
Alia Ormut: Senior Product Designer
Meeting: 3/19
Notes:
Looked for about link, need more context for website
Logo = enlarge green background, more negative space, make the strokes more similar
possibly background colors on the icons
instructional text below how you are feeling
"I picked my emotion what is this supposed to do for me"
drop white outline around colors in the palette, make black outline solid instead of dotted
music: instructional text
on top of canvas="how and why they should color"
different perspectives on eraser and brush as well as strokes
intention for reading quote? text to help you know what you are looking at
explanatory text --> banner, collapse
Form/Survey Results
Design
before after
Week 9 Progress
What were your goals for this week?
My goals for week 9 are to meet with a coding expert to troubleshoot a problem in my code, I hope I can fix the brush issue I'm having in safari. I also want to find/add more quotes to the website, make more paint by numbers and send the google form to more people.
What did you accomplish, please reflect on your time management. What worked or didn't?
I found a different solution to the brush/cursor problem in Safari, I found/added more quotes for each mood, made 4 more paint by numbers and sent the google form to a few people.
How did you integrate feedback?
I integrated feedback from a developer/javascript expert, this lead to me experimenting and finding a different coding solution.
What was unexpected / what lessons did you learn?
I learned that if something isn't working, I shouldn't get caught up in keeping things the same or trying to find only one solution.
HTML/CSS/JavaScript
The main coding changes I made were in the jl-coloringBook.js file, after meeting with a javascript expert, we settled on the conclusion that there was no easy fix to the cursor problems in safari. I was advised to find a more creative solution and after being informed that the issue was most likely being caused by the jquery canvas or url, I figured out that I could replace the url with an image. I created 5 icons (representing the different brush sizes), and depending on the slider input, the image changes. I repeated this with the eraser as well.
Expert Meeting:
David Mazza: Developer and Javascript mentor (8 years of experience), iOS (7 years of experience)
Meeting: 3/12
Notes:
Website was easy to navigate
In Chrome, can see the style attribute updating in realtime with image data as the cursor grows
In Safari, the style attribute never updates with new image data
Error is most likely occurring with wrapper or canvas and url
There isn't one solution, will have to work around it
Suggests finding a way to reset or refresh the url associated with the canvas
Check where the setCursor() or updateSize() are being called
Try more created approaches
Survey
I didn't send out the survey to many people this week because I wanted to finish the cursor changes first.
Quotes
I added more quotes to the website, each mood array now has about 20 quotes
Paint by Numbers
Week 8 Progress
What were your goals for this week?
Week 8 Goals: My goals for week 8 are to meet with one of my experts and implement any changes they suggest, create more paint by numbers, find more quotes, and create a google form containing a link to my website and questions.
What did you accomplish, please reflect on your time management. What worked or didn't?
I accomplished all of my goals for week 8, I met with one of my experts, implemented some changed, created 8 new paint by numbers, and created a google form as well as sent it to a group of students.
How did you integrate feedback?
I met with one of my experts last week and I integrated/experimented with the main feedback that was given.
What was unexpected / what lessons did you learn?
I sent the google form and a quick description of my website to a group chat of about 70 students and I wasn't expecting to receive so little responses. I learned that I need to find another way to gain responses because these students might be busy, forgot, weren't interested, didn't want to try something aimed to improve mood. I have to take into account all of these factors.
HTML/CSS/JavaScript
The main code changes I made were to the navigation bar, I was recommended to remove the "contact", "home", "about" links at the top and move them to another location. I experimented with different designs and I'm still deciding what works best. Another small change I made was adding a border to the paint by number canvas.
Expert Meeting
3/4 - Arielle Hein
Notes:
Set padding to 0px so there is no gaps beside navigation bar/footer
Make logo click back to home
remove "about", "contact", "home" links, move them to bottom
Work on navigation bar/logo design
Recommended more pattern/abstract paint by numbers
Survey
I created a google form and sent it to a group chat of many students, I'm waiting to gather more responses in order to show the results as bar/pie chart.
Paint by Numbers
Week 7 Progress
What were your goals for this week?
My goals for week 7 are to make some stylistic changes to the website. Move and change the audio controls so they are more obvious and have the name/artist of the song. Create more paint by numbers, add more quotes, and start setting up a survey.
What did you accomplish, please reflect on your time management. What worked or didn't?
I made many stylistic/layout changes to the website, I changed the audio controls and re-added music to each playlist along with title/artist. I created 3 new paint by numbers, I planned on creating more but I spent a lot of time fixing the existing ones. I didn't have time to start setting up the survey.
How did you integrate feedback?
I integrated all the feedback I received from last week, this included the palette colors, having the quote gradually appear, audio controls, layout, graphics, adding artist/title for songs.
What was unexpected / what lessons did you learn?
I did not expect to still be making changes to the existing paint by numbers, I learned that everything can still be improved or might need unexpected changes.
HTML/CSS/JavaScript
I made changes to the layout based on feedback from my previous user tests and the class presentation. The audio controls needed a lot of improvement, it was unclear that the buttons were meant for music, they weren't easily seen on the page and there was no title/artist description for the songs. I had to re-download all the songs because I had re-named them to stressed1, stressed2 etc. Each playlist currently has 30 songs and I designed a mini audio container that has the title/artist for each song. I made the size brush slider more obvious by setting a brush icon behind it. I removed the labels from the illustrations on the home page, made the quote slowly fade in, changed the location of some buttons, made the canvas larger, and added more colors.
Website:
Adobe Illustrator
Since I added 5 more colors to the color palette and many people liked the idea of organizing the colors rather than having them randomly scattered, this meant that I had to change the numbers of all the paint by numbers. Since I also changed the canvas size to be more landscape, I had to scale all of the paint by numbers.
Paint by Numbers
I created three new paint by numbers.
Week 6 Progress
What were your goals for this week?
My goals for week 6 are to find a new font for the website, create custom images for the moods on the home screen, create more paint by numbers, and conduct more HX tests
What did you accomplish, please reflect on your time management. What worked or didn't?
I accomplished all my goals for the first week, I started with fixing the font so it would look consistent in all the browsers, I made tweaks to the navigation bar, created 6 custom images for the home screen, designed 4 more paint by numbers.
How did you integrate feedback?
I integrated some design feedback and from a quick HX test I noted that I need to work on making the audio playlist more obvious and accessible.
What was unexpected / what lessons did you learn?
I learned that even though my website has all the elements it needs to work there still are many layout/design changes I can continue making.
HTML/CSS/JavaScript
The changes I made to the code included making tweaks to the navigation bar. I was also going to pick a new font but realized that I could keep Brandon Grotesque because I hadn't imported the font on css. I added the new paint by numbers to the randomize code and the graphics to the home screen.
Website: I updated the website to the latest changes https://paintbymood.com
Adobe Illustrator: Graphics
I wanted the designs for the home screen to look like abstract faces that reflected the four moods (bored, angry,sad,stressed).
Adobe Illustrator: Paint by Numbers
Week 5 Progress
What were your goals for this week?
My goals for week 5 are to have an audio playlist for each mood implemented, I also want to work on the layout of the numbers so they look consistent in each browser, create more paint by numbers, and if I get everything finished I will conduct another HX-test.
What did you accomplish, please reflect on your time management. What worked or didn't?
For week 5 I implemented the audio playlists for each mood, I finished the audio code and added the audio controls to each html page. I also researched the effects of types of music on mood. Based on what I found I started downloading music from YouTube's Audio Library and adding it to it's designated folder. I also fixed the browser issue I was having with one of the images on my website. I didn't have time to make more paint by numbers, I spent the majority of the week working on the music and website errors.
How did you integrate feedback?
I integrated feedback by conducting research and using scientific studies rather than personal opinions to drive my music selections. I was advised to to use more research when making decisions and I plan to continue to find reliable resources.
What was unexpected / what lessons did you learn?
I learned that it's important to tackle minor issues right away because I did not expect to spend so many hours fixing a layout issue. It's better to tackle those issues early on.
HTML/CSS/Javascript - Layout
issue: Inconsistencies among browsers (ex:google chrome and safari). I spent the majority of the week trying to fix the layout of the numbers. The numbers are a png image positioned on top of the color palette, I tried every combination of css code I could think of and I was still having the same issue. However, I decided to remove the picture of the numbers and went through the jl-coloring book javascript code and I added code to the generatePalette() function that allowed me to add a background picture to each of the colors.
resolved:
In Adobe Ilustrator I created squares that matched the color palette and added the numbers. I exported them as .svg and used css to change the background of the palettecolor backgrounds. This has resolved the issue and the numbers look consistent in the different browsers.
HTML/CSS/Javascript - Music Playlists
I worked on implementing a custom music playlist for each of the moods. I wanted to create custom audio controls instead of using the html default because I want there to be many songs that could be skipped/replayed. I used this video as a resource https://www.youtube.com/watch?v=Dm72PS7GZDs . My audio player is a very simplified version of the one from the video, I mostly wanted to know what the code looked like for buttons to forward/rewind. The music isn't the visual focus so the controls are just three buttons.
Live Website
I updated the website with my latest changes paintbymood.com
Music Research
Sadness
There were many popular articles that claimed sad music would help with sadness, but I wanted to find a primary source that had a study and results. In this article
1. 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
The study showed that "Both ruminators and non-ruminators experienced similar increases in Depression scores after listening to sad music"
I'm torn because sad music might not make you feel happier and can amplify sadness but there is a stronger preference to sad music among people who feel sad.
mood: happy (I'm debating using one mood over the other or having both)
genre: ambient, pop, classical,
Stress
In "The Power of Music to Reduce Stress" it states that "Listening to music can have a tremendously relaxing effect on our minds and bodies, especially slow, quiet classical music. This type of music can have a beneficial effect on our physiological functions, slowing the pulse and heart rate, lowering blood pressure, and decreasing the levels of stress hormones. Music, in short, can act as a powerful stress management tool in our lives."
mood: calm
genre: ambient, Jazz&Blues, classical, cinematic
Anger
This is similar to feeling sad, there's many articles that state how angry music can calm you down or make you feel better when you're angry, but also calming music such as classical can also be used. After further research I found that angry music has positive effects on those who prefer that type of music. In this article
1. Sharman, L., & Dingle, G. A. (2015). Extreme metal music and anger processing. Frontiers in
Human Neuroscience, 9. doi:10.3389/fnhum.2015.00272
"In a more naturalistic study, Labbé et al. (2007) found that after experiencing a state of induced stress or anger, participants listening to classical music chosen by the experimenter or their own self-selected “calming” music (of any genre) showed significant reductions in anger and anxiety. These reductions were evident in both self-reported ratings and in reduced physiological arousal (heart rate, respiration, and skin conductance) during music listening. In contrast, participants who listened to heavy metal after the stress induction did not reduce self-reported negative emotional states or physiological arousal. However, it is important to note that heavy metal was not a preferred music genre for these participants. "
mood:
genre: classical music
Boredom
In this article "How music makes you more productive" "Teresa Lesiuk of the University of Windsor, Canada, published an important study in 2005, for example, which showed that listening to music helped to improve the efficiency in which one completes tasks and fosters the creation of better ideas."
mood: inspirational
genre: mix
To gather the music I used Youtube Audio Library, this was extremely useful because I was able to filter by mood, genre etc. After the research I dowloaded 15-25 songs for each of the moods (Sad, Stressed, Angry, Bored).
Week 4 Progress
What were your goals for this week?
My goals for week 4 are to conduct another user test, stylize the navigation bar with the final logo/text, code the home screen that will prompt the user to choose how their feeling and have that response generate the paint by number, create more paint by numbers in illustrator, gather quotes/music.
What did you accomplish, please reflect on your time management. What worked or didn't?
I accomplished all of my goals except for gathering music, I started with the user test which I finished during class time. I moved on to the coding of the home page and implementing the randomization of paint by numbers and quotes. I designed the logo, this took longer than I was expecting even though I already had the sketch. I created 3 new paint by numbers, I wanted to design more but I spent most of my time on Adobe Illustrator fixing the paint by numbers from last week.
How did you integrate feedback?
I integrated design feedback from my second user test, the changes included adding a eraser icon, moving the brush size slider, and scaling the paint by numbers so they are similar in height/width. I also received feedback on my logo sketches and designed the top choice.
What was unexpected / what lessons did you learn?
This week was a lot more design heavy and I was not expecting to spend so many hours working on a single design. I would export a logo or paint by number, see an error, change, re-export. This process would repeat for 1-2 hours. I learned that I need to accept minor flaws and move on to the next design so I can have more in the end.
HTML/CSS/Javascript
I worked on the design of the website, such as adding the home page that will prompt the question "How are you feeling". I have grey boxes but they will be replaced with custom designs. I designed the logo and added it to the navigation bar. The website now has the randomization code implemented. For example, if you click "bored" on the home page, a paint by number will be displayed along with the quote, if you refresh the page, the quote and paint by number will change. There's a demo of the current website below.
Human Experience Testing: #2
Purpose of test
Primary get 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: 21
Occupation: Student, CTD Major
Gender: Female
Questions/Responses
- How are you feeling (Bored,Sad, Anxious Angry)?
Stressed
- Can you tell me what you think of the tools and buttons?
Colors are pretty intuitive, could restrict colors, eraser was confusing maybe replace with an
icon. The "x" and print icons made the most sense.
- How did you find the experience of coloring the paint by number?
Enjoyed the music, felt very calming. Suprised by how significantlly distracted and calmer
they felt. The quote made them stop and think.
- What is something you would change?
Change the shades of blue, position the brush size slider below the icons, eraser
- How do you feel now? (testing is over)
Calm
Live Website
I updated the website with the changes I made this week, it is still best viewed on Google paintbymood.com
Paint by Numbers
I created 3 more paint by numbers and since testing the paint by numbers from last week I changed the size, palette colors, and design of most of the paint by numbers.
Logo
I showed a couple people my logo sketches and all of them liked the same one. I kept the design the same and just cleaned it up a little. I also changed the colors to incorporate the new color palette.
Quotes
I created a Javascript file called randomize.js and I have a function for each of the moods, when the function is called it displays a random quote on the screen. The intention of the quotes is to target how you're feeling and make you feel better. Each mood has 10-11 quotes.
Week 3 Progress
What were your goals for this week?
My goals are to improve the layout of my website and edit the open source code I found so it can be more unique. I also plan on establishing the domain name/host for the website. I'm also going to create 2 paint by numbers for each mood (6 total). I will use the paint by numbers for human testing, it will be a rough simulation on the website. I also want to finalize the logo/color palette.
What did you accomplish, please reflect on your time management. What worked or didn't?
I accomplished all of my goals for this week, the majority of my time was spent improving my code and making as many changes as possible to the open source code I found. I also purchased a domain name from Google (paintbymood.com), the site is live and working. I also created some paint by numbers in Adobe Illustrator. I also picked a color palette and font, I implemented it into the website. Once the website had all the elements (painting, text,colors,music) I did some human testing.
How did you integrate feedback?
Important Feedback I received last week was to work on changing/editing the open source code to make it my own. I spent the majority of the week making changes. I also integrated feedback from the human testing that I was able to implement quickly.
What was unexpected / what lessons did you learn?
I was surprised as to how much of the open source code I could customize without breaking the code. I learned that making one small change at a time and checking the results is extremely helpful rather than making multiple changes at once.
HTML/CSS/Javascript
I heavily worked on the open source code https://github.com/collinph/jl-coloringbook.git that I found last week. The first thing I worked on was changing the position of the color palette. Having the palette to the left of the paint by number fills open space and allows the text to be on the top. I was also able to add numbers to the color palette. This was done by using an image and changing the z-index so it would be on top. I added html's default audio controls just so I could quickly implement audio for testing. I also customized the buttons (size, color, shape, location) .
Human Experience Testing
Purpose of test
Primary get 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: 23
Occupation: Nursing Student
Gender: Female
Questions/Responses
- How are you feeling (Bored,Sad, Anxious Angry)?
Bored
- Can you tell me what you think of the tools and buttons?
The colors corresponding to the color palette made sense, assumed the actions of the three buttons correctly. The eraser was confusing, wasn't sure what the red diagonal line meant.
- How did you find the experience of coloring the paint by number?
Wanted to finish in order to see the end product. Dopamine is released when you complete a
tasks, felt that this would apply in the same way.
- What is something you would change?
Maybe add black or white to the color palette, change the eraser so it's more clear, have the
option to mute or skip to next song.
- How do you feel now? (testing is over)
Wasn't bored during the test, but if paint by number was over-complicated could see
themselves getting distracted. Maybe have option to select difficutly or time.
Domain Name
I purchased the domain name for my website, it can now be searched. The website isn't fully finished but I wanted to have it working. paintbymood.com
Paint by Numbers
I created 6 custom paint by numbers in illustrator, 2 for bored, 2 for angry, 2 for sad. The numbers correlate to the color palette on the website. I image traced two of them, deleted shapes, added color, zoomed in. The rest were created using geometric shapes and the paint tool.
Color Palette/Font
I decided that I wanted the website background to be green along with one of the primary colors. Especially now, we spend a lot of hours looking at a screen. I chose green because I read an article that stated "Some scientists and researchers also believe that because our eyes are at the peak of their perception to detect the wavelengths corresponding with the color green, the shade may calm us down. With less strain to perceive the colors, our nervous system can relax when perceiving the tone". The font that I chose for the website is Brandon Grotesque it is described as "a structured sans serif in the 20’s style with a modern aura". Theres also many geometric qualities to the font which I think pair nicely with the canvas and color palette.
Week 2 Progress
What were your goals for this week?
My goals for this week were to to sketch some logos for the website which will be called "Paint by Mood", create some potential color palettes/ look at possible font choices, gather images that could be transformed into paint by numbers for each mood, and improve my existing p5.js code so it has more functionality.
What did you accomplish, please reflect on your time management. What worked or didn't?
I accomplished all my goals for this week, the first things I finished were the logo sketches and color palette/text choices. I spent the majority of my time trying to improve my existing p5.js code and concluded that I needed to change it to HTML/CSS/JavaScript. I also gathered images that I can use for inspiration when designing the different paint by numbers for each mood.
How did you integrate feedback?
I asked some people what type of painting interface would be best (click and fill) or (drag and paint), I decided to continue moving forward with the drag and paint because it requires more precision which can help with concentration. Some feedback I received was to make sure that the paint by numbers are effective and engaging enough to regulate mood, the images I gathered will be used in a survey so I can see which ones are most effective.
What was unexpected / what lessons did you learn?
I was not expecting to remove p5.js from my timeline but I'm glad it happened early. I learned that I shouldn't get stuck on a idea if it's not working or I know it won't work in the future.
Text Editor: HTML/CSS/JavaScript
The biggest realization or change in direction I had this week is transitioning the painting interface from p5.js to HTML/CSS/Javascript. My p5.js code is very simple but it does allow you to color a paint by number. I wanted to improve the code and add more tools such as an eraser, brush size, option for printing etc. However, I couldn't find tutorials or open source code to help me implement this and either way I wasn't satisfied with the quality of the graphics. I decided to do everything in the "Brackets" text editor instead. I found some open source code on GitHub that uses HTML/CSS/JavaScript and allows you to create a customizable coloring book. Link to code: https://github.com/collinph/jl-coloringbook.git
I added this code to my low-fidelity website so I could test it out, I included a video below.
Design: Color Palettes/Text/Icons
The graphics shown below are different design elements for the website. I created 4 different color palettes that I could see myself using for the website, I've been reading about the psychology of color and green/blue align the closest to mental health and improving ones mood. I've also been looking at potential font choices and icons.
Design: Logos
I sketched some possible logos for "Paint by Mood", this was a little tricky because I want to incorporate many elements into a single logo. The ideal logo will reference mental health, painting and paint by numbers. The name of the project is also a little long but I still want it to be paired with some graphic.
Paint by Numbers: Mood-Mood Boards
I gathered images that I could use for my paint by numbers and the four moods/emotions I focused on were: Bored, Angry, Stressed, Sad. My project targets people who are feeling any of those negative emotions and the goal is to improve their mood so they feel calm/happy/creative. At first it was difficult findings pictures because we're all different and everything is subjective. There is no guarantee that a rainbow for example could make someone happy. However, there is a way to use science. Color psychology proves how colors influence our mind an emotions, so I will be focusing on certain colors for each mood. For example, the color red raises your pulse rate and stimulates your mind, that is why I used bright colors and mostly red for "Bored". Another tricky category was "Sad" because there's so many things that can or can't make someone happy. The color yellow is associated with laughter, happiness and optimism, also studies show that animals increase serotonin (“happy hormone”) levels in our brain. With that research I gathered pictures of animals and went for a yellow theme.
Text Editor: Brackets
I was recommended this text editor (Brackets) so I wanted to try it out by coding a low fidelity layout for a website since that will be the primary interface for my project. Below is a screenshot of the website skeleton.
Adobe Illustrator / P5.js
I creating a very simple paint by number in Adobe Illustrator, I drew and exported the image on the left then brought it back into Illustrator. I did an image trace of 6 colors, deleted the colors, and added a black outline as well as numbers.
I brought the paint by number image into my p5.js web editor so I could experiment with the painting. I didn’t use any specific open source code, but I did reference the p5.js website quite a lot. The code is very simple and I will definitely be experimenting with the interactivity as well as design as I continue with this project. With more time I would have added the option for different brush sizes, an eraser, and bounds around the paint by number.
p5.js code :https://editor.p5js.org/FernV/sketches/AvMs1Ko5r
Human Experience Test
I created a google survey describing the elements of my project while also asking multiple choice and short answer questions. I sent the survey out to students and faculty from CU Boulder.
Google Survey Link: https://forms.gle/EsxsZGEXne1wA7Uh8
(Format shown below)
Check all that apply:
I don't dedicate enough time to my mental health
I struggle to improve my mood quickly
I have used art to improve my mood
I don't have time in my day to physically paint or color
Survey Questions:
Is the idea of digitally painting a surprise paint by number in 15-20 min appealing?
When and where would you use Paint by Mood?
Do you see yourself using Paint by Mood instead of physically painting or coloring?
Do you think Paint by Mood would be effective in improving your mood?
Do you see yourself or others using Paint by Mood to focus during a zoom lecture?
What other feedback or comments do you have?
Mood Board
