Water Truth
Case Study
The narrative entry — the story you’re inside of right now.
fíor · Irish · true, real, pure
A mobile app paired with RYAKKA, a bespoke IoT sensor that reads six drinking-water parameters at home and collapses them into four plain verdicts: Excellent, Good, Medium, Bad. Designed for an Irish context where the official reports are annual PDFs and compliance is reported as averages — but the person at the tap still has no idea what came out today.
In Ireland, an annual EPA compliance report still outpaces what the person at the tap can confirm today. Surface waters slip — only 52% of surface waters are in satisfactory ecological condition, down from 54%. The lead limit halves in 2036 (10 → 5 µg/L), with the highest risk on infants, children, and pregnant women (EPA, 2023). Headline compliance reads reassuring on paper. The kettle disagrees.
Fior is a mobile companion to RYAKKA, a home sensor that pairs six readings with a four-state Verdict Ladder. The language is calm, not alarmist; every claim is sourced, not asserted. What you can do next, not what you should fear.
Conceptual MVP — not shipped, but validated. Research drove a persona pivot from rural-first to urban-renter for go-to-market. The output: a token-first design system (281 tokens across three layers, 2,356+ bindings), 15 navigable hi-fi screens, and an ecosystem of three coordinated surfaces — case study, process doc, hi-fi prototype — sharing one design system.
I moved to Ireland in 2022. The first thing my kettle taught me was what limescale looks like — a white crust on the heating element after a week, no matter how often I rinsed it. The tap water was technically safe — the EPA said so. I still didn't really know what was in it.
That gap — between “water is technically safe on the national average” and “I, today, in my house, can confirm it” — became the brief. The consumer category barely exists in Ireland: EPA data sits in institutional reports, not in people's pockets. Fior closes the distance.
Sources: EPA · Drinking Water Quality 2024 · EPA · Water Quality Report 2019–2024
Started broad, on purpose. The prompt was “what are the impacts of untreated water in Ireland?” — not “what app should we build?”. Mapping the blast radius first stops a project from collapsing into a single feature before the problem is understood.
Each category unlocked a different angle for the next round of questions.
First cut of the problem statement: “Rural households in Ireland need a reliable and affordable way to access clean and safe water, because untreated water can cause health, environmental, and economic issues.”
That statement survived until personas were sketched — and then it pivoted.
The sharpest primary persona turned out to be the Concerned Renter (urban, 25–40, Dublin / Cork / Galway). Rural well owners have higher objective risk, but renters have higher engageable risk: they can't modify plumbing, they suspect lead pipes, they already buy filtered jugs, and they live inside the quantified-self product category.
Rural well owners became the secondary persona; new parents the tertiary. The problem statement held — the primary target shifted from who was most at risk to who was most likely to act.
Eight How-Might-We prompts, one per impact vector. The aim was not to pick a winner here — it was to surface angles so the ideation round wouldn't start pre-committed.
The HMWs collapsed into four plausible products. Each was scored against three filters: personal daily value, defensibility, and scope discipline (could a solo designer prototype it end-to-end?).
Personal value every single day — you don't check a map every day, but you do drink water every day. A hardware moat through RYAKKA, the companion IoT sensor that turns six parameters into one verdict. And a scope a solo designer can actually ship end-to-end: six readings, one verdict, one app. Clean boundary.
Before any pixel, a four-screen ASCII sketch. Home → Test → Result → Suggestions. That spine is still visible in the 15-screen hi-fi prototype: Home became Dashboard, Test became Measuring, Result became the verdict screen, Suggestions stayed as a hub.
┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ HOME │ │ TEST │ │ RESULT │ │ SUGGESTIONS │ │ │ │ │ │ │ │ │ │ Last test: │ → │ [ Dip RYAKKA] │ → │ GOOD · 76 │ → │ 1. Boil 3 min │ │ 08:42 · Good │ │ measuring… │ │ TDS · TOC │ │ 2. Filter jug │ │ │ │ ◉ ◉ ◉ │ │ COD · UV275 │ │ 3. Log source │ │ [Test again] │ │ │ │ EC · TEMP │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ └────────────────┘// 4-screen sketch · direct ancestor of the 15-screen hi-fi ← Scroll horizontally to see the full flow →
Everything that followed — 281 design tokens, eight colour ramps, the Verdict Ladder component, the Inter → Nunito migration — was thickening the spine. The spine itself never moved.
Fior's design system was built directly in code, not translated from Figma. Three layers of tokens, a typography migration mid-project, and a single four-state component that carries the whole product's point of view on health and honesty.
Every token in the system sits in one of three layers. Primitives hold raw values. Semantic tokens map meaning onto those values (primary, surface, danger). Component tokens bind the semantic layer to a specific UI part. Swap a primitive, the upper layers update automatically.
Mid-project the brand tone broke the typeface. Inter is crisp and neutral — right for SaaS, wrong for a calm Irish utility that wants to feel like a knowledgeable friend. Nunito's rounded terminals land warmer without surrendering legibility.
With a flat system this migration would have been a 2,356-row search-and-replace. With the three-layer architecture, the change was a single primitive swap: --font-family-base pointed from Inter to Nunito, and every semantic and component token propagated automatically.
Ten minutes of work, zero visual regressions. The architecture wasn't theoretical — it paid back the cost of setting it up on the first structural change.
Six sensor parameters (TDS, TOC, COD, UV275, EC, TEMP) are complicated. A verdict is not. The Verdict Ladder is the single component that turns the reading into a headline anyone can act on in under two seconds. Four states. Plain English. No numeric wall.
The dashboard leads with the verdict, not the readings. COD, TDS, UV275 are evidence — they live one tap deeper for the user who wants them. Most users don't. Calm tone over scary tone: the four states never say “unsafe” or “warning” — they say what you should do next (boil, filter, drink).
The eight colour ramps, the Nunito type scale, and the base-4 spacing grid — the surfaces the three-layer architecture ultimately resolves to.
Fior lives in three live surfaces — the case study you’re reading, a mobile-first process doc, and an interactive hi-fi prototype. They share 281 design tokens, the same Verdict Ladder, the same calm voice. One design system. Three voices.
The narrative entry — the story you’re inside of right now.
A single mobile-first document with four modes — Process, Wireframe, Prototype, System. Walks the design trail from problem framing to the embryonic system.
Vite + React 18 + TypeScript strict. 15 screens across 6 phases and 3 branches. The 4-state Verdict Ladder lives here, end-to-end. Hash routing, no build SSR.
The brief wasn’t in the lab. It was in the bin.
Irish public water is 99.8% compliant, and Dublin recycling bins are full of bottled water. That gap is the real brief. People weren’t fleeing unsafe water; they were fleeing the absence of personal confirmation. Research lives less in what people say is wrong, and more in the small workaround they’ve quietly built around it.
Most health apps lead with the reading — TDS 128, pH 7.2 — and leave you to translate it. That’s a failure of voice dressed up as transparency. Fior’s Verdict Ladder leads with the state and tucks the numbers one tap away. Calm isn’t a tone; it’s an information-architecture decision.
All of it shipped solo — 15 screens, 281 tokens, 28 passing tests, WCAG 2.1 AA — because disciplined AI co-pilot use handled the execution while I directed the system: personas, IA, the calm voice, the verdict ladder as the central decision.