3M Filtrete
Redesigning a legacy smart home app to support two new IoT devices, a third-party air quality integration, and interactive data visualization — while refining the shared design system with 3M's internal team.
Role
Product Designer
Company
Arctouch
Platform
iOS | Android
Date
2021
Contribution
UX | IOT | Data Viz | Design System
Context
A smart home app from 2016,
catching up to its hardware
The Filtrete Smart app had been live since 2016 — a connected home tool that let users monitor and manage their smart air filters. By 2020, 3M's hardware roadmap had grown well beyond what the app was designed to handle. Two new devices were coming: a third-party Purple Air sensor integration for outdoor and indoor air quality monitoring, and 3M's own Room Air Purifier, the brand's first fully connected air purification product.
ArcTouch was brought in to redesign the UX, extend the app's information architecture to accommodate the new device ecosystem, and co-develop a refined design system with 3M's internal design team. The stakes were real: Filtrete is one of 3M's most consumer-visible brands, and the app would ship alongside major hardware launches.
Device integration roadmap
Two new IOT devices,
two different design problems
The integration work happened in two phases. Purple Air came first — a third-party sensor platform that required bridging an external data model into Filtrete's UI without disrupting the existing filter monitoring experience. The Room Air Purifier followed, bringing 3M's own connected hardware and a richer set of real-time readings that needed a new visual treatment from scratch.
Purple Air
3RD PARTY
An external air quality sensor platform integrated via API. The design challenge was fitting a third-party data model — with its own AQI scale and reading categories — into Filtrete's existing UI without creating a disjointed experience. Users needed to see Purple Air readings alongside their Filtrete filter data without the app feeling like two products stitched together. Required close collaboration with 3M's product team to define the integration boundaries and surface only the data most relevant to consumers.
Room Air Purifier
3M PRODUCT
3M's first fully connected air purifier — a flagship hardware launch that the redesigned app needed to support on day one. Introduced real-time PM2.5, VOC, humidity, and temperature readings, plus a historical AQI graph. The purifier's richer data model became the driver for the new air quality visual language used across the full app, and the device pairing flow was rebuilt specifically to support its Bluetooth and Wi-Fi connectivity requirements.
Challenge 1 — Device pairing
Rebuilding the flow from the first tap
The original pairing flow predated Wi-Fi and Bluetooth connectivity. It was designed for a simpler device ecosystem and had never been updated — no wireless handoff steps, no error recovery, and no guidance when something failed. For users setting up a new Room Air Purifier or Purple Air sensor, it was a dead end.
We mapped the entire existing flow in Overflow to identify every friction point before touching a single screen. The goal was to design a pairing experience that felt native to the platform — familiar enough to match what iOS and Android users expected from smart home setup, specific enough to handle each device's connectivity requirements.
Challenge 2 — Air quality data
Making abstract data
feel immediately legible
The Room Air Purifier introduced data the Filtrete app had never displayed — PM2.5 particulate matter, VOC levels, humidity, and temperature, all updating in real time. The challenge wasn't just visual. It was cognitive: consumers don't know what PM2.5 is, what a "good" reading looks like, or whether they should be worried about a number on a gauge.
The color system came from 3M's own research and branding — the AQI scale maps to internationally recognized categories. Our contribution was adapting those colors to meet WCAG accessibility requirements without losing the semantic meaning baked into the scale, then building the component system that displayed readings consistently across device types.
Accessibility constraint: 3M's original brand colors for the AQI scale failed WCAG contrast requirements when displayed against the app's dark dashboard. We adjusted hue and lightness values at each level to meet AA compliance while preserving the color-coded meaning users expect from standard AQI references.
The interactive graph problem
Horizontal scroll inside a vertical page
The history graph was the most technically complex UI challenge in the project. Users needed to scroll through AQI data over time — meaning horizontal interaction — inside a natively scrolling vertical page. On iOS and Android, those two gestures conflict: the OS can't easily distinguish between "I'm scrolling the page" and "I'm scrubbing through this chart."
The solution required locking the vertical scroll of the page while the user was inside the graph viewport, then releasing it once they scrolled past. This went through multiple rounds of back-and-forth between design, development, and QA — particularly on smaller devices where the graph had to remain fully visible within the screen frame without pushing content below the fold.
The core tension: Horizontal scroll inside a vertical page is a known native conflict. The scroll-lock approach worked, but required tight alignment between design specs and native implementation — one of several moments where design had to understand the engineering constraint before the UX decision could be finalized.
User testing
A/B testing and usability validation at key decision points — particularly for the AQ data visualization and the pairing flow. Findings fed directly back into design iterations.
Challenge 3 — Design system
Cleaning up four years of token debt
The Filtrete design system had been evolving since 2016 without a systematic cleanup. By 2020, the Figma files contained legacy tokens that were either outdated, duplicated, or no longer matched the live implementation. Developers were receiving handoffs that referenced values which didn't exist in code — creating noise, slowing QA, and eroding trust between design and engineering.
The refinement was a shared effort between the ArcTouch design team and 3M's internal designers. The goal wasn't to rebuild from scratch — it was to clean the shared foundation so that new components for the IoT features could be built on top of something reliable.
Process
How the three tracks
stayed coherent
The project ran across ArcTouch and 3M teams simultaneously — with shared design system work happening in parallel with feature design. The bridge role between both teams was a consistent part of the work: translating design decisions into engineering-ready specs, and surfacing technical constraints back into the design process early enough to avoid costly rework.
Regular syncs between ArcTouch designers and 3M's internal design team — shared Figma files, aligned on token decisions, and resolved conflicts before they reached development.
Close collaboration with development at every sprint — specs validated before handoff, edge cases documented, and scroll-lock behavior for the graph co-defined with engineers rather than thrown over the wall.
