Designing my home app by living with it
I picked the look on my phone with real data, coded the dimmer options and kept one, then spent a Saturday using the app and shipping fixes as I went.
I decided on the look of the app using mockups at phone width and real numbers. I compared the more subdued style I already had in the first version of this app from A home super app for the house and the homelab against a brighter “Living colour”. I decided to go with Living colour for the whole app, light mode first (as that’s what I’ll use most) and dark mode following the phone.
After the first pass, I had content spilling to the edges, so I asked Codex to generate some reference mockups to polish the design. When they came back, I knew that was the look I wanted. The rules I came up with after reviewing them were to have a 44 px touch target for every chip, in line with Apple’s layout guidelines.
I decided on the controls in a similar way: code the options, try them at phone width, no spec. For the kids’ rooms dimmer, I came up with three coded mockups. I decided to keep mockup A, which has a single slider (0 is off) with minus/plus buttons either side in 5% increments.
The real test was that Saturday when I had the app on my phone all day and sent feedback in rounds and shipped fixes between lunch and early evening. Early complaints were about the Sonos page having a “weird look” and the setpoint for one room’s mini-splits “never works”. Why would tapping the plus do nothing? Home Assistant reports a half-degree setpoint rounded to the even number, so 75.5 shows as 76. Tapping to increase in half-degree steps from the shown value was landing on another half degree that looked unchanged. I fixed that by making the climate tiles step whole degrees.
Scrolling was fidgety too: the folding header resized the page mid-gesture and on short pages kept folding/unfolding at the bottom. Now the big weather block scrolls off with the page (iOS large title style) and sheets close by pulling down. A separate bug in the deploy step that filled new tabs (see One WebSocket and a tile registry behind my home app) resurrected a deleted tile. It’s gone from the seed now and shortcuts never go in it.
Next up is the Life tab in the same app. It starts with birds, what’s on Plex, the photo frame. Also need to teach the seed merge to remember deletions.