Breathe Slow

Breathe Slow" is a user-friendly web application dedicated to empowering individuals in managing their anxiety and stress levels effectively. Through a comprehensive set of customizable features, guided sessions, and seamless music integration, it fosters a holistic approach to mental wellness. The app's primary goal is to serve as a digital sanctuary, offering users a tranquil oasis where they can find peace and relaxation whenever they need it.

Project Overview

"Breathe Slow" is a user-friendly web application created to combat anxiety and stress. It offers a wide range of relaxation tools, including guided breathing exercises, a customizable timer, soothing music, and Spotify integration for personalization. Accessible across devices, it empowers users to manage their mental well-being conveniently, providing an effective solution for relaxation and anxiety relief in our fast-paced world

The Product

"Breathe Slow" is a user-friendly web app designed to ease anxiety and stress. It offers a holistic approach to relaxation, with various breathing techniques, guided sessions, timers, and soothing music. Accessible on all devices, it integrates smoothly with Spotify for personalized playlists, enhancing the relaxation experience. Featuring progress tracking and user profiles, "Breathe Slow" empowers individuals to manage their mental well-being, cultivating tranquility and mindfulness in their daily lives

Project Duration

3 months

The Problem

In today's fast-paced world, rising anxiety and stress levels are affecting mental health. Modern life's demands and external stressors have increased the need for accessible anxiety management tools. While therapy and medication are valuable solutions, they aren't always accessible or preferred by everyone. "Breathe Slow" provides a convenient and holistic alternative for anxiety relief and relaxation, addressing this growing need effectively.

The Goal

Our goal is to create an EnviroThe core goal of the "Breathe Slow" project is to empower individuals in effectively managing anxiety and stress through controlled breathing and soothing music. It aims to relieve anxiety, foster mindfulness, personalize the user experience, track progress, and ensure accessibility. In doing so, "Breathe Slow" aspires to enhance users' mental well-being, offering a practical and comforting solution for the rigors of modern life.nmental Monitoring and Prediction System with IoT and ML capabilities. Objectives include setting up IoT infrastructure, developing accurate ML models, creating an intuitive React dashboard, ensuring security, scalability, and fostering data-driven decision-making for sustainability.

User research: summary
 

Key Takeaways:
Anxiety Reduction: Gather data on how regular use of the app affects users' self-reported anxiety levels. Conduct surveys or collect user testimonials to measure perceived reduction in anxiety over time.
Ease of Use on Mobile Devices: Assess the user experience specifically on mobile devices since portability is a key feature. Identify any usability issues or areas for improvement in the mobile interface.
On-the-Go Usage: Understand how users integrate "Breathe Slow" into their daily routines, such as during commutes or in stressful situations. Measure the effectiveness of short, on-the-go sessions in anxiety reduction.

User research: pain points
 

User Personas

User Journey Maps

High Level App Flow

Framework & Libraries

React.js: React.js is a JavaScript library for building user interfaces. It was developed by Facebook and is commonly used for creating interactive, single-page web applications. React allows you to break down your application into reusable components, which makes it easier to manage and maintain your code. It uses a virtual DOM (Document Object Model) to efficiently update and render components, which results in better performance.

Node.js: Node.js is a runtime environment that allows you to execute JavaScript code on the server side. It is built on the V8 JavaScript engine and provides a non-blocking, event-driven architecture. Node.js is commonly used for building server-side applications, such as web servers and APIs. It's particularly well-suited for building scalable and real-time applications.

Paper wireframes

Usability study: findings
 

Technique Selection:
- Most users appreciated the choice of multiple breathing techniques, with 4-7-8 and box breathing being the most popular selections.
- A few users were curious about the differences between right nostril and left nostril techniques and requested more information or guidance.

Guided Sessions:
- Users generally found the guided sessions easy to follow, with clear visual aids and audio instructions.
- The visual cues, such as expanding and contracting circles, were particularly helpful in synchronizing breathing.

Music and Spotify Integration:
- Users found the calming music library soothing and appreciated the Spotify integration for personalizing their experience.
- Some users mentioned that they experienced occasional connectivity issues with Spotify, which impacted playlist selection.

Deployed App

View

Accessibility Considerations

Font Size and Readability: Allow users to adjust the font size and ensure that the text remains legible when enlarged. Use clear, high-contrast text to aid users with low vision.
Keyboard Navigation: Make sure the app is navigable using keyboard shortcuts and tab key, allowing users who cannot use a mouse or touchscreen to interact with the interface.
Color Contrast: Ensure there is sufficient contrast between text and background colors to aid users with various types of visual impairments. Use tools to test and maintain WCAG (Web Content Accessibility Guidelines) compliance.
Audio Cues and Descriptions: For users with hearing impairments, provide visual cues or descriptions for any audio elements. Transcripts and captions should be available for any video or audio content.
User Customization: Offer settings that allow users to customize the app based on their specific needs, including text size, color schemes, and the ability to disable animations.

Takeaways

Audio Accessibility: Include visual cues and provide captions for audio elements to support users with hearing impairments.
User Customization: Offer customization options to cater to individual needs, allowing users to adjust text size and color schemes.
Consistent Navigation: Maintain a consistent and clear navigation structure throughout the app to assist users in understanding the layout.

To learn more about this project, please visit its git repository:https://github.com/Kits1700/BreathingApp.github.io