Social Media Web Application for People dealing with Mental Health Issues — “Better Together”

This project was carried out as part of the TechLabs “Digital Shaper Program” in Düsseldorf (Winter Term 2021/22).

Abstract

4.4 percent of the world population suffers from depression. 27.7 percent of the German population has mental health issues. These numbers increased during the pandemic and created a high demand for psychologists. That’s how we came up with the idea of “Better Together” — a platform where people can find help faster by discussing their problems with health professionals and other users.

Introduction

During the pandemic, people were forced to isolate and stay at home. They had to create a new routine under a roof with people they did not feel comfortable with, which may have contributed to their mental health problems. The pandemic also brought out existential fears like not knowing what will happen next. On top of that, there are only 35,000 psychologists working in private practices, whereas we have 264,000 people per year (not including the increase during the pandemic) that need psychological help. Furthermore, the demand for psychologists has increased an additional 20 percent throughout the pandemic. All these factors show that there is a huge demand that cannot be met with the current capacities. The idea behind Better Together is to offer people struggling with mental health issues a platform where they can exchange their emotions and seek help. This could happen through health professionals or just through the community that grows with this platform. People can post their problems and get help immediately online.

Better Together helps those people in need by providing them with a community so that they can get together and be Better Together.

Method

As we had someone on our team who was experienced with software development using SCRUM, we decided to try applying it to our project workflow. Some elements of it worked well like having a product backlog.

We started filling out the product backlog by prioritizing the features for our web application using the Moscow prioritization technique that was recommended to us by our mentor. We created a separate document for each category on ClickUp (the agile project management tool we used for our project).

Having regular sprint review and retrospective meetings at the end of each sprint also helped us a lot. It allowed us to reflect upon the progress we had made throughout a sprint and make necessary adjustments to the product backlog and our workflow, which made it more likely for us to reach our goals. We also conducted sprint planning meetings which we used to ask our mentor for advice on our upcoming implementations.

What did not work out very well was our time estimates. We could not use story points to estimate our tasks by effort because we had not implemented any similar features in the past to have something to refer to. Instead, we tried making estimates that were not met most of the time and brought no value to our planning. Nevertheless, we still believe that time estimates can be useful for people struggling with procrastination.

Development process

At first the idea was not very clear to us, and we had to agree on what exactly we would like to deliver. After some brainstorming, we agreed on implementing the following core features:

● User Authentication with registration and login

● Forum UI displaying posts created by the user

● Edit post UI enabling users to add posts to the forum

● Comment function for existing posts

As we didn’t have anyone on our team with UX design skills we decided to base our UI implementations just on wireframes and a chosen color pallet. We created the wireframes using a pen, a piece of paper and paint. We managed to finish the implementation of our first UIs using just HTML, CSS and Bootstrap within our first sprint. We used 2 week long sprints. In the second sprint we started the implementation of the backend for saving and retrieving posts and comments using a database. We decided to go for the Supabase BaaS (Backend as a Service) for the database and Netlify for hosting our web application. As we did not have much experience in programming and solving technical problems in general, taking care of the backend right after writing HTML and CSS was a great challenge for us. Fortunately, after a workshop with our mentor, his further help, much research and trial and error, we eventually managed to fully integrate the database including saving and retrieving comments and posts, in our final 5th sprint. In the meantime, we also developed the interactive front end functionalities using Javascript, like creating posts with user inputs and appending comments to them, as well as the login and register UI with form validations.

The only feature that was missing at the end of our 5th sprint for a minimalistic implementation of a social media web application was the backend for the authentication. At first, we tried to use the Supabase authentication API. However, after multiple attempts we failed at it and as we had only 3 days left until the project pitch event, we decided to implement a simpler solution just to simulate the experience of having a real authentication without meeting any safety standards on handling user data.

Result

Although we failed at delivering some of our must features, we are still satisfied with the eventual version of our application. Our technical skills including Javascript, bootstrap and using a BaaS improved a lot. On a more personal level we also learned that learning programming by working on a project as a group is much more fun than doing it on your own. We should also strive to find a mentor when getting into programming so he can save us much of the struggle when it comes to debugging and research.

GitHub repository: https://github.com/better-together-net/Better-Together.git

The Team:

Luis Diego Hernandez: Mentor

Mariusz Seget: Web Development (Scrum master, Full-stack developer)

Funda Duman-Zhao: Web Development (Full-stack developer)

Ali Ahmad Ahmady: Web Development (Frontend developer)

Ziaolhaq Qamarzadah: Web Development (Frontend developer)