Breathmethod is a kind of meditation app that teaches users to breathe properly. It’s important to breathe the right way, otherwise you may feel distressed, run-down, and worn-out.
Dominic and Caroline are a couple from Singapore. She is practicing yoga and giving breathing classes; he is a top-level manager who is also interested in breathing methods.
Although they initially came to us for the UI/UX design, we knew right away we’d work on the development part together too. So we agreed on building an MVP. They didn’t have any specifications yet we got to know they do like the combination of living green, gray concrete, and light wood – kind of European constructivism.
All you need is to breathe the right way
The motto of the app is ‘BREATHE WELL, LIVE WELL’, which means users will transform their life with better breathing
With the app, users can access a large collection of breath-related articles that state how breathing affects our life
Caroline records authorial audio lessons on breathing techniques that are easy to listen to and practice on the go
The app is home to the large number
of breathing practises that help users improve their life
The target audience is people tired of the hectic pace of big city life who feel depressed or emotionally drained and want to reunite with nature.
The first step is an analysis of competitors.
We started by making a list of the most relevant applications and continued by learning their advantages and disadvantages. We found out most of them lack breathing exercises and set focus on them.
the voice Sleep
mode Breathing exercises Background soundscapes
HeadspaceAvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
CalmAvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
MoAvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
MyLifeAvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
MeditopiaAvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
OakAvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
The core part — photos
High-quality and super-realistic photographs became a core part of the entire product interface. It’s stated by the client that illustrations are too frivolous and won’t work for his audience. To make the app look serious yet interesting, we used photographs with nature patterns: water, rocks, plants.
- Home screen
The main content is audio
Helps to gently lead the body and mind into a state of easy, deep restfulness for a long, nourishing sleep
Helps to focus breathing on rhythm, inhalationa and light holds to take the user to peak mental performance and a clear, sharpened mind
Helps to boost oxygen levels with vitalizing breathing techniques for greater physical and mental energy and performance
Helps to balance balance the user’s nervous system so they feel centred, connected and calm in themselves
Helps to destress situations with specific breathing practices that release tension and bring the user into neutral for a more level life
Helps to soften and release the user's mind and body in just a few minutes — breath in and out for a complete rest
- relax page
- energize page
- focus page
In addition to general sets, every day the app generates Daily playlists. The admin plans breathing sessions that are sent to users at the start of each day. These sessions are meant to correct imbalances, recondition muscles, and reset breathing for a more functional day ahead.
The Pendulum set is designed to give the user an exact practice that will fit their objectives. The app has special sets prepared in advance that allow users to choose what they need at the exact point of the day. Whether they need to energize, focus, destress, relax or sleep. Plus, users can customize a set and start practising right away.
The client already had an idea for the logo: we were to polish and work it off. We got the idea on paper — then considered the concept and formed our vision. Taking into account the tendency to simplify and minimize things — clean shapes and basic colors — we came up with the result
The project manager was asked to send the most heartfelt thanks to the designer: ‘Please tell the team they are doing a great job. We are close to finishing design now.’
Typography & colors
overview of the entire scenario
Breathmethod became the first app into which we integrated signing in via Apple ID. The point is that Apple released its requirements for implementing authorization through Apple ID in October 2019 but obligated developers to do it only in April 2020. This way creators had half a year to meet the requirements. We started working on the development of Breathmethod in May 2020 — so we had no choice but to do it.
touch ID and face ID
We used ‘react-native-touch-id’ to implement Touch ID and Face ID logging in the app. This is a simple library that helps the app detect hardware of the device. The app scans a device and, depending on the result, suggests different options: if the device has Face ID — the app will offer to use it, if the device has Touch ID — the app will propose using the user’s finger instead, or if the device has nothing like this — it will ask the user to think up a simple code.
React has a library called ‘react admin’. It allows developers to quickly make the administrator panel. We used the library to develop the admin panel for Breathmethod. However, it can never be this simple. ‘React admin’ is a complicated library that requires perfect understanding, while its documentation doesn’t provide you with answers.
What we did: we took the best parts of the library, wrote down some parts of the code by ourselves and ended up with the great admin panel that works like a Swiss watch.
For the landing page,
we decided to use Gatsby.js
Allows to work with cache prefetching
Makes it possible for the page to be indexed, which is extremely important for landings
Works with headless CMS
The page benefits from both the engine and the generator of static web pages
We recommend Gatsby.js to everyone who needs a modern site with the fastest loading time, support of PWA technology, and offline mode!
the Gatsby’s plugin
In order to integrate posts from Instagram
we hoped to use one of the Gatsby’s plugin
But once we tried using it, we realized it can only help to get posts. Getting posts was not enough. We wanted to integrate them: so the feed was always up-to-date, and users could see not only pictures but also texts.
Thus, keep abreast of events.Having managed to get the posts, all we had to handle was the timeline development, the slide implementation, and the problem solution... It all turned out to be an easy task for us.
The app is now available
on the App Store and Google Play
Thanks for your inquiry. We’ll get back to you in less than 24 hours!