UI/UX Application
Design
Breath method
-
The idea
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.
-
The client
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.
-
Idea
-
Research
-
Moodboard
-
UI/UX design
-
Development
-
QA testing
-
Release
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
-
Articles
With the app, users can access a large collection of breath-related articles that state how breathing affects our life
-
Audio lessons
Caroline records authorial audio lessons on breathing techniques that are easy to listen to and practice on the go
-
Breathing methods
& techniquesThe app is home to the large number
of breathing practises that help users improve their life
Target audience
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.
Competitive research
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.
-
Availability
Guided meditations
Changing
the voice Sleep
mode Breathing exercises Background soundscapes -
AvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes -
AvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes -
AvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes -
AvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes -
AvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes -
AvailabilityGuided meditationsChanging the voiceSleep modeBreathing exercisesBackground soundscapes
Design
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.
-
-
The main content is audio
-
sleep
Helps to gently lead the body and mind into a state of easy, deep restfulness for a long, nourishing sleep
-
focus
Helps to focus breathing on rhythm, inhalationa and light holds to take the user to peak mental performance and a clear, sharpened mind
-
energy
Helps to boost oxygen levels with vitalizing breathing techniques for greater physical and mental energy and performance
-
balance
Helps to balance balance the user’s nervous system so they feel centred, connected and calm in themselves
-
destress
Helps to destress situations with specific breathing practices that release tension and bring the user into neutral for a more level life
-
relaxation
Helps to soften and release the user's mind and body in just a few minutes — breath in and out for a complete rest
-
-
-
Daily playlists
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
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.
Logotype
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
-
Full version
-
Short version
-
Icon
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
-
Regular
abcdefghiJKLMNOPQrstuvwxyz
abcdefghijklmnopqrstuvwxyz
-
Bold
abcdefghiJKLMNOPQrstuvwxyz
abcdefghijklmnopqrstuvwxyz
-
# 323337 -
# 67CCA0 -
# FFFFFF
overview of the entire scenario
Development
sign
in with
Apple ID
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 Admin”
library
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
-
01
Supports advanced
PWA technologyAllows to work with cache prefetching
-
02
Supports SSR
Makes it possible for the page to be indexed, which is extremely important for landings
-
03
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
— ‘gatsby-source-instagram’.
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.
We linked the landing page deployed on Github to Netlify. Then connected it to Gatsby.js and Gatsby.js to all content managing platforms — from Contentful to Instagram. The problem is that Instagram doesn’t have wehbooks.
We decided to automate the build configuration process: used Zapier, an automation service that lets you create automated actions for literally everything, so that Netlify generates a new build at the scheduled time. This was how we resolved the problem.
Would you like to schedule an online meeting?
Sorry, something went wrong with your request.
Please, try again later.