Lively - Mental Health Web App

A web application designed to monitor and promote healthy mental and psychological health for the youth of America

Comment

✨ Inspiration ✨

One of our friends was depressed in real life, and she committed suicide. This could be known, but no one paid attention, so she did it. She never accessed resources that could've saved her life. She never visited a doctor, psychologist, or mental health professional. It gave us the inspiration to protect others' mental health, by monitoring and promoting mental health with the support of medical professionals.

With the COVID-19 vaccine rollout well underway across the country, it is tempting to deem the pandemic over. But after bearing so many of the losses of the past year — as essential workers, as college students, and as the family and friends of COVID-19 victims — young Americans are facing a mental health crisis. Our generation is in desperate need of support. Sadness, fear, worry, or other emotions can affect us during or after tough situations, like dealing with the COVID-19 pandemic, the loss of a family member or friend, or experiences related to racism. Dealing with these challenges can weigh heavily on your mental health. The COVID-19 pandemic has been stressful for many people. Some groups may be more affected than others. Studies about mental health found inconsistent effects of the COVID-19 pandemic on different racial, ethnic, and even age groups.

More specifically, reports from the Centers for Disease Control and Prevention concluded that younger Americans and their psychological health have suffered the greatest over the course of the pandemic. Over half — 51 percent — of respondents aged 18-29 had felt down, depressed, or hopeless at least several days out of the previous two weeks; 28 percent had thoughts of self-harm or suicide over the two-week period, with 1 out of 20 respondents experiencing those thoughts every day. In comparison, a study by the Centers for Disease Control and Prevention found that, in 2019, only 21 percent of people in the same demographic had symptoms of depression.

In a world where a mental crisis only exacerbates and places a heavy toll on individual youthful lives, mental health professionals and related resources must be presented to younger Americans in a more accessible, modern manner.

⚒ What it does ⚒

Using a powerful user interface incentivizes app users and patients to meet with mental health professionals by setting their own appointments, developing a treatment plan, accessing their medications, and searching for other professionals that specialize in certain conditions such as anxiety, depression, or self-image problems. It has a well-structured UI along with animations and colors which give users positive energy while using it. This app would be effective in providing guidance on lifestyle and motivation to get relief from mental health issues and also making therapy more accessible, efficient, and portable for Americans and other global citizens that struggle with mental problems. The application has the potential to save actual lives through professional treatment.

👷‍♀️ How we built it 👷‍♀️

We started with research and ideation before moving on to sketching low-fidelity prototypes on paper. Then we created the information architecture of the application with user flow and accessibility in mind. When we had a pretty good foundation, we began drafting our frames on Figma, following a tailored style guide.

Using the Figma design, We created a React Js web app and started implementing Chakra UI - which is a component library to help you develop code for your React web apps and other frameworks, React Routers a library for routing in between pages, Three.js for 3D modeling which we had trouble dealing with, Framer motion for Animations and assisting with 3D animations as well. These are all libraries in assisting development, Languages used are HTML, CSS, and Javascript. We then used GitHub to store all the project’s code in a public repository.

💪 Challenges we ran into 💪

A lack of time, hardware problems, and lack of experience were the challenges we ran into. We had a very hard time deciding on the most user-friendly layout without compromising any of the main functions we wanted Lively to provide. Another challenge we encountered was unifying the visual components for the different pages of the app. Because we wanted the app to have a cohesive design, we strategically crafted a style guide that includes a set color palette, typography, interactive elements, etc. to implement across the different frames. The team also lived in different time zones across the country, which sometimes make communication a little difficult as our individual busy schedules sometimes did not allow for a meeting time to collaborate. We ended up drafting multiple iterations of how the app could be structured based on the information architecture of the product before settling on one. Furthermore, only one of the team members was fluent in writing code in HTML and CSS. The other team member was fluent in Python, C, and C++, and was familiar with prototyping and designing visual web applications through Figma.

🥇 Accomplishments that we're proud of 🥇

Despite our differences in our familiarity with programming languages, we intricately designed a web application after models, designing, and collaborating using a combination of both skillsets. With our great passion, we overcame all the difficulties we foresaw and we completed the project. This makes us proud of ourselves. Our expertise with contrasting languages and platforms allowed us to excel through the hackathon and it incentivized us to combine different elements to form an amazing project. We are proud of our attention to detail, specifically the minor interactions we created to strengthen the usability of the app. We also used many plugins and tools that we were originally unfamiliar with to better our design. Overall, we are very proud of being able to make a web application with high-level programming languages just within a few days!

🚸 What we learned 🚸

  • JavaScript
  • CSS
  • HTML
  • React
  • Teamwork
  • Project completion
  • Design with Figma
  • GitHub

We learned that time management is really important, we practiced programming with high-level programming languages, and learned to work with certain libraries/frameworks. While creating Lively, we familiarized ourselves with the different tools on Figma and how we can use them to create high-fidelity prototypes. We also learned to use various Figma plugins that can be applied to future projects. Furthermore, we became more aware of how every design choice has the power to make a difference in the user’s experience, and that is definitely something we will continue to keep in mind when designing products.

😲 What's next for Lively - Mental Health Web App 😲

  • Fully usable, web interface
  • Securely store user data so they can track their emotional progression over time.
  • Flagging entries as signs of a deeper mental health issue and connecting the user with the help they need.
  • Expanding our list of resources.
  • Make the app more aesthetically pleasing to invite more users. Buying a domain name for Lively, and releasing the full project after finishing its development would be next for Lively. Improving our interface systems, text-messaging with doctors, and notifications to emails would be new features for the web application. Make our web application available for everyone by publishing it on the internet. We also plan to become a global organization that aims to protect people from their mental problems and conditions.

Built With

Share this project:

Updates