At the beginning of the hackathon, we weren't sure what we wanted to make, but we knew we wanted to focus on the topic of mental health. Especially in the midst of this pandemic, we wanted to look for solutions to problems involving stress and mental well-being. So we interviewed 5 college students to understand their stress levels and how they take care of their mental health. From the interviews, we found that although people would take breaks throughout the day, they weren't setting aside time to take care of and reflect on their mental health. We also conducted a brief competitive analysis on meditation and mindfulness apps/websites and found that one of the weaknesses with these platforms is the lack of the ability to customize the meditation experience, or if it allowed you to customize the experience there were too many options to choose from, so we wanted to solve for that issue as well.

What it does

We created a website to help assist people in taking care of their mental health through self-reflection and meditation. On the home page, users are shown a brief survey to ask them how they are feeling and what they are grateful for. This helps the user reflect on their current mental state and helps orient them into a positive mindset. They can look back on their responses to their self-reflection survey by clicking on days on the calendar. Users can also customize their meditation experience. They can choose between guided and unguided meditation, select relaxing sounds, and choose the length of their meditation experience. Once they customized their meditation session, they are shown a screen with a countdown timer and the sounds/music they chose will play in the background. They can also track their progress on their profile page.

How We built it

We started brainstorming and prototyping on Figma. We created two user sketches and two low-fidelity prototypes. We conducted informal A/B testing on the two prototypes by interviewing 3 people to figure out what features we needed to include from each prototype.

You can view the prototypes here:

We used HTML, CSS, and javascript to create our final website.

Challenges We ran into

Because of the time restrictions, we were unable to finish much of the app's functionality. We had an initial plan for the website to be a chrome extension that would appear on the tab when the user opened chrome, however, we were unable to incorporate that into the final design. We also wanted to record the user's survey responses and have those linked to the calendar. Additionally, we wanted to have guided meditations, record the user's total hours of mediation, display their data, and gamify the experience by giving the user rewards and badges. However, we were unable to complete those features.

One of the major challenges we ran into was creating the countdown timer, creating the pop-up description on the calendar, and adding the sounds during the meditation sessions.

Accomplishments that We're proud of

Although we were unable to finish the functionality, we are proud of having created all the pages, we had planned for the app.

We were also proud of our planning and organization during the hackathon. We were mostly able to stick with the schedule we created for ourselves.

What We learned

We have improved our javascript skills by learning how to create a timer and integrate sound onto our website. Also, In the beginning, we had very little knowledge of how to use bootstrap, but we were able to learn it during the event.

What's next for mooditate

We want to finish the features we intended to have in the app, such as the guided meditations, survey responses, meditation stats, and rewards system. Additionally, we hope to fix some of the UI to make it more consistent and add some more graphics.

Built With

Share this project: