Inspiration

There are so many aspects surrounding the topic of mental health, so it is necessary to not only help provide resources for those suffering from mental illnesses but to also raise awareness about it. The first step to creating a calming environment for users is the visual aspect of our website, so we wanted to focus on design as well.

What it does

Our website provides users a place where they can journal their self-affirmations, with prompts to help them get started. The users must sign in to access their journals, adding a layer of reliability and security. As the user writes more journals, a plant will start to grow as a form of visual positive reinforcement. This provides a subtle encouragement to journaling, which has been proven to help people develop better mindfulness, lower stress levels, and instill healthier and positive outlooks on life. Another part of our website is the interactive awareness page, which is a unique visualization of relevant statistics to combat the stigma surrounding mental health. Our user interface consists of calming colors, shapes, and is based on our Figma design that is plant-based.

How we built it

We built Nurture using the Qoom platform with mostly HTML/CSS and Javascript. The various components of our code include: creating secure login/logout with the server, parallax scrolling on the journal page, CSS wrappers to create alternative scrolling on the awareness page, and more. We also used Figma to create a wireframe sketch of the website to then translate into Qoom. While the final website doesn't entirely replicate the Figma design, elements from the wireframe are incorporated into the website. Using Figma allowed us to neatly organize our designs into one place and prototype the overall flow of the website as well. Utilizing Qoom Collab and later syncing the code with Github was very helpful, as Qoom allowed us to deploy the website in real-time as well.

Challenges we ran into

None of us are that experienced with web development, so it was a bit difficult initially figuring out some necessary components to make our idea come to life. Also, we switched coding platforms to Qoom about halfway through since we decided to add a user login page, which was challenging. However, we were able to transition everything in the end :)

Accomplishments that we're proud of

We're proud that we were able to build all of our ideas and integrate them smoothly in a short timeframe. We were also in different time zones, so we're also glad that communication still went well through frequent messaging.

What we learned

We learned about how to work with Qoom, Figma, and various other platforms we will definitely be using again in the future! We also learned a lot about web development and how to make different effects appear on a website.

What's next for Nurture

As we grow Nurture, we hope to advance the design of the website to mimic the Figma sketch. We want to include more resources on our website as well as a messaging system to automatically connect users with emergency healthcare professionals. We also want to continue providing ways to combat mental health stigma, and we also hope to add a paid system in which profits go towards medical funding to provide more people access to necessary help.

Built With

Share this project:

Updates