Design System - Breth
Shipped work - Mobili-T
Discussion on design craft, product discovery and collaboration, my familiarity with U.S. healthcare, and how I've grown other designers
Questions for Martha
• Lead (only) product designer, from discovery through launch (software, hardware, brand, marketing)
• Shipped from 0 → 1 in ~12 months
• Launched on Indiegogo (for early adopters/testers) + Kickstarter
• Successfully transitioned to e-commerce sales
• I led validation with testers and customers across home, classroom, and clinical contexts
I designed the three synchronized layers to be experienced independently, but together create a cohesive system that guides through sensory immersion.
While the visual system was designed with design tokens and annotated guidelines in mind through a primitive>semantic framework, the sensory considerations required additional layers of testing, documentation and communication across the team that didn't fit into a conventional design system package.
Due to the speed and startup nature, it was messy, but managed through close-knit collaboration, dedicated focus time, and rigorous documentation.
Soft, flowing motion paths mirror the structure of each breathing pattern. Providing clarity without demanding focus. Dark mode only at launch for a relaxing experience (and time constraints).
A pair of actuators create precise, rhythmic pulses across the body. Guiding inhales (felt on the top actuator), holds, and exhales (the bottom actuator) through touch alone.
Soundscapes and heartbeat patterns deepen immersion, reinforcing timing and emotional tone. I designed them to sync with the visuals and haptics.
I designed each experience to be anchored by a single glowing sphere. Like a fingertip guiding your breathing.
It acts as a visual guide that:
Reduces cognitive load
Maintains time & pacing (no need to count)
Keeps attention grounded when desired
Rather than presenting information, the interface directs attention.
As the sphere moves through each phase of breath, it crosses a boundary - marking the transition from inhale to hold to exhale. A shift in shadow creates a sense of direction, a quiet signal that something has changed.
Every breathing exercise is built on the same visual logic:
Upward movement → inhale
Horizontal → hold
Downward movement → exhale
This creates a system people can understand almost instantaneously.
Each breathing pathway includes an interior space for written cues, reinforcing timing and instruction, especially for the more complex breathing patterns, like triple breathing.
Each path starts neutral grey, fills with activity specific colour through inhale/hold, and recedes on exhale - visually mirroring full and empty lungs.
• White text on near-black canvas: ~21:1. Well above the 4.5:1 body-text minimum for 2.1 AA.
• Grey secondary text (#8E8E93) on black: ~5.6:1. Passes AA.
• Coloured glows add a layer of instruction but are never the sole indicator. Every activity is also labeled in text.
• Primary buttons pair high-contrast fill with a text label, not colour alone.
• Audio cues were considered for visual impairments or for individuals closing their eyes, but were not included at launch. The vibrations themselves provide surprising clear direction through feel alone.
Brand
An open wordmark echoes the openess of breathing, while reinforcing the physical, sensory nature of the product, by including the power button featured on the device.
Splash Screen
A subtle glow radiates from the “b,” introducing haptic feedback at the core of the experience as the app is opened.
Baseline
Breathing Baseline assesses breathing capacity through a two-minute exercise. A glowing sphere moves along the brandmark’s path, acting as a visual timer while the device measures each breath with onboard sensors and a filter algorithm.
Results
Baseline results produce an Inex score (short for inhale/exhale) - the maximum comfortable duration for inhales, exhales, or holds during activities. This ensures every exercise stays within your control.
Each modality - haptics, visuals, and audio - can operate independently.
This allows the experience to adapt to context:
Full guidance when learning
Minimal guidance once familiar
Fully screenless when desired
The interface supports the system, but never becomes a dependency.
Breth (unfortunately) is a product that is not fully understood until you experience it in person. The haptic vibrations are glorious and unexpected.
I tried to bridge this gap through motion within the product's visuals and throughout marketing.
Creating a visual language that invites that in-person experience by visualizing the vibrations.
Watching the surprise during use was a real joy.
The response was consistent:
surprise → calm → curiosity → repeat use
What made it meaningful was seeing how it attraced different use cases - from quiet moments at home helping a kiddo calm down after school, shared experiences in classrooms or an athlete getting mentally ready before an important game.
Navigating complexity is awesome and something I love.
Design is not linear. Trying to stick to ideal process ≠ ideal outcomes. You have to be fluid.
Messiness and chaos are managed through communication. Even when it's uncomfortable.
Everything is manageable when you're working with people you trust (and genuinely like).
Accessibility considerations need to be established at the outset to ensure inclusivity and scalability.
Figma's annotations aren't great. I would now use CVS Health's Web Accessibility Annotation Plugin Kit from the outset - especially when designing for more complex platforms.
Current resources through Claude Code MCP integration (ex. skills that check WCAG AA 2.1 standards), Mobbin integration (for UI/UX inspiration) and Figma UI Kits (like Google's Material Kit) drastically alter the speed and communication for product ideation.
Designing a three-tiered design system (brand/alias/mapped structure) from the outset is something I would likely employ for complex design systems. It seems to lend itself to improved communication and scalability.
Breth builds on a simple challenge: while breathing exercises are widely understood to support stress regulation and focus, they’re often difficult to follow, remember, and maintain in practice. Like any routine, consistency and accountability matter.
I researched existing techniques and turned them into experiences that feel intuitive and easy to use. The experience is built around three synchronized forms of guidance: visuals, audio, and haptic vibrations.
After performing a baseline to analyze your breathing capabilities, each form of guidance synchronizes to reinforce the rhythm of your breath. One of my goals was to ensure each form of guidance could also function independently depending on user preference and context. Together, they create a flexible, multi-sensory system that helps users stay present, whether they’re looking for calm, focus, or a reset.
As the sphere moves through each phase of breath, it gently crosses a boundary - marking the transition from inhale to hold to exhale. A subtle shift in shadow creates a sense of direction, a quiet signal that something has changed.
Paired with synchronized haptics and sound, this moment becomes more than visual. It’s felt, heard, and seen all at once. Guiding without needing to think.
Splash Screen
A subtle glow radiates from the “b,” introducing haptic feedback as the core of the experience as the app is opened.
Onboarding
I designed the onboarding to use clear, progressively disclosed animation and text to guide setup seamlessly leading into breth’s first baseline activity.
Baseline
Breathing Baseline assesses breathing capacity through a two-minute exercise. A glowing sphere traces the brandmark’s path, acting as a visual timer while the device measures each breath.
Results
Baseline results produce an Inex score (short for inhale/exhale) - the maximum comfortable duration for inhales, exhales, or holds. Ensuring every exercise stays within your control.
Each exercise begins with a neutral grey path that gradually fills with color as you inhale and hold. As you exhale, the colour recedes - visually reinforcing the feeling of full and empty lungs.
The guidance visuals follow a simple, consistent system: upward movement for inhales, horizontal for holds, and downward for exhales.
Every shape is designed to mirror the motion and rhythm of the exercise, tracing a path your finger could follow to intuitively understand both sequence and timing.
Each exercise was designed to sit within a cohesive system, while remaining distinct, intuitive, and easy to recognize.
Breth syncs devices for connected stress relief.
Synchronized sessions bring people into the same rhythm. Through testing, parents, teachers, and partners consistently expressed a desire to share breathwork - whether helping a child settle, or unwinding together after a workout. In response, breth was designed to make shared sessions frictionless. When multiple devices are powered on, the option to begin a synchronized experience appears seamlessly at the start of any activity.
This foundation also opened the door to guided group sessions. Partnering with local yoga and mindfulness studios, breth supports instructor-led experiences where up to 15 devices can connect simultaneously - bringing entire rooms into a shared rhythm of breath and calm.
Not every moment of calm should come with a screen. Breth was designed to let you step away from your phone and stay fully present - guided entirely through haptics. Whether you’re doing a few minutes of breathing exercises after a workout, resetting between meetings, getting ready for bed or simply don’t have your phone nearby, the experience remains seamless.
With screenfree sessions, you can preload your favorite activities, choose a duration, and access them directly from your device by long-holding or double clicking the button. Three pulses indicate the start of the activity (ding-ding-ding), and your preloaded activity begins.
Screenfree sessions were introduced to provide haptic guided stress relief without being tethered to your phone.