Total Brain is a neuroscience-based mental wellness platform. It allows users to assess their mental health and provides them with daily exercises to train the four main brain functions: cognition, emotion, feelings, and self-control.

Torii Studio was brought in to provide Total Brain with support in creating a resonant breathing exercise for their platform. The feature is based on a scientifically-developed technique in which subjects take slow, deep breaths at controlled intervals to aid with relaxation and stress management.

The Challenge

We were tasked with turning a static rendering into a production-ready native experience for Total Brain’s mobile and web platforms. Total brain enlisted our help to:

• Create the breathing animation

• Build prototypes to achieve the right look and feel

• Implement the end-to-end experience for the website and the mobile app

The result was a customizable feature that combined animations with sounds and images to create an immersive and soothing experience for Total Brain’s users.

The Process

Our team followed a lean process to work around a series of challenges:

• Technical limitations. Both the web and mobile frameworks were using outdated libraries and processes

• Parameters. The experience had to comply with the science behind it (e.g. length of the breathing intervals).

• Multiple buy-ins. Animations and interactions had to be approved by the design, research, and engineering teams.

To make up for the platform’s outdated framework, we built a component library system that would support the new Resonant Breathing feature. Since the component system was not embedded in Total Brain’s current infrastructure, we provided the engineering team with a proof of concept that the system was fully functional before moving forward with it.

Prototyping and Research

We created a series of prototypes using the same frameworks that would be used in the production phase. This allowed us to handle limitations from the get-go and catch problems early in the design process. Our Studio worked together with Total Brain’s UX research team in a series of validation sessions to iterate and refine the product with their feedback.

Implementation

The component library supported the Resonant Breathing feature and ensured a consistent look and feel for it across platforms. It allowed our team to move fast and iterate quickly during the design process and provided Total Brain’s engineering team with a set of tried-and-tested components that they could reuse.

The Result

The new Resonant Breathing feature provides Total Brain’s users with an interactive, science-based exercise to lower their stress levels. Users have the option to customize their experience by choosing from a series of different breathing intervals, soundscapes, volume levels, and audio cues. Our Studio’s Agile process and collaborative effort with Total Brain’s design, UX, and engineering teams allowed us to build both the mobile and desktop features in just under two months.

Our success with this project led to a full collaboration with Total Brain in which we overhauled their entire platform. Find out here how we took their app from 2.5 stars to 4 stars and increased their daily user engagement by 300%.