Inspiration & Purpose
The major purpose of our project is to create a dynamic tool that allows college students to take care of their mental health on busy days with short but meaningful “happy thoughts”. Based on academic research (Reference Link: https://greatergood.berkeley.edu/article/item/is_gratitude_good_for_your_health), gratitude helps people improve their mental health, boost their immune system, and improve their relationships. With a simple process to keep the daily mood and gratitude logs on our app, students become aware of their wellbeing by taking action and gratitude for positive things/objects/events around them. The app also encourages practicing gratitude practice for people who suffer from anxiety and depression. By writing and keeping the gratitude logs through our app, users will improve their mental health and change their perception of life. The app intends to teach you how to be more thankful every day and treat yourself through the power of gratefulness. Additionally, the current mental health app market is growing, and in 2030, the market revenue is forecasted to reach USD 105.9 billion (Reference Link: https://www.grandviewresearch.com/industry-analysis/mhealth-app-market).
What it does
Gratreat allows users to pick write about the emotion they are feeling at that specific time and moment. Once the user has logged in to an entry, they have an option of creating another entry looking through their records, or checking how many points they have to get a treat from a vendor.
When the user chooses a mood emoji of the day, the page will be redirected to a new page where they can select prompts or skip the prompts selection. The color of the selected mood emoji would appear on the Trackers page later with the calendar view so that the user can keep track of their mood changes and the number of gratitude logs that they recorded in a selected month.
If the user submits the prompts to use, then the user would go to a section in the site where they use that prompt as a topic of their journal entry. Each prompt has a save button so when the user has completed a specific log they can click on that button in order for it to be in their records section.
If they chose to skip the prompts then the user would go to a blank journal entry section. After they write something down they would click on the submit button which will save their entry in the records section.
When a user clicks on the submit button they will show a pop-up window that shows them how many points they earned with their entry as well as give them the options to either go to their records page or rewards.
Every time the user saves a log they will be given points which they can use for getting treats from vendors.
Users can access the treats page by clicking on the link on the footer nav and can select a treat using points that they earned.
How we built it
This application was developed using React.js to build the user interfaces in a framework that was easy to follow by the involved developers. A responsive web design was implemented to allow the application content to respond to the different screen and window sizes. During the application development, prototyping tools such as CodeSandBox were used to test algorithms online before directly implementing them to Visual Studio Editor. This allowed less-experienced developers to rapidly test their algorithms and feel free to play with modifications without breaking compiled algorithms. Other libraries such as Bootstrap and Material Icons from Google were used to speed up the styling and design. Developers contribute to the public repositories named “Gratreat-App”.
Challenges we ran into
Several challenges were faced in various aspects of the application development. For this, difficulties and challenges have been divided into sections. Challenges faced during
Challenges faced for the UI/UX design of the app: The key UX concern of this app is to have users return to the app on a daily basis for mental health improvement, and the user revisit rate is a measurement criterion of the success of the app. Regarding our app 'Gratreat', whatever form your gratitude journal takes, we kept in mind that it is as good as the amount of effort the user put in. In other words, if the users do not use it regularly, the app will not be able to help the users develop their gratitude habits and mindfulness practice. Thus, to make our service a profitable business, we researched the feasibility of current mental health apps and brainstorm how to increase retention and reduce churn. As a result, we found out that the personalization of the app is crucial for the feasibility of the app. Based on the result, we decide to have the Mood tracker feature and the reward system with personalization. The other challenge was conducting research under time constraints. It took more time to come up with the idea of making the Treats Page show active and inactive coupons in an effective way with different sizes of items and minimal descriptions. According to the user's feedback, the Prompts page needed more contrast of line and background color in each box of the prompt and the submission buttons. Thus, the designer changed the fidelity iteratively 3 times. For simplifying the calendar from a design perspective with the user testing, the designer tried applying three different UI designs of the calendar on the Tracker page that has either square shape, circular shape, or bubble chart that can be filtered by mood. Reducing the Gap between Design and Development was an important challenge we addressed during the development phase.
Challenges faced for the app development:
Lack of experience in building functions in React to render essential elements of the application. For instance, the code to build the final calendar (page number 6 in wireframe) required more programming experience/skills from the developers than the team thought. Swapping components was another feature that was impossible to implement for the same reason and was considered for page number 5 in the wireframe. The documentation to install dependencies using npm could be complicated when developers look for a specific open-resource up to date. The addition of icons was difficult because the documentation was hard to find and the icons' names were mixed up. We also found the names were repeating for more than one icon and the class name would not work to call the desired icon.
Communication: The continuous communication between team members was affected due to the limited time that Google Meet or Zoom provides. Slack and Discord was useful for continuous communication, however, it does not allow free video chats.
General organization: Our team members consist of 3 front-end developers and 1 designer. Each group member had a role to play and was able to deliver items in a timely manner. For future development, we consider having more backend developer(s).
Time Management: Some components were not completed due to the time limit.
Accomplishments that we're proud of
We are proud to be an international group of women from different continents who complete this app regardless of our time zones.
We are proud of these three features of our app:
1) Keep a Gratitude Journal - Write a gratitude log with word prompts quickly and view your previous logs easily anytime in Records
2) Remember the Good and the Bad - Track your mood every time when writing a gratitude log and view your moods in a monthly calendar with colors of the moods
3) Continuous encouragement of gratitude - Gain points whenever writing a gratitude log and treat the user well in a variety of rewards for mental health using the points.
What we learned
We believe that Harness is easy to deploy and operate and saves us time and effort. We learned how to create a boilerplate app for development from scratch using React and JavaScript. While developing the idea of the app for this DeveloperWeek hackathon, company research gained a basic knowledge of APIs and services such as Symbl.ai, Harness, and Bridgecrew.
What's next for Gratreat
The project is scalable since other features are needed to add user authentication and administration features that will help keep track of the users' daily gratitude logs and the points for the treats and give indications of how many people are continuously using the app. We want to launch the mobile app on the app store which would make the service more convenient to use. There are features that we want to develop further: Swipe action on pages, Local database, Coupon auto-generation.
Built With
- javascript
- local-storage
- react.js
- scss
- styled-component
- web
Log in or sign up for Devpost to join the conversation.