Breath - UI/UX Case Study

May 2025

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

Pain Points

Personas

Industry Research

Current market analysis reveals a gap in applications that combine real-time air quality monitoring with features that promote community engagement and support local health and well-being. While several apps address either environmental data or social interaction, none offer an integrated experience that serves both purposes simultaneously.
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.

Industry Trends

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

Based on persona analysis and industry research, Breath is designed to foster community connection among users living in the same area, allowing them to share needs and support one another during both good and bad air quality conditions. The app uses real-time AQI data and an intuitive, color-changing interface to help users understand environmental conditions at a glance and respond accordingly.

Features

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

This system helps users quickly assess how critical each request is while browsing.

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

Prototype - Home Page

Prototype - Message

Prototype - Post

Prototype - User Profile

Final Interface Design

Conclusion & Takeways

Breath has been a deeply meaningful project for me. It taught me how to bridge environmental awareness with local, human connection. Designing this app challenged me to think beyond visual systems and consider how technology can empower people to support one another, especially during moments of isolation or crisis.
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!