Tempo Meditation and Breathing App Case study

In this case study, I’m going to talk about my process of how I designed Tempo’s website from scratch. I will share my process, design decisions, and approach towards the design.

Overview

The inception of this project began a month ago when our client, who is also a practising pharmacist in the United Kingdom, reached out to us with his idea of mindfulness and breathing application, we were more than excited to lay our hands in the process. His main purpose was to allow users to breathe effectively because he believes and has been proven that the way we breathe affects our mental and physical health. He not only came up with the idea but he also had some of the detailed sketches of the concept and how he wanted the design of the application to be.

According to the stats, alone in the US, around 15.27 million people suffer from depression every year and more than 300 million people worldwide as per a renowned report. While more than twice of those numbers showed up for anxiety.

The constant technological distraction and changing lifestyles have destroyed our ability to focus on something for a longer period of time. Now, more than ever before, is high-time to do something about our mental health and physical wellness and that’s where our application with its guided breathing technique - Tempo fits in.

Basics Before we start, let’s see what it took:

• Time : 15-20 days
• Tools : Adobe XD, Figma, Canva

The Problem and the Motivation:

Breathing is such an essential part of our lives that it's possible that many of us overlook it. We can have conscious control of it when we are talking or singing. It is also, thankfully, automatically controlled such as when we are sleeping or when we are concentrating on other things.

While it is obviously essential to breathe regularly, the way you breathe is also important and can have a direct effect on your mental and physical state. Good breathing involves inflating the lungs as fully as is possible and in a controlled, rhythmical way. Breathing is like many actions we perform, there's a good way to breathe but there are also less efficient ways.

The main goal for us, at Multiverse Software, was to:

Introduce users to a new way of Breathing
Multiple Breathing patterns to choose from
Ability to upload your own breathing patterns
Form a strong community
Helping Vibrations, voice-over and background music

Goal

Our main goal was to create an app with the following traits:

Allows the user to use personalized curated breathing patterns.
Allows the user to create and use customized breathing patterns.
Keeps the user engaged for a longer period without distraction.

Design Process

When starting on a project, I usually use the Design Process to make my designs be as consistent as possible. The UX design process can be divided into four key phases: User Research, Define & Analysis, Strategy and Design.

The Concept

We did not just want to provide guided breathing techniques to our users but also let them know that we care as Tempo provides the user with a platform to form a breathing community. This breathing application has numerous guided breathing techniques which are very well thought and curated according to different needs of the user. The “Build Your Community” part allows the users to upload their customized breathing patterns which they themselves or other people might want to use.

Competitive Analysis

During our research, we observed that, while many mindfulness applications available on the internet help users with breathing patterns, the breaths are very generalized, it is assumed that everyone is using the app with the same state of mind.

We decided to break this generic pattern, so this is how we stand out:
Well thought breathing patterns for every individual like Anti-anxiety and Energise to name a few.
Create customizable breathing patterns.
Make and use the breaths made by the community.
Create your own strong breathing community.
Calm and soothing themes and animations.
Perfectly synced breaths with customizable vibrations and voice-overs.
Also, every feature is free.

Competitors

Mostly Calm and Oak stole the show for both platforms, with over a million users each. Most Importantly, they did a few things, if not none, wrong. Calm had been Editor’s choice, and the most popular Meditation app on Android.

Mostly, Calm and Oak stole the show for both platforms, with over a million users each. Most Importantly, they did a few things, if not none, wrong. Calm had been Editor’s choice, and the most popular Meditation app on Android.

If you have read the book Blue Ocean Strategy, you must be familiar with the concept of red and blue oceans. Renée Mauborgne explains that if you are competing with mammoth companies, the best strategy is to create a whole new market for your product, which instead of competing with the former products, complements them.

Our goal was not to compete with apps like Oak or Calm, rather make a whole new product that delivers a great user experience without getting bombarded with hundreds of ads, or continuously bottlenecked by your free plan. Need to add some buttons? here they are!

Insights

We did kinds of research about other apps and we found that people do not really enjoy using the apps because the billing is overpriced and without notification just charged into their CC.

In addition, the user does not feel comfortable with the meditation options provided and even makes the user more stressed.

And there are users who feel that this application lacks the auto sleep feature so that the user has to turn it off even though he is very sleepy.

“The weakness of an enemy forms part of your own strength.” This gave us insights to the most occurring problems in meditation apps at present.

From several reviews from other apps, we got some inspiration on what we should implement and in our apps such us every feature is free, Perfectly synced breaths with customizable vibrations and voice-overs, and Create customizable breathing patterns based on your preferences.

Proposed Solution

We came up with the following differentiating factors from other top apps.

“Minimal yet energetic Interface”

Our goal was to design a product that was not really Material and neither Cupertino but delivered a very familiar feel, so users did not have to search for any option, everything was right there, without overwhelming the users.

Sitemaps

Every website should have a goal and a purpose. Sites without clear goals are often unfocused and hard to navigate. So, we decided to make a sitemap so we could better understand the user’s paths and the platform’s structure.

User Flow

There are many different ways for users to interact with products. A user flow is a visual representation, either written out or made digitally, of the many avenues that can be taken when using an app or website (BROWNE, 2019) . The flow cart begins with the user opening Tempo’s app like onboarding screen or homepage and ends with the final action or outcome, like listening to the audio or signing up for an account.

Paper Prototype

Paper prototyping apps and websites is a method some design teams use to begin conceptualizing a new product or feature (Joseph Downs, 2021). Also it also helps to demonstrate the user flow and functionality that your future design will have in the very early stages of ideation. These played the part of low-fi wireframes.

Design System

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product. (Hacq, 2018) Design systems makes design consistent as a tool for designer and also developer to make patterns, guidelines and unique for every application.

UI Design

There are several considerations when I designed Tempo’s App It is a sleep application so it needs to be simple It will probably be used a lot in the evening so a darker UI is essential Because this is for breathing apps, I need to cut unnecessarily complicated or long flow. The goal should be to take as much work off of the user as possible. When you open Tempo’s homepage, there are several categories to choose from, made by us, made for you and made by the community.

Made by us

There are several types of breathing provided by the tempo app. It can be adapted to our current situation. Like when we are energized, we can choose to energize, or when we feel stressed we can choose the type of stress relief.

Made by you

Made by you is the type that breathes that we make ourselves so that we can adjust to our wishes.

Conclusion and Considerations

While developing this, there is a lot of consideration and iteration process to make it user friendly apps. Personally during this project I learned three things:

Always listening users
Don’t try to solve everything, or you’ll end up with nothing
Don't focus on solutions, focus on problems

During this process, me and my team often have discussions with Mr Philippelan so we can be really clear about what the user feels. There is also some feedback from tempo’s app.

Try Tempo on Android