AQI Gram

Breath of Fresh Insights,
Empowering You to Thrive

Our air quality app is meticulously designed to provide users with a transformative and empowering experience. From the moment users open the app, they are immersed in a visually engaging and user-friendly interface that intuitively guides them through their air quality journey.

The experience is crafted to deliver a seamless fusion of information, community, and personal well-being. Users can access real-time air quality data, engage in supportive community interactions, discover tailored events and activities, and explore resources for managing their air quality concerns. Through this holistic experience, users are empowered to make informed decisions, cultivate a healthier lifestyle, and thrive in an environment where clean air is celebrated.

My Role:

UX/UI Designer

Product Demo

22+

Screens

18+

research hrs

12+

Design Hours

3

Team members
User Research

Understanding Your Needs, Enhancing Your Air Quality Experience

Our air quality app aims to understand the unique needs and challenges of individuals when it comes to air quality.

User Persona

Have you meet Maria?

Maria is a hardworking office manager in her mid-thirties. She lives in a densely populated area in Los Angeles, where air quality is poor. She has asthma, which is exacerbated by the polluted air, causing anxiety, discomfort, social isolation, and loneliness. Maria’s favorite outdoor activity is walking in the park, but she often feels restricted due to her health condition.

AQI Gram - User Persona
“Living with asthma in an air quality deprived area can be challenging, but I’m determined to find ways to improve my well-being and connect with others.”
User Sentiment

Goals: Maria wants to find a way to manage her anxiety and discomfort caused by her asthma, improve her social connections, and find support within her community.

Frustrations: Maria is frustrated by the limited options for outdoor activities due to poor air quality in her area. She also feels isolated and lonely because her asthma prevents her from participating in social events and meeting new people.

User Story

As a Hispanic woman with chronic asthma living in an air quality deprived area, I want a mobile app that provides real-time air quality information, connects me with support groups, and offers relaxation techniques to manage my anxiety and discomfort.

User Journey

Empowering You to Breathe Better, Every Step of the Way

From discovering the app to experiencing a transformative journey, users of our air quality app are guided through a seamless process of learning, connecting, and taking action. From discovering the app to experiencing a transformative journey, users of our air quality app are guided through a seamless process of learning, connecting, and taking action.

Step 1: Discover and Download

User learns about the air quality app and decides to download it from the app store.

Step 2: Onboarding and Personalization

User opens the app for the first time and is guided through a quick onboarding process, providing relevant information such as location and health conditions for personalized recommendations.

Step 3: Home Screen Overview

User is directed to the home screen that displays real-time air quality information for their location, including air quality index (AQI) and pollutant levels. Notifications regarding outdoor air quality are also shown.

Step 4: Exploring Features

User explores different features such as community support, events, indoor activities, and resources. They join relevant groups, engage in discussions, register for events, bookmark activities, and read articles for managing air quality-related concerns.

Step 5: Alerts and Notifications

User receives alerts and notifications about significant changes in air quality, personalized recommendations, weather conditions impacting air quality, and updates from the community.

Step 6: Regular Monitoring

User periodically checks the app for updates on air quality, community discussions, and upcoming events. They stay informed and connected with their community, gaining support and knowledge about managing air quality and its impact on their health.

User Flow

Breath Easy, Stay Informed: Your Guide to Clean Air

Maria starts by logging into an app and is taken to her personalized home screen, showing the current air quality and outdoor air quality notifications. She then explores the community support feature, finding relevant groups and forums to connect with others. In a group focused on asthma, Maria engages in discussions, asks questions, and shares her experiences. She also discovers the events section, offering both in-person and virtual activities for people with chronic health conditions. Maria registers for a virtual meetup in the following week. Additionally, she finds a section dedicated to indoor activities and resources promoting well-being and managing anxiety. Maria regularly checks the app for air quality updates, community discussions, and upcoming events, finding valuable support and connection.

AQI Gram - User Flow4
Experience Design

Empowering You to Breathe Better, Live Better

AQI Gram air quality app is crafted to provide users with a holistic and empowering experience. Through thoughtful design and a user-centric approach, we aim to enhance the overall well-being and quality of life for our users.

Information Architecture

The information architecture of our air quality app is designed to provide users with a clear and organized structure, allowing them to easily navigate and access relevant information. The app’s information architecture categorizes content into intuitive sections, such as home screen, community support, events, indoor activities, and resources. Each section is carefully structured and labeled to ensure users can quickly find what they need. Additionally, the app employs a hierarchical approach, prioritizing essential information like real-time air quality data and notifications, while providing deeper layers of content for further exploration. Through thoughtful information architecture, users can seamlessly navigate the app, find valuable insights, and take informed actions to improve their air quality awareness and overall well-being.

Welcome Screen:
  • A visually appealing welcome screen with the app logo and a captivating background image related to air quality or nature.
  • Clear and prominent call-to-action buttons for login and sign-up options.
  • Brief introductory text or carousel showcasing the app’s key features.
Dashboard:
  • A clean and organized dashboard featuring a user-friendly interface.
  • Display of the current date, time, and weather information in addition to the AQI readings for the user’s selected location(s).
  • Integration with weather data to provide a holistic understanding of environmental conditions.
  • Interactive graphs or charts showcasing historical air quality trends.
Location selection:
  • An improved location selection screen with an intuitive search bar that offers autocomplete suggestions as users type.
  • Location cards or a list view presenting chosen locations along with their AQI values and weather conditions at a glance.
  • Option to add new locations with the help of geolocation or manual input.
Air Quality Details:
  • A comprehensive and visually appealing screen providing detailed information about the air quality of a selected location.
  • Prominent display of the AQI value and a visual indicator, such as a color-coded scale or iconography, for easy comprehension.
  • Breakdown of pollutant components contributing to the AQI, accompanied by informative visuals like charts or circular gauges.
  • Interactive elements allowing users to explore additional details about specific pollutants and their health impacts.
Alerts and Notifications:
  • An improved section for setting up personalized alerts and notifications based on preferred air quality thresholds.
  • Clear and easy-to-use interface for configuring notification preferences, such as choosing the notification method and frequency.
  • Option to enable real-time push notifications for instant updates on air quality changes.
Educational Resources:
  • A visually engaging section offering a range of educational resources related to air quality.
  • Rich multimedia content, including articles, infographics, videos, and interactive quizzes, to educate users about pollutants, health effects, and preventive measures.
  • Easy navigation with categorized content and a search function for quick access to specific topics.
Settings:
  • A well-structured settings screen enabling users to personalize their app experience.
  • Customization options for language, units of measurement, preferred themes, and app notification preferences.
  • Account management features, including profile editing, password changes, and account deletion.
Lo Fidelity Wireframes

The lo-fidelity wireframe for the air quality app consists of the following key sections: Welcome screen, dashboard, location selection, air quality details, alerts and notifications, educational resources and settings.

Please note that this is a simplified description of the lo-fidelity wireframe. The wireframe itself would include basic visual representations of the described elements, focusing on layout, content placement, and overall user flow.

Moodboard

Embrace a clean and minimalist design approach to communicate a sense of purity and simplicity. Incorporate elements from nature, such as subtle gradients, organic shapes, or natural textures, to evoke a sense of freshness and environmental connection. Consider using calming shades of blue, green, and earthy tones to reflect air quality and outdoor environments.

 

AQI Gram - Moodboard
Interaction Models

AQI Gram is designed to provide a user-friendly experience, focusing on seamless interactions and empowering features. With a clean and intuitive design, users can effortlessly navigate through personalized screens, access real-time air quality data, receive notifications, and engage with community support.

Dashboard

Select between a variety of index statistics. The display changes color from red (poor) to green (excellent) based on air quality metrics in the area.

Navigation

Select between list, map and chart views for any location. AQI Gram® allows users to experience and engage the data in ways that work best for them.

Notifications

View notifications that matter, when they matter. Select notification for more details. Save, send and share real-time alerts with friends and family.

Hi Fidelity Prototype

The hi-fidelity wireframe for the air quality app builds upon the lo-fidelity version with added visual details and refined design elements. Here is a detailed description of the key sections and functionalities:

AQI Gram - Prototype

The app’s interaction design ensures ease of use and quick access to relevant information, promoting a breath-friendly experience. Users can effortlessly explore different features, from community discussions and event registration to indoor activities and well-being resources. The goal is to enhance user engagement and foster a sense of connection and support within the air quality community.

Interface Design

Intuitive Design for a Breath of Clarity

Our air quality app’s UX interface design combines aesthetic appeal with usability to provide users with a seamless and engaging experience. The interface follows a clean and minimalistic design approach, focusing on clarity and readability of information.

Location 

Allow users to update location settings or view specific AQI metrics within a given radius.

Notifications 

List of possible threats and warnings within a given radius.

Air Quality 

Display primary metrics with regard to the current AQI category. Refresh content for realtime metrics.

Navigation

Change between list, map, and notifications view mode.

The app not only offers real-time air quality information but also fosters a sense of community and support by connecting users with like-minded individuals facing similar challenges. With a focus on indoor activities, resources, and coping strategies, the app aims to promote well-being, manage anxiety, and empower users to take control of their air quality and overall health.

Real-Time Monitoring

Stay Informed, Breathe Confidently

AQI Gram® provides you with up-to-the-minute monitoring of the air quality in your area, empowering you to make informed decisions about your health and well-being.

Our intuitive interface displays the information in a clear and easily understandable format, ensuring that you have the necessary insights to take appropriate actions, such as adjusting your outdoor activities, planning routes, or using protective measures.

Alerts and Notifications

Stay Aware, Connect and Thrive.

AQI Gram® keeps you informed and ensures that you never miss a beat when it comes to the air you breathe. With our comprehensive alerts and notifications system, you’ll receive timely updates on changes in air quality, allowing you to make informed decisions to protect your health.

With our advanced sensor technology and data integration, we deliver accurate and real-time updates on pollution levels, allergens, and other factors affecting the air you breathe.

Next Steps

Taking the Next Breath with Confidence”

Building upon the solid foundation of our air quality app, our UX team is dedicated to continuously improving the user experience. The next steps in our journey involve refining existing features, introducing new functionalities, and enhancing the overall usability of the app. We will conduct thorough user testing, gather feedback, and analyze user behavior to identify pain points and areas for improvement. Our focus is on streamlining navigation, optimizing performance, and incorporating user-centric design principles. Through iterative design iterations, we aim to create an even more intuitive, efficient, and delightful experience that empowers users to effortlessly monitor and manage their air quality, ultimately improving their well-being.