Air, water and scent. One unified app.
Three machines sit in a house: one cleans the air, one filters the water, one scents the room. This app runs all three from one screen, for the people who own more than one of them.
Two devices already sold. Neither connected.
The air purifier and the water purifier were already in people’s homes, run from the buttons on the front. The diffuser was new hardware, still being tooled. The company wanted one app for all three.
Nobody had done it. Of the eleven competitor apps I went through, not one ran more than a single kind of device.
Handed the device from Bluetooth to Wi-Fi
A new device cannot join a home network on its own, so the phone finds it over Bluetooth first and passes the credentials across.
I gave all three devices the same six steps and the same screens, because somebody who buys a second one should not have to learn setup twice. The room they pick names the device for them. All with saved Wi-Fi networks for ease of adding new products.
Every control in one row, not some floating over the device.
Every control in one row
Fan, light, UV, display, timer. The list was still growing, and every new control wanted a home that would still make sense once the next one arrived.
I built the options as working screens with Claude Code rather than drawing them, so I could try each one with a thumb. Splitting them across two places lost early. Everything went in a single row, ordered by how often a control gets reached for, not by what it does, so the rare ones sit farthest right and the next one added joins the end.
Kept the busiest screen quiet
The diffuser holds two pods, and one screen has to carry what is in each, which is running, how much is left and what runs next.
So the screen has one focus and nothing hidden. The toggle picks the chamber you are acting on and leaves the other in view, because switching should not cost you sight of the other pod. Intensity, light and the next scheduled run sit under the device, in reach without crowding it.
Made the number say what to do
I bought nine competitor devices and ran eleven of their apps. Every one showed a particle count and left the reader to work out whether it was bad.
So I wrote the scale rather than borrowing one. Fifteen states, each pairing a band, a number and one sentence, with the raw readings underneath rather than in front.
I built and shipped the UI animation package
This is running, not a recording. I ported the app’s empty state from the React Native component I wrote into CSS, on the same paths and the same 650ms draw.
Each device holds 2800ms, then hands over: the outgoing icon retracts along its own path as the next draws in. They overlap in the middle fifth, so it reads as one line redrawing itself. On an empty screen that is the whole message. One app, three machines.
I used AI to widen the field, not decide it
I used AI here in several ways. It gave me fast design directions I could tweak to find the best experience faster, so the work moved from producing to choosing. I generated concepts, then built the promising ones as variants I could run.
That is how I settled the air-quality chart. Coloring the line at each threshold rather than banding the background. It wrote components with me and measured all thirty-four against their Figma source. It never made the call.
