Tranquility — My mission to help individuals cope with stress and anxiety one breath at a time.

Creating and designing my own Mindfulness-based breathing app.

Josh Abesamis
10 min readDec 11, 2020
The Tranquility Breathing App

Overview

Tranquility is a guided deep breathing app for any individual struggling with stress, anxiety, or burnout. This app is meant to provide a simple way to be fully present through proper breathing. Over the course of three weeks, I conducted user research, synthesized the data, and designed the Tranquility app. Tranquility’s design is data-driven and influenced by my multifaceted background in Cognitive Science and Psychology.

Challenge

To create and design an app for individuals struggling with physical and emotional distress as they navigate through the current global pandemic, social justice issues, and other hardships.

Solution

I researched, designed, and prototyped the Tranquility app to help individuals cope through breathing techniques and Mindfulness-Based Cognitive Therapy.

View the final prototype here!

Project Timeline

As a human-centered designer, I learned that design is a continuous process full of new findings and unending iterations that ultimately result in a user-centered product!

3 Week Project Timeline (August 2020)

Phase 1: Empathy

Competitor Analysis: Assessing the Mindfulness-Based App Landscape

There are over 2,500 apps today that claim to provide proper mindfulness training and education.

A 2015 study identified 700 apps for mindfulness across the iTunes and Google Apps Marketplace. According to the Review and Evaluation of Mindfulness-Based iPhone Apps, only 4% of the 700 apps identified in their search provided mindfulness training and education. This means that only 23 apps met inclusion criteria and were reviewed.

Although there is an exorbitant amount of “mindfulness” based apps, hundreds if not thousands do not meet the criteria for proper education and training.

This study reveals a huge gap between quantity and quality in this app domain.

The Head of the Pack

Many individuals choose from only a select few mindfulness-based apps to begin their journey.

In 2019, 52 million first-time users downloaded one of the top 10 meditation apps.

Calm and Headspace led the way with 24 million and 13 million new users in 2019, respectively.

Over 71% of first-time users who seek a mindfulness-based app (from the top 10) use either Calm or Headspace, revealing a disparity between quality and quantity among the Worldwide Top 10 Meditation apps.

Graphic courtesy of TechCrunch

User Reviews and Comments

I decided to take a peek at how current users feel about the two top mindfulness apps.

Main Takeaways

  • People seek the basics of meditation and mindfulness.
  • The interfaces are cluttered and often difficult to navigate.
  • Although Calm and Headspace are free to download, they aren’t truly free.
App Store Reviews for Calm and Headspace

User Interviews

I conducted a series of user interviews in order to understand the users’ behaviors. I interviewed seven individuals, with six having participated in a mindfulness exercise alone or in a group setting (meditation, yoga, deep breathing, etc.).

Snapshot:

  • 100% of the individuals included “Being Aware” when defining Mindfulness. This included awareness of thoughts, feelings, or surroundings.
  • People don’t have time for daily structured mindfulness practices, and would opt for an “On-Demand” tool.
  • When given the prompt, “How do you think guided breathing would help you emotionally?”, participants answered that they would want to gain a greater understanding of their emotions.
  • Learning and understanding the benefits of mindfulness practices were the primary motivations to engage in mindfulness.
  • ‘Simplicity’ was included in all 7 responses when asked “What would be an important factor in a breathing app?

Phase 2: Analysis

Problem Statement

The foundation of Mindfulness is proper breathing. Therefore, individuals need a simple guided breathing app that is accessible at any time.

Persona

I chose a single persona to embody the 7 individuals that I interviewed along with the market research I conducted.

Ben the “Busy Bee”

Ben is a full-time medical school student inundated with studies and lab sessions. He also has a part-time job working at his local clinic in order to pay for his tuition and housing. He spends his free time on the weekends catching up with friends or going to a “24-hour Fitness” gym to play basketball. Ben stresses about the week ahead, struggles to live in the moment, and seldom has peace of mind. His busy schedule doesn’t even allow him to join a yoga class. He wants to learn the basics of mindfulness, but at his own pace.

Phase 3: Ideation

Affinity Mapping

After gathering all the user insights, I organized the responses into digital clusters in order to highlight the main components of my app design. Green dots marked reoccurring ideas while additional pink dots designated ideas that occurred over 5 times. This allowed me to recognize distinct patterns, synthesize the qualitative data, and lay the foundation for my designs.

Affinity Map for Tranquility

Developing a Solution

What’s the first step in being mindful? Breathing.

The root of all mindfulness practices is proper breathing. I sought to create an app that helps people begin their mindfulness journey one breath at a time. This is an app meant to guide each and every inhale, hold, and exhale.

Connecting to my Background

At UC Davis, I took a plethora of Cognitive Science and Psychology classes that shed light on the many challenges people face, affecting their health and well-being such as stress, anxiety, and mental fatigue. Below is a select number of information relevant to the app design.

A Proven Coping Mechanism: Cognitive Behavioral Therapy

Cognitive Behavioral Therapy (CBT) works on the basis that the way we think and interpret life’s events affects how we behave and, ultimately, how we feel. More specifically, CBT is a problem-specific, goal-oriented approach that needs the individual’s active involvement to succeed. It focuses on their present-day challenges, thoughts, and behaviors.

Though stress, anxiety and depression are difficult to deal with, research has shown that Cognitive Behavioral Therapy (CBT) is a proven method to help individuals cope with a number of psychological problems. In this article, the meta-analytic studies examining the efficacy of CBT demonstrated that this treatment has been used for a wide range of psychological problems. In general, the evidence-base of CBT is very strong, and especially for treating anxiety disorders.

Mindfulness-Based Cognitive Therapy

Mindfulness-based cognitive therapy (MCBT) builds upon the principles of cognitive therapy by using techniques such as mindfulness meditation to teach people to consciously pay attention to their thoughts and feelings. It provides clarity of thought and can give you the tools needed to more easily let go of negative thoughts.

The combination of mindfulness and cognitive therapy is what makes MBCT so effective. Mindfulness helps you observe and identify your feelings while cognitive therapy teaches you to interrupt automatic thought processes and work through feelings in a healthy way.

The Heart of the App: 4–7–8 Breathing

The coronavirus pandemic not only had a significant economic and social impact on a global scale, but also affected the physical and emotional well-being of people around the world. Mindfulness practices have been proven to enhance physical and mental wellness. This led me to create the Tranquility app, with breathing as its main feature.

Rhythmic breathing is a core part of many meditation and yoga practices as it promotes relaxation. It is also used as a Mindfulness-Based Cognitive Therapy (MCBT) exercise. Dr. Kristoffer Rhoads, an expert in mindfulness mediation, states, “When you’re stressed or anxious, your breathing tends to be irregular and shallow.” When using this deep breathing (or diaphragmatic breathing) exercise, it allows more air to flow into your body, giving a much-needed oxygen boost. It becomes a powerful tool to help calm nerves, reduce stress and anxiety, and improve quality of life.

In a Health Psychology class I learned a technique called the “relaxing breath” developed by Dr. Andrew Weil.

The 4–7–8 breathing technique, also known as “relaxing breath,” involves:

Inhaling for 4 seconds.

Holding the breath for 7 seconds.

Exhaling for 8 seconds.

Although the technique is very simple, people often times need dedicated time and direction to initially learn how to breathe properly.

Mastering this technique: (1) Reduces anxiety, (2) Helps a person go to sleep, (3) Manages cravings, and (4) Controls or Reduces anger responses.

User Flow

After conducting my affinity mapping and connecting the project to my background, I developed a user flow in order to guide my wireframe and map out the user journey.

Tranquility User Flow Diagram

Sketches

My initial sketches were meant to define my goals and draft some ideas to get users from ‘Home’ to a ‘Session Complete’ page. I focused on generating ideas to approach the problem from different angles. Below is a set of my latest sketches that I ultimately decided to incorporate into my design!

Early Sketches of Tranquility

Phase 4: Design

Wireframe

My wireframe was an important bridge between my sketches and working prototype.

I focused on three main ideas:

  • Visualize the user journey through clear information architecture and hierarchy
  • Create a monochromatic blueprint to lay a foundation and avoid complexities
  • Identify where key Call-to-Action buttons are positioned and their system actions
Tranquility Wireframe

Phase 5: Test

Usability Testing

Remote Usability Testing

I conducted 5 usability tests through Zoom’s screen share function due to COVID-19 and the hazardous air quality caused by the California wildfires. The results were surprising, but very informative.

The Good

  • 100% of testers found the “Feelings and Emotions Selection” page very comforting and useful.
  • 4 out of 5 individuals said that the colors I chose were “soothing” and “calming”.
  • The information page about Tranquility was a great way to explain the purpose and benefits of the app.

The Bad

  • All 5 individuals noted that there were too many animations and it made them feel anxious/stressed.
  • The transition from “ Starting the First Cycle” to “When the first second of Inhale begins” was too abrupt.
  • There was no indicator that displayed how many seconds were left per Inhale, Hold, and Exhale in each cycle.

Solution #1 — Timer Animation

I targeted the animated number scroll effect by addressing the overall motion of the design. I opted for a simple transition between numbers through a brief dissolve animation.

Solution #2 — First Breath

The abrupt start of the first cycle was an issue I did not see coming. Therefore, I implemented a 3 second timer before the inhale timer begins after the initial press of the Start button, allowing individuals to get comfortable and ready for the first cycle.

Solution #3 — Visualizing the Seconds

I needed a way to visualize how many seconds were part of each Inhale, Hold, and Exhale. I targeted this problem by adding some circular indicators that would fill as the timer progresses. This shows a current status for each part of the cycle.

View the prototype here!

Phase 6: Conclusion

Success Metrics

My final interactive prototype underwent remote user testing again. I was ecstatic when I saw the results!

All 5 Individuals:

Said that the circular indicators were helpful and provided a sense of progress and closure at each stage of the cycle.

Appreciated the 3 seconds allowing for them to get in the right mindset and position in order to begin a cycle.

Reported that the reduced number of animations made for a calmer and relaxed practice.

Reflection

We are facing a global threat with the coronavirus pandemic, never-ending social justice issues, and other problems that plague our society. These challenging times have placed undue strain on people and their families. Anxiety, stress, and burnout are affecting so many individuals, especially with the work-from-home transition.

Having just graduated from college and staying at home with family, this was an opportune time for me to lend support in some way. Drawing from the foundational theories of Cognitive Science and Psychology, I developed an idea that I knew was proven to allow people to regroup, refocus, and re-engage with their lives. Mindfulness meditation has been a growing trend around schools and offices. Many experts suggest that a simple breathing exercise can make a significant difference. With creativity and hard work, I designed an app — a simple concept called “Tranquility” — that would help people cope with physical and emotional stress one breath at a time.

Although daunting at first, I was able to complete my first app design. Conducting interviews and market research deepened my understanding of how the large-scale crises and concerns have disrupted lives and placed unnecessary physical or mental pressures on individuals and families. Personally, I have friends who find it difficult to adjust with social distancing and interactions. A continuous cycle of improvements, through a secondary round of user testing, became tedious and repetitive. But in the end, I believe I have been able to polish my design prototyping skills. It is just incredible that the Tranquility app I created has made a positive impact on a person’s stress level from the reviews of family and friends!

Thank you so much for reading! 😁

--

--