just-breathe

🧘 Just breathe is an in-progress project focused on creating a minimalist web app for use of mindfulness and meditation.

Demo

Inspired by a book called 'When Things Fall Apart' by Pema Chödrön.

Current stage:

• Research
• Definition
• Brainstorming, Conclusions
• Prototyping
• Finish Demo

Research

Just breathe is meant to be a mobile-first experience, focusing on accessibility and ease of use. No fireworks, no complex systems. As a long time meditation practicioner, when presented with a myriad of choices I often get flustered and irritated, which results in a disturbed practice. The goal of this excercise is to create a minimalist platform for all who get easily distracted. This has proven to be a key paint point for people I have consulted in this matter, thus providing me with a great opportunity to create this project.

Definition

Intuitive; Clear; Minimalist. These are keywords this project has to stand by. The interface has to be incredibly easy and clear in terms of signifiers, and choices the user is presented with have to be concise enough to minimize the chance for frustration.

Brainstorming, Conclusions

There are no accounts, no and no stats. There's nothing to achieve here apart from the act of mindfulness itself. This is to remove instant gratification, and to foucs on the task at hand. User is presented with a theme of choice (dark or light), timer, ambient noise of choice, and a start button. While not the most lucrative approach, this excercise is meant to create a space for people to remove themselves from distractions and mental triggers that are often implemented within apps for profit.

Additionaly, there's a 'how to' page for users who are not sure where to start, or who are perhaps new to meditation. This is a friendly place with a bunch of resources to learn about the art of mindfulness. All this, clearly marked with accessibility in mind. It has to be easy to use, by everyone.

Prototyping

Figma file - work in progress

Demo

Current version

Left to do:

• Changing Screens
• Timer
• Smoother Transitions
• Buttons Placement fix
• Ambient sound implementation
• 'Not sure what to do?' screen
• Responsive fixes

Resources

Fonts used: Abril Fatface, Roboto

All icons provided by Iconify.

Ambient sound effects: Wind, Rain

Web Audio library: Pizzicato.js

Not sure what to do section: How To Meditate - New York Times