Breathing Exercises with Personality
Problem
Breathing apps work. They’re also kinda boring. Emotional design principles tend to take a backseat, making the category feel almost clinical, instead of comforting.
Solution
Replace abstract UI with character-driven animation. Each breathing technique is presented through a distinct character whose shape and motion communicate rhythm.
Impact
Currently in development. Validating design hypothesis through competitive analysis with user testing planned through TestFlight.
Setting the Stage
Breathable began the way most of my passion projects do: with a question. I had tried a number of breathing apps in the past, and even though I knew they had a positive effect on my wellbeing, I always fell off after a while.
I had a sense of why.
Do a quick search on the App Store and you will find no shortage of apps designed to assist with breathing exercises.
Seriously, try it. There’s a lot, and most of them are surprisingly alike.
Much like a calculator or a level app (the DIY tool), they see themselves as utilities.
On the surface, this is a reasonable approach. Unfortunately, it too often results in the experience being pushed to the background, resulting in predictable design patterns that sacrifice any and all form in the pursuit of function.
Functional, but ultimately kinda boring.
Even brands that have carved out distinct and beautiful visual identities in this space take a similar approach.
Headspace, just to name one, leans heavily on guided video sessions (mirroring their core offering of meditations), and places emotional weight in narration and instruction rather than in the presentation of the exercise itself.
This assumes a level of time, attention, and commitment that doesn’t always align with how, or when, people want to breathe.
And so my goal became to explore ways of making an often sterile experience feel more personal—without sacrificing simplicity or accessibility.
The question crystallized: Can emotional design elevate simple breathing exercises beyond just functionality?
I gave myself one month to find out.
Communicating Through Shape
Wanting Breathable’s form to reflect its function guided many of my early decisions. I ideated on a number of different approaches in early wireframe sketches and basic prototypes.
Early conceptualization and wireframes
What ended up clicking for me was simpler than expected. I started with one of the breathing exercises that I had enjoyed the most in the past: box breathing. Simple concept: 4 second inhale, 4 second hold, 4 second exhale, and so on.
Why not anchor this exercise in the metaphor of a box breathing? Literally.
In informal testing, the mental model seemed to stick. The analogy of a box breathing was a fairly straightforward one that I could then riff on.
Creating other models then became an exercise in finding the right shape and movement pattern to communicate the flow of each exercise.
I boiled it down to a design principle: Exercises can be designed as self-explanatory objects, where shape teaches technique and motion teaches timing.
Here’s another one I did for a technique called nostril breathing. Same concept, but this time each shape corresponds to alternating nostrils for inhale and exhale.
The Hypothesis
Emotional design can make a breathing exercise feel supportive (and delightful) by embedding emotional feedback directly into shape, motion, and character.
A Dash of Personality
With the basic functionality and mental models in place, it was time to ideate on the emotional design hooks.
Since the user would be met with the exercises immediately upon opening the app, it was important to make them feel both enticing and novel. The visceral experience should strike a balance between playful and calming.
In Don Norman’s words: “Technology should bring more to our lives than the improved performance of tasks: it should add richness and enjoyment”.
Going back to the mental model of the breathing box, I wanted to take it one step further.
So, I gave the box a face.
Just a lil' guy.
Transforming the shapes into characters became a way to introduce emotional feedback in a playful way.
Subtle expressions reinforce the breathing cycle: eyes close during the first inhale, soft blinks during idle states. These cues align with the rhythm and provide subtle feedback.
I used Rive to experiment with character states. Parameters like color and scale would be the primary indicators of sequential steps.
Experimental character states
Breathing exercises on the home screen
The Interaction Model
With this shape-centered approach to the exercises, the initial work on defining the interaction model became fairly straightforward.
It was important to me to design with minimal UI and keep the exercises themselves center stage and readily available. A common pain point in App Store reviews and Reddit threads was navigating through multiple menus to get to an exercise.
Each shape would live on its own screen, with different exercises being accessible through simple horizontal swipes. Like selecting a character in a video game.
Each exercise was given a counter to let the user determine the amount of breaths, with a time estimate for information clarity.
No menus to navigate. No categories. The exercise catalog would be the interface.
Breathing exercise flow in high-fidelity
Where It Stands
Breathable is still in development. The first batch of Rive animations are functional, and I'm currently building out the iOS prototype in SwiftUI.
What I’m most interested in validating is whether exercises that communicate technique through character feel clearer, and more inviting than abstract UI.
A few things crystallized through this process:
Character design is interaction design. Characters can serve as instructions as well as emotional hooks. Shape communicates technique, expression communicates personality.
Knowing what to remove matters. I deliberately cut features that competitors rely on: badges, streaks, session ratings, accounts, post-session stats. Breathing apps shouldn't borrow retention mechanics from apps competing for your attention.
Emotional design is underexplored in this space. Most breathing apps optimize for function. Few consider how the experience should feel.
Next up: finish the prototype, use it myself for a few weeks, then run peer walkthroughs to test whether the mental models hold.