Multi Platform Design System
(Web, Mob, B2B, B2C)
I embarked on creating a comprehensive design system for AirQo. The design system aims to provide a unified framework that offers a set of guidelines, components, and patterns for designing and developing intuitive B2B and B2C tools for air pollution information and data visualization. This not only facilitates the creation of consistent user experiences across mob and web but also enhances the usability of data visualizations
Problem statement
Air pollution is a pressing global issue, and effective communication of air quality data is vital for individuals, organizations, and researchers. However, there was a lack of cohesive design resources and guidelines to help Designers, Developers, Researchers, and Organizations create intuitive air pollution data visualizations.
Challenge
AirQo operated across various platforms, including a B2C mobile app, a B2B analytics platform, a product website, and awareness events. The challenge was to unify these disparate platforms under a single, cohesive design system that could cater to the unique needs of each while maintaining consistency.
Solution
Leveraging air pollution concern levels, a widely recognized framework ranging from Good to Hazardous, we developed the AirQo Design System. This comprehensive toolkit provides clear guidelines, reusable components, and design patterns for creating intuitive B2B and B2C tools. We introduced emojis as a central element in our data visualizations to symbolize air pollution concern levels, enhancing data storytelling, and simplifying cross-cultural communication.

Success Metrics
1. Time on Development/Design
2. Adoption
3. Consistency

Impact
The AirQo Design System has made a significant impact at AirQo. In under 60 days, we successfully prototyped and initiated implementation for two web applications and one mobile app, greatly speeding up our development process.

Two developers have adopted and continuously integrated the design system, leading to improved consistency and efficiency in our digital projects. Notably, the design system has helped us address data accessibility issues in the AirQo Mobile Application, resulting in a more user-friendly experience.
Iconography Design
What's AirQo and the Air Pollution Mobile App?
AirQo's AirQo Monitor is not just a key element in our global success in the air pollution arena; it's the very reason we secured over $4 million in grants from Google.

Recognizing the pivotal role this device plays, I created an iconography set specifically for the AirQo Monitor and other services integral to our data ecosystem. This endeavor was more than just fun; it was a chance to leverage my design superpowers.
Details
Responsibility
Lead Designer
Product Strategy
Feature Scoping
Research
Interaction Design
Visual Design
Prototyping
Testing and Launch
Team
Belinda M.(Frontend)
Faith D.(Frontend)
Maclina B.(Marketing)
Date
Nov 2022 - June 2023