Published in


A Mask For Your Workout, Made Smart In China

How we helped to design and build the app for Microsfere’s smart pollution mask. The mask was launched for fitness fans in China to combat bad air quality while tracking their performance.

Living in China while staying fit and healthy can be tough with air pollution and Coronavirus concerns. While air pollution in major cities has been on the decline for years, there are still peak days during given seasons. Especially for runners or cyclists, this can be a big problem. They absolutely need protective gear, yet that comes with its own issues.

For athletes training outdoors, it can be suffocating to wear a traditional mask. After a few minutes of exercise, the masks become moist, hot, and unbearable. The airflow is not regulated, and the masks are not designed to support heightened metabolic states, which lead to heavy perspiration.

Microsfere is a startup from San Francisco targeting the clean air needs of amateur and professional athletes. Their smart pollution mask offers protection from air pollution and new types of performance insights. We partnered with them to design and develop a mobile app to bring to life this new paradigm in fitness wearables.

The industrial design of the mask is as ergonomic as possible while housing the important sensors and circuit boards needed to power the smart ventilation system. It is built in two parts, to be worn more easily and adjust well to different head sizes.

Once worn, it fits tightly over nose and mouth, to provide full protection to the wearer.

The Microsfere smart mask.

How We Helped Microsfere

Concept, UX/UI Design, Front-End and Back-End Development

Client Feedback

“The software development was something unprecedented in the market…The MING team is one of the best I have ever worked with. They were fast, creative, and had a quick solution for every issue.”

Judit Fabian, CEO & Founder of Microsfere

Building Product Confidence Through Motion Design

The app connects via Bluetooth with the mask to show in-depth performance data drawn from the athlete’s breathing. Before this, breathing data was only available in a lab environment with athletes relying solely on traditional fitness-wearable data such as heart rate & motion.

Our key design challenge was how to insightfully present this completely new paradigm.

We started with user research into the topic — speaking with athletes who were facing similar problems and already had experience with technology and self quantification. We found that a key concern was a lack of trust that the mask was functioning properly.

This highlighted a core design objective: to build confidence in the product.

We identified motion as a tool to intuitively build confidence in users on the mask’s functionality. Similar to the way the air would be constantly flowing, the user interface would represent activity and progress. The motion would have to be somewhat correlated to the sensor data in real-time, to create the trust that the system is really responding to real-life actions.

An early animation prototype.

After prototyping many iterations, we identified a visual metaphor for lungs and breathing. When users put on the mask, the expanding circles would mirror their breathing, intuitively showing that the mask was picking up accurate breathing data.

In further user testing studies with the prototype, this concept gained strong acceptance and understanding from athletes, who could relate it to real-world concepts they were already familiar with.

Final product: We used expanding spheres that matched users breathing recorded by the mask

Designing For A New Data Paradigm: Breath

Our second design objective was to convey the data that the smart mask was tracking during activities such as running. Data points included the rate of breathing, volume of breath, and oxygen/calories consumed during a workout.

Some of the data was directly taken from sensors, while other data was calculated based on the output of multiple sensors and scientific formulas.

A super interesting field of study to dive into!

Our development team working with the prototype.

We visualized the data for it to be useful to the user. Data categories that were more important to the user, such as calories, were brought to the forefront. This ensures that all the metrics the user cares about are available at a glance. Further deep dives and historic data are available in deeper layers.

Activity Summary Cards

We designed the historical activity summaries with the key metrics as a special touch for the Chinese market to be easily sharable into WeChat or reviewed for tracking improvements.


As with all innovative IoT products, a key challenge was the hardware being developed in parallel with the software. This made it tough for our tech team to code as functions and firmware were frequently changing. over the course of the engagement we received multiple prototypes, each one more developed but also different from the previous.

In true agile fashion, the team worked in sprints together with the industrial designers and engineers for a smooth development process. Hardware projects mean we need to carefully manage expectations on timings, with a lot of dependencies that need close communication. 💪🏻⚡️

The final product was announced as “ISPO Brand-New Wearables Winner” for its innovative value delivered across software & hardware.

At MING, we’ve worked on over 10 air quality-related projects and love nothing more than to improve people’s lives through designing innovative tech. Reach out if you wanna chat about this space.

MING Labs is a leading digital business builder located in Berlin, Munich, New York City, Shanghai, Suzhou, and Singapore. We guide clients in designing their businesses for the future, ensuring they are leaders in the field of innovation.

Liked this story, and curious to know more? Start a conversation with us on Twitter, check our latest updates on LinkedIn, or drop us a note at hello@minglabs.com.

Related Reading: Designing A Digital Electric Car Experience

What did the design process look like and what challenges did we face? Dive into the UX design story here.




MING Labs is a leading digital business builder located in Berlin, Munich, New York City, Shanghai and Singapore. We guide clients in designing their businesses for the future, ensuring they are leaders in the field of innovation.

Recommended from Medium

Top UI/UX Trends 2022

What is Placemaking: Examining the Art and Science

Marc Jacobs, BFA Fashion Design ’84

Dollars and Sense

How I Generate Product Description In 1 Minute.

How I Generate Product Description In 1 Minute.

The Empire State Trail: A Conversation with Lindsay Zefting

250 things a product designer should know

TUKANGKU: Push Notification Marketing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


We are a leading digital business builder located in Munich, Berlin, Singapore, Shanghai, and Suzhou. For more information visit us at www.minglabs.com

More from Medium

Main Branding Design Principles For Startups

Visual communication: understanding Gestalt principles

Principles of Design for Effective Visual Communication

Dark Pattern: How Youtube Makes Sure You Don’t Always “Skip Ad”

YouTube’s Skip Ad button is a design dark pattern