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 Figma working file and the FigJam discovery board sit on hold — both still moving as the project does. Walkthroughs available on request during interview.
Primitives, semantic tokens, component specs, the Verdict Ladder in every state — in Figma, still moving.
Restricted AccessThe FigJam from discovery — impact map, persona pivot, HMWs, evidence clusters. Kept private to protect participant PII.
Restricted AccessThe EPA says Irish public water is 99.8% compliant — and yet Dublin 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. Good research looks less at what people say is wrong and more at the small, recurring workaround they’ve quietly built around the problem. Fior started there — not in a dashboard, not in a lab, but in a bin.
I built Fior’s design system directly in code — 281 tokens, three layers, 2,356+ bindings, zero hardcoded hex. Figma became documentation instead of source of truth. When the typography had to change mid-project, swapping Inter for Nunito was one primitive edit and the cascade handled the other 847 references. In tokens-first systems, refactors stop being events and become keystrokes.
Health apps usually lead with readings — TDS 128 ppm, pH 7.2, EC 245 µS/cm — and leave interpretation to the user. That’s a failure of voice disguised as transparency. Fior’s Verdict Ladder leads with the state (Good, Medium, Bad) and hides the parameters one tap away. Calm is an information architecture decision, not a tone-of-voice exercise. Alarm earns nothing; plain-language clarity earns trust.
End-to-end solo only because of disciplined AI co-pilot use across the stack: research synthesis (the 5-step thinking sequence), token architecture (281 tokens, 0 hardcoded hex), and the React + TypeScript prototype (15 screens, mobile-first, 28 passing tests, WCAG 2.1 AA). I direct the system thinking — personas, IA, calm-voice tone, the verdict ladder as the central design decision — and the AI executes the heavy lifting. The result is a single-designer product that holds up to engineering scrutiny, in a timeline a single person could realistically own — an ecosystem of three coordinated surfaces (case study, process doc, hi-fi prototype) sharing one design system.