Air Sense
Guard.
[UI/UX Design]
A companion app for a smart mask that reads the air on both sides of the filter: what the street offers, and what actually reaches your lungs.
Air Sense
[Type]
Self-initiated case study
[Role]
UX research, interaction design, UI design
[Platform]
Mobile app for a smart mask
[Tools]
Figma
The full flow. Eight screens from pairing the mask to one daily action.
[Split at the membrane]
Two sensors: one reads the street, one reads the air behind the filter. Every screen is split at the membrane: the street above, your lungs below.
The problem
Is my mask even working?
Air pollution is invisible. A mask can't tell you how bad the air is, or whether it's actually protecting you.
[Challenge]
People wear masks without knowing how dangerous the air is right now, how much the filter is stopping, or when it needs replacing. Without feedback, protection feels optional.
[Goal]
Show the difference the mask makes in numbers people can feel, and turn it into one clear thing to do each day.
Core idea
One layout, two readings
Instead of one number, every screen shows two, separated by the filter itself. The dark half is the street; the paper half is what got through. The gap between them is the story.
[ABOVE]
Night. The outside world: street PM2.5, exposure time, what the air offered.
[BELOW]
Paper. Your side of the filter: what you breathed, comfort, fit and filter life.
Who it's for
People who breathe the street daily
I designed around the people who would wear the mask every day. Their needs shaped what each tab shows first.
Daily commuter. Walks and takes public transport through busy roads. Wants to know what the trip cost them and how to make tomorrow's cheaper.
Outdoor worker. Wears the mask for long hours, often with gloves on. Needs setup with no typing and filter alerts before it's too late.
Careful city resident. Wants to stay safe without feeling anxious. Needs clear, honest numbers instead of confusing pollution data.
[Principle 01]
Street above, lungs below. The same split on every screen, so the layout itself explains the product.
[Principle 02]
Meaning beyond colour. Rhythm, labels and shapes carry state too, so it still reads if you can't tell red from green.
Sitemap
Information architecture
A two-step onboarding, then five tabs that follow a simple arc: see it live, count the dose, check the filter, spot the pattern, act on it.
User flow
First run: pair and confirm
Pairing is the first moment of trust. I kept it to two steps, with no typing by default and a physical check that proves you paired your own mask, not one nearby.
Wireframes to high fidelity
Same nine screens, three passes
Greyscale layouts to lock the split: a dark band for the street, a light panel for the lungs, and the tab bar.
01 Tap to pair
02 Blink to confirm
03 Connected
04 Live compare
05 Dose
06 Filter cross section
07 Trends & map
08 Act
Real labels and numbers. The stat rows, layer list and action cards take their final shape here.
01 Tap to pair
02 Blink to confirm
03 connected
04 Live compare
05 Behind the filter
06 Filter cross-section
07 Trends & map
08 Act
The finished night-and-paper UI, with serif numerals, the membrane pill and red kept for poor air.
01. Tap to pair
02. Blink to confirm
03. Connected
04. Live compare
05. Dose
06. Filter cross-section
07. Trends & map
08. Act
Final screens
Key moments, up close
01 Tap to pair. Hold the phone to the vent. No code to read, works in the dark and with gloves on.
02 Blink to confirm. One pod pulses twice, proving you paired the mask in your hand.
03 Live compare. 186 on the street, 14 in your lungs, with filter life, wear time and fit below.
03 Live compare. 186 on the street, 14 in your lungs, with filter life, wear time and fit below.
05 Dose. What the street offered today against what got through, set against the WHO daily limit.
06 Filter cross-section. Six layers shaded by load, so you can see which one is the bottleneck.
07 Trends & map. Seven days of exposure and a route map where a thicker line means dirtier air.
08 Act. One change that cuts exposure most this week, then a short ranked list
Final prototype
Click through it
Start here. The prototype opens on the sign-in.
The Figma prototype runs from pairing through all five tabs, including the filter reorder and the daily action.
Screens
Modules
Primary flow
Theme
8
5
Pair & confirm
Night + paper
Outcome
What I'd take forward
Air Sense Guard turns an invisible filter into numbers you can feel: 504 µg offered, 38 µg breathed.
A layout can explain a product. Splitting every screen at the membrane makes the mask's value obvious without extra copy.
Inclusive by default. No-typing pairing, Braille codes and rhythm-based states help everyone, not only edge cases.
Next steps. Test pairing with people wearing gloves, validate the comfort score with real readings, and design a watch glance view.