This is a front-end project for Northwestern CS 330: Human Computer Interaction. There is no back-end implemented. Rather, this project is meant to practice design principles solely using HTML, CSS and Javascript.
Team members: Sanath Angalakudati, Zaddeen Benaissa, Shivang Pant and Kevin Wu.
Section #69
Mental health is one of the most important issues in our world today, with about 450 million people around the globe suffering from some kind of mental health condition. One of these is depression, which is easily masked and not talked about very frequently. This condition is hugely important because it can affect so many parts of someone's life, and can even lead to other ailments such as heart conditions and insomnia. Our goal is to provide some relief to those suffering from depression, or even those who are looking to stay optimistic and happy as they go on with their daily activities.
The goal of our app isn't to be the sole treatment for someone suffering from depression; rather, it should serve as a supplement to proper treatment and care. There are currently apps that attempt to promote happiness and good feelings amongst their users, and we want to provide another source of joy for our users to create a better community overall.
Through our interview process we hoped to learn more about how people deal with stress and depressive thoughts, particularly college students. We wanted to better understand if certain practices worked well for all people, or if each person had a unique approach to mitigating anxiety and stress.
In order to conduct our research we interviewed several people that fit our target user profile. We chose to conduct a traditional interview rather than a contextual inquiry because we wanted to understand behavior when users were feeling anxious and stressed, and we felt it would be difficult/unethical to try to induce this behavior. Users were briefed on our problem statement and then were asked a series of questions regarding their thoughts and feelings when stressed.
From our interviews we learned that the main need for our design was something to help alleviate stress and anxiety, ideally a way to stay positive and happy when getting down or feeling frustrated with school or outside work. We also learned that while certain users benefit from de-stressing activities like exercise and spending time outside, other users prefer completely different activities like staying indoors and playing video games. However, users also indicated that they would be open to new methods, which made us confident that our solution could make a change. We initially planned to cater our site exclusively to college students, as we felt that they would experience the highest levels of stress. However, testing and research helped us decide that our app would be targeted towards anyone experiencing stress and depressive thoughts.
Overall, we got good feedback from our testers during the paper-prototyping phase. One of the primary problems we had during this round of testing was the users finding the articles to read. Although we were unable to implement this feature, users had difficulty finding the articles because they were labeled under the community tab. However, for all other tasks users were able to find their way around the paper prototype relatively easily, and had no issues navigating to other tasks which we did implement in the website.
From paper prototyping, we realized that we needed to make things extremely clear with our design. When creating the actual design, we ensured that there was no confusion as to where the user to go for each task. It was a bit difficult in the beginning to go from the paper prototype to the actual web prototype, but after P6 all tasks were extremely straightforward and users were not confused at all.
We ended up supporting a few different tasks in our live site:
- Login with Credentials - Since we targeted thoughts and ideas that were unique to each user, we wanted each user to have their own user information when logging into the site. So, we created a username and password that could be used in order to gain access to the site, and created custom journal entries that users could view after logging in.
- Journal Entries - To help users track their positive feelings and improve mood on a daily basis, we implemented the Journals page on our site. Users can create a dated journal entry detailing what they were doing and how they were feeling, and can then add a tag in order to keep track of similar entries.
- Goals - In order to help users grow over time, we implemented the Goals page on our site. Users can create goals over a specified period of time, and upon completion they will be rewarded with points (on the app) in addition to their user-specified reward.
Through our tasks, we successfully implemented three different components:
- The first component that we created was User Profiles. We created a Json file containing two user profiles that you could login to through the home page. After logging in, we arrived at a screen that listed the user's profile and their information.
- The second component that we created was a Data Collection Form. With this, we created an "Add New Journal Entry Page" for our Journals page. This took the user to a data collection form that allowed the user to add a date, title, body, mood, and tag for a specific journal entry.
- The final component that we created was a Gamification/Rewards system. We did this using the goals page, where the user could enter a reward for a goal that they created. Then, after they completed the goal, they could complete the goal, which would give them a notification that they completed the goal, give them their reward, and remove the goal from their list of pending goals.
During our project, we were able to achieve many of the goals that we had in mind in our original design. The user is able to log in with unique credentials, and depending on their credentials entered they will see unique results on the site. For example, they will be able to see their past entries and user information such as number of days on the app. In addition to customize user pages, the journals and goals page of our site are both fully functional. Users can create and delete both journals and goals freely, and we even added a gamification tool that allows them to be rewarded when completing long term goals. Throughout the process, we incorporated user suggestions in order to improve our overall design. For example, during the P5 phase, users noted that navigating the site was difficult after log in because the site defaulted to the "user info" page. In order to fix this, we instead routed users to a stand-alone "menu" page, and navigation issues were completely solved during the next round of user testing.
Though we were able to implement much of the design that we wanted, there is still some room for additional features. We were unable to implement the "Community" page, where users could see the journals of their friends and learn about mental health through news and scholarly articles. In the future this would be the first area we would work on, as we would love to introduce a way for users to interact with one another through the app. Additionally, we wanted to implement another form of gamification where users' completion of goals would gradually complete a puzzle. This would be another form of encouragement for users to complete longer goals or enter in the journal every day.
Repository Link: https://github.com/HCI330-BMP/elate
Working Prototype Link: https://hci330-bmp.github.io/elate/
The prototype works best in Google Chrome on Mac. In order to log in, use the following credentials:
Username: buymepants
Password: password2
From this point, you can navigate through the site as if you were a user.