Project Partner: Ellen Yang
Description: The demands of a busy and fast-paced student life can stress out even the best of us and no one is immune to stress. So, Ellen and I decided that it would be fun and helpful to create a free and accessible website to help de-stress users. We figured users don’t need to take huge chunks of their days to relax/de-stress as only a couple of minutes would be more than enough to remove temporary stress or anxiety users may feel without disconnecting from the Internet. Our website is here to help people meditate and temporarily forget about the responsibilities without stressing out which is the case for many students who stress themselves out more by avoiding responsibilities/wasting time doing nothing or scrolling up and down mindlessly on social media.
Our website is simple and user-friendly as with the home page, the user can scroll down and click on one of the three displayed locations in order to experience each location. We focused on sounds typically to help the user meditate and let the user create a paradise of their own in addition to the image we provided. I personally believe that I become satisfied and calm as I listen to the sounds of nature so that’s why we provided different audios for each location and volumes as well. The user can choose to lower or higher the volume of each different audio on their preference. Additionally, we have created one animation feature for each location: rain for the rainforest, moving bubbles as the user moves around the mouse, and seagulls that follow the mouse. Lastly, we have added a mini thoughts chat box in which the user will be able to type in their current thoughts and vent without worrying about anyone seeing it in the future. In order to provide assurance, we made sure the typed text would disappear within a few seconds.
Process/Development: Initially, Ellen and I decided to do our project on the topic of technology and its impacts on society, specifically regarding how technology could have saved lives in Syria or North Korea. I wanted to show the perspective of a North Korean refugee but from the feedback we received, we decided to resort to creating a totally new website. Following the feedback during recitation, we struggled for a few days deciding on our new idea. However, we FINALLY were able to agree on creating a de-stressing website in honor of Finals Week ahead of us at the time. At first, we were going to have three different locations around the world, mainly big cities but Leon gave us an idea to do landscapes for a better, soothing experience, so we agreed on doing the beach, rainforest, and underwater.
We first sketched the layout of all of our potential pages and started our code for the main page and choices. For the title of the homepage, I added the most calm photo I could find and added a mini css animation in the background of the title. Then, I added a mini scroll icon at the bottom of the home page to create a easier auto scrolling feature. For the choices page, we utilized gifs so that when the user hovers over the choices, there would be live paradises to help the user imagine. For the rain location, I tried to find a way to add a raining effect on the image and ended up using a png image of rainfall and created the animation with only CSS. As for the beach page, Ellen and I really struggled to create a wave effect using P5 so we resorted to just adding seagulls to follow the mouse. For the underwater page, we initally wanted to make the fish moves but we also failed to do that as well after countless tries so we again resorted to creating moving bubbles following the mouse. For adding the volumes, we used the three color sliders we learned in class as reference to implementing audio/volume. After MAJOR struggles, with the help of Jiwon, we were finally able to set volume and sound so that all the audios would play at once but the user would be able to adjust the volume sounds to lower or higher using the sliders. Additionally, from the feedback we got from our fellow classmates from user testing, we decided to add one more interaction to create a better/effective stress relief experience. We added a thoughts text box in which the user would be able to type and enter/send in any worries or thoughts they have and watch it disappear to reassure the user that no one would ever have access to it. We thought that this would effectively create an even more soothing experience for the user.