Tranquility — A Mindfulness-based Breathing App 


August 2020 (3 Weeks)


Amidst a global pandemic where people are struggling with stress, anxiety, or burnout, I created Tranquility, a Mindfulness-based breathing app meant to help individuals cope with stress and anxiety one breath at a time. Tranquility's design is empathy-driven and influenced by my background in Cognitive Science & Psychology.

My Role

I completed all research and design for this passion project.

The Challenge

Individuals are struggling with physical and emotional distress as they navigate through the current global pandemic, social justice issues, and other hardships.

How could I make a difference and create something that would allow individuals to recenter and refocus amidst all these stressors?

My Solution

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

Key Features

Feelings and Mood Selector

Tranquility gives you the opportunity to select how you feel and clear your mind before beginning your session.


True Customization

Modifying a session makes Tranquility more adaptable to each individual's needs and preferences. 

A Real Companion

Tranquility guides breathers in every step of the 4-7-8 breathing cycle, with an extra period before the cycles begin in order to promote relaxation.


What Powers Tranquility

Since individuals want to know the benefits and backstory behind Mindfulness-based Cognitive Therapy, I included an information page found within the Tranquility app.

Project Timeline


The Process

If you're interested in reading the full case study, check out my Medium article linked below!

Phase 1: Empathy

A Flooded Market—Quantity vs Quality 

Although there are an exorbitant amount (2,500+) of “mindfulness” based apps that claim to provide proper mindfulness training and education, hundreds if not thousands do not meet the criteria for proper education and training.

A 2015 study identified 700 apps for mindfulness across the iTunes and Google Apps Marketplace. Only 4% of the 700 apps identified in their search provided mindfulness training and education, meaning only 23 apps met inclusion criteria and were reviewed.

Calm or Headspace

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.


Graphic courtesy of TechCrunch

Real People, Real Feedback

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

Main Takeaways 
1. People seek the basics of meditation and mindfulness.
2. The interfaces are cluttered and often difficult to navigate. 
3. Although Calm and Headspace are free to download, they aren’t truly free.


User Interviews and Getting Personal

I interviewed seven individuals with six having participated in a mindfulness exercise alone or in a group setting (meditation, yoga, deep breathing, etc.) to understand the users' behaviors.

- People don't have time for daily structured mindfulness practices, and would opt for an "On-Demand" tool.
- 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

What do people want in a pandemic?

Individuals need a simple guided breathing app that is accessible at any time.


Meet 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

I organized all the user insights into digital clusters in order to recognize distinct patterns, synthesize the qualitative data, and lay the foundation for my designs. Green dots marked reoccurring ideas while additional pink dots designated ideas that occurred over 5 times. 


An App rooted in Cognitive Science and Psychology

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. 

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.

A whole greater than the sum of its parts

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

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

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.
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 producing my affinity map and connecting the project to my background, I developed a user flow in order to guide my wireframe and map out the user journey.



My initial sketches were meant to define my goals and draft ideas that would approach the problem from different angles. ​​​​​​​


Phase 4: Design


A bridge between my sketches and working prototype, surrounding 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


Phase 5: Test

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 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.
Areas of Improvement
- 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.

A Triage of Solutions

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. 

Interactive Prototype

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.


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. 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. 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! 😁

I'm thrilled you are here. 😊

Let's Connect!

Joshua Abesamis

Product / UX / Visual Design

Contact Me

Email / Linkedin / Resume

Made with ❤️ and 🍵

Copyright © 2023 Joshua Abesamis. All Rights Reserved.