UI/UX Application
Design

2020

Breath method

App screens examples
Leafs
  • 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.

Nature small image
  • Idea

  • Research

  • Moodboard

  • UI/UX design

  • Development

  • QA testing

  • Release

Flowers

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

Waves
  • Articles

    With the app, users can access a large collection of breath-related articles that state how breathing affects our life

    Nature image
  • Audio lessons

    Caroline records authorial audio lessons on breathing techniques that are easy to listen to and practice on the go

    Nature image
  • Breathing methods
    & techniques

    The app is home to the large number
    of breathing practises that help users improve their life

    Nature image

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.

Breath well Leafs Moon
Waves

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
  • Headspace
    Availability
    Guided meditations
    Changing the voice
    Sleep mode
    Breathing exercises
    Background soundscapes
  • Calm
    Availability
    Guided meditations
    Changing the voice
    Sleep mode
    Breathing exercises
    Background soundscapes
  • Mo
    Availability
    Guided meditations
    Changing the voice
    Sleep mode
    Breathing exercises
    Background soundscapes
  • MyLife
    Availability
    Guided meditations
    Changing the voice
    Sleep mode
    Breathing exercises
    Background soundscapes
  • Meditopia
    Availability
    Guided meditations
    Changing the voice
    Sleep mode
    Breathing exercises
    Background soundscapes
  • Oak
    Availability
    Guided meditations
    Changing the voice
    Sleep mode
    Breathing exercises
    Background 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.

  • Home screen Home screen
  • Categories categories

The main content is audio

By topics
  • 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

Bark
  • Relax screen relax page
  • Relax screen energize page
  • Relax screen focus page
  • Daily
  • Daily breath

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.

  • Breath pendulum
  • Relax pendulum
Leaf image

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
Water image

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

Aa
NUNITO SANS
  • Regular

    abcdefghiJKLMNOPQrstuvwxyz

    abcdefghijklmnopqrstuvwxyz

  • Bold

    abcdefghiJKLMNOPQrstuvwxyz

    abcdefghijklmnopqrstuvwxyz

  • #323337 clouds
    # 323337
  • #323337 leaf
    # 67CCA0
  • #323337 clouds
    # FFFFFF

overview of the entire scenario

Overview

Development

  • Enter screen
  • Sign-in screen

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.

Touch-id
touch ID
Face-id

“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.

Laptop

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 technology

    Allows 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

Leaf

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.

Breath #takeabreath
Breath #takeabreath
Breath #thebreathmethod
Breath #thebreathmethod
Breath #thebreathmethod
Breath

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.

What’s
next?

  • We’re currently doing regressive testing
  • The client tests the app by themselves
  • We release the app in the App Store
    and Google Play
Leaf
Sea