Breath - UI/UX Case Study
Breath is a community-based app designed to support people living in areas affected by poor air quality. In a time of overlapping environmental and social crises, Breath helps neighbors connect, offer support, and build resilience together.
Responsibility: User Experience (UX), Designer Interaction (IxD), Designer User Interface (UI), Designer Brand Identity, Designer Brand Strategist, Producåt Designer
Tools: Figma, Miro, Adobe Photoshop
Duration: One Month
Problem
Creating a platform for neighbors in a low-lying neighborhood in South Brooklyn where people are advised to stay indoors almost every day due to poor air quality after wildfires in Staten Island and New Jersey.
WHEN THE AIR GETS WORSE, OUR CONNECTIONS DO TOO.
As poor air quality becomes a daily reality in parts of South Brooklyn due to wildfires, residents—especially the elderly, first responders, and international students—are increasingly confined indoors, leading to isolation, uncertainty, and a breakdown in neighborly support.
Without reliable ways to communicate, share local updates, or offer and receive help, people struggle to stay safe, informed, and connected in their own communities—just
when they need each other the most
Without reliable ways to communicate, share local updates, or offer and receive help, people struggle to stay safe, informed, and connected in their own communities—just
when they need each other the most
Pain Points
Personas
Industry Research
Existing apps can be broadly categorized into two groups:
- Air Quality Monitoring & Weather Apps
- Focus primarily on delivering real-time data such as AQI, pollen levels, and pollution forecasts.
- Typically lack interactive or social features, limiting user-to-user communication or mutual aid functionality.
- Community Engagement & Support Apps
- Facilitate neighborhood level communication through posts, messaging, and event coordination.
- Do not integrate environmental health data or provide alerts related to air quality conditions.
- Rising Demand for Environmental Awareness: Increasing public concern over climate change, wildfires, and pollution is driving the need for platforms that provide real-time environmental insights.
- Health-Focused Digital Tools: Users are shifting toward apps that offer personalized, actionable recommendations based on environmental conditions, especially for vulnerable groups.
- Hyperlocal Relevance: There is growing interest in location-specific data and services, enabling people to make informed decisions about their immediate surroundings.
- Mutual Aid in Crisis Conditions: During periods of poor air quality, many seek community-based support, such as assistance with errands, child or pet care—demonstrating the need for tools that merge environmental alertswith social utility.
Competitive Analysis
Solution
1. Dynamic UI Based on AQIThe app’s interface changes color depending on real-time air quality:
- Green: Indicates good air quality, encouraging users to go outside and engage with their community.
- Gray: Signals unhealthy air quality, suggesting users stay indoors. This visual cue offers a direct and non-intrusive alert system.
2. Posts Feed
On the homepage, users can scroll through community posts to see what others need or offer. Posts are:
- Stacked and collapsible, creating a clean feed.
- Color-coded by urgency, helping users quickly prioritize which posts to respond to.
- Expandable, so users can tap to view full details.
3. Categorized Emergency Levels
When creating a post, users can select from three urgency levels, each with a distinct color:
- Urgent
- Moderate
- Chill
4. Knock on Door Feature
Instead of composing a message, users can simply tap a Door Knob button to show interest in helping.
- It makes offering help quick and pressure-free.
- Ideal for introverted users like Grace, who may want to help but feel hesitant to initiate conversation.
5. User Profile with Passive Needs
Users can select common needs from a predefined list (e.g., groceries, pet care, medicine pickup) to display on their profile:
- No need to make a post if they don’t feel comfortable.
- When others visit their profile, they can immediately see if they’re a match to help.
- This passive system creates a low-effort way to express needs and build mutual aid networks.
Information Architecture
Style Guide
Final Interface Design
Conclusion & Takeways
Takeway
Many existing air quality apps focus solely on data, but I wanted to create something that encourages interaction and response within local communities. This was my first time blending environmental data with community-driven features, which taught me to think deeply about how people behave when they’re feeling vulnerable or uncertain. I also learned to consider not just how the app looks, but how it functions in real emergencies, where every feature needs to be efficient, intuitive, and immediately clear to users.
What I’d do differently
I wish I had conducted more user testing throughout the development of Breath. User testing is one of the most valuable ways to gain insight for me, not just into usability, but into how people emotionally experience the design. Seeing real users interact with the app would have helped me refine features to better meet their needs and expectations. In the future, I plan to integrate testing earlier and more frequently in the design process.
Thank You For Reading!