Mode 01 · Process

From boil-water notice to a probe.

Five stages, in order. Every claim is sourced — Fior is a design exercise, but the Irish water-quality data behind it is real.

STAGE 01

Discovery

Why a country with 99.8% compliant water still needs a personal probe.

Ireland's headline water number looks fine: 99.8% of public water samples comply with bacterial and chemical limits. But that average masks localised, household-level risk — and the people most exposed (well owners, renters in old housing, parents preparing formula) have no daily way to check.

Evidence — EPA, 2025

  • ~497,000 people on "at-risk" supplies (Remedial Action List, end-2024).
  • Lead legal limit halves in 2036 (10 → 5 µg/L); EPA flagged progress as "far too slow".
  • Only 52% of surface waters in satisfactory ecological condition (down from 54%).
  • Private wells are the biggest blind spot — EPA called for mandatory registration in July 2025.

The gap Fior closes: between "water is technically safe on the national average" and "I, today, in my house, can confirm it."

STAGE 02

Research

A 5-step thinking sequence on the FigJam board, from impact map to first wireframe.

The work didn't start with screens. It started with a broad question — "impacts of untreated water in Ireland?" — and walked through five reframes before any interface existed.

5-step sequence

  • Impact mapping — 4 categories: health · drinking water quality · environment · economy.
  • Problem statement — "Rural households in Ireland need a reliable and affordable way to access clean and safe water."
  • How Might We's — 8 reframes (access, education, monitoring, community, tech, feedback, service, incentives).
  • Ideation — 4 product directions; monitor + improve selected for personal value + hardware moat.
  • First wireframe — 4-screen ASCII sketch (Home → Test → Result → Suggestions) — direct ancestor of the 14-screen hi-fi.

Everything that came after — pillars, components, the prototype — is just thickening the spine drawn in step 5.

STAGE 03

Personas

Three concrete users — one primary, two pulling in different directions.

The Concerned Renter · 25–40

Urban (Dublin · Cork · Galway). Rents, can't change plumbing. Worried about lead pipes. Already buys filtered jugs. Primary.

The Rural Well Owner · 35–65

Outside public supply. Did a lab test "once, years ago." Worried about agricultural runoff. Secondary.

The New Parent

Formula prep, bath water, lead-and-infants warning. High urgency, high willingness to pay. Tertiary.

⚠ Open tension

The original problem statement framed this around rural households, but the primary persona is an urban renter. Worth justifying in the case write-up — likely a pivot to follow the higher-density audience.

STAGE 04

Pillars

Five feature pillars, each with its own colour and job.

Monitor Live sensor reading
History Trends over time
Alerts Push notifications
Suggestions Plain-language actions
Map Community + EPA overlay

MoSCoW for v1: live readings, 4-level score, BLE pairing, push alerts, basic suggestions, 30-day history (Must). Trends, thresholds, location tags, EPA refs, dark mode (Should). Community map, sharing, supplier directory (Could). No subscription, no smart-home, no government live feed (Won't).

STAGE 05

Decisions

Six calls that shaped the rest of the work.

1 · Hardware-first, not pure software Reframes the question from "trust the network" to "see for yourself" — which is the only way to close the gap.
2 · Verdict before parameter values "Good · 76/100" is the headline. COD/TDS are evidence, not the answer.
3 · Inter → Nunito mid-project Softer terminals land warm/Irish tone better than Inter's sharper geometry.
4 · Three-layer tokens from day 1 Made the typeface migration cheap and the dark-mode plan trivial.
5 · Real React prototype A recruiter can use the product in 60 seconds, no Figma account needed.
6 · Calm tone over scary tone Default temptation is alarmist; alarmist trains users to dismiss alerts. Fior chooses calm.

Mode 02 · Wireframe

From sensor to verdict in 9 steps.

Low-fidelity flow. Toggle the verdict to see how the three branches diverge — the app morphs the result, the alert, and the suggestions.

Setup · the common pre-test — open the app, pair the sensor, dip it.

STEP 01 Setup

Open Fior

Three-slide carousel, permissions prompt. No friction before value — the user sees why Fior exists before being asked for anything.

STEP 02 Setup

Pair sensor

Bluetooth scan. One tap to pair once the device is found. Fallback path: if no sensor appears, route to troubleshooting.

STEP 03 Setup

Dip sensor

Instructional screen with animated illustration. The CTA is disabled — tone is "follow along", not "click to continue".

STEP 04 Monitor

Live readings

Six parameters feed one score ring — the verdict is the headline, the numbers are evidence. Score morphs with the branch above.

STEP 05 Monitor

Verdict

Amber badge, three reason cards explaining which parameters pulled the score down. The CTA invites action, not alarm.

Green badge, minimal commentary. No scary copy for a score that doesn't warrant it — the CTA jumps straight to history.

Red badge, clear boil-water instruction. The CTA is prescriptive, not suggestive — this is the "act now" moment in the flow.

STEP 06 Alerts History Alerts

Alert fires

Success summary

Persistent banner

Push notification outside the app + a soft in-app banner when you open it. Informative, not alarming.

No alert fires. Instead, a one-screen confirmation — "everything's fine" — then the flow jumps ahead to history without pestering.

Red banner locks to the top of every screen until the user acts. High urgency is reserved for high risk.

STEP 07 Suggestions Skipped Suggestions

Suggestions hub

Skipped

Boil + filter priority

Three tabs: quick fixes, long-term upgrades, community options. Cost and time shown up front — no hidden bills on tap.

A good score means nothing to fix. The suggestions step is skipped so the user isn't trained to dismiss it later when it matters.

The list reorders — boil and filter actions jump to top, everything else collapses. One-tap "mark as done" feeds back into the dashboard status.

STEP 08 History

Saved to history

Each reading becomes a day-block with its own badge. The only place every branch funnels back to — a shared memory of the household's water.

STEP 09 Map

Check area map

Community + EPA overlay. Zoomed to neighbourhood, colour-coded pins, "me" blue pin anchors the user. Opt-in — not everyone wants to share.

Mode 03 · Prototype

15 screens, 6 phases, 3 branches.

The full hi-fi walkthrough lives on its own deploy (React, desktop-first). This gallery is the mobile-friendly index — skim the flow, drill into the real thing when you're ready.

Phase 01

Arrive

Greet the user and establish trust before asking for anything.

01 · Welcome

Welcome

Hero splash with tagline and device illustration; primary CTA "Get started".

02 · Permissions

Permissions

Step 2/4 — Bluetooth required, notifications and location optional.

Phase 02

Connect

Pair the sensor. Make it feel like magic, not configuration.

03 · Pair Sensor

Pair sensor

BLE pulse animation, device found card, one-tap pair.

04 · Ready

Ready

Step 4/4 — 100% complete, sensor paired, features linked.

Phase 03

Measure

Transparency during the wait — show the work being done.

05 · Measuring

Measuring

Full-screen progress ring, phased labels (sampling · analysing · calibrating).

Phase 04

Respond

Deliver the verdict. Make the next action obvious.

06 · Results

Results

Score card 76/100, 6-parameter grid, sparkline trends, CTA to suggestions.

07 · Suggestions

Suggestions

Prioritised action cards — boil, filter, UV, chlorinate — with cost and time.

08 · Alerts

Alerts

Filter tabs (All · Critical · Warning · Resolved), active alerts list.

Phase 05

Contribute

Small social layer — share readings, build a local map.

09 · Community Map

Community map

Colour-coded pins, layers control, submit-reading FAB, legend.

10 · Share Reading

Share reading

Anonymity toggle, location field, note textarea — "1,284 others in Galway".

11 · Contributed

Contributed

Thank-you screen — impact stats (7 this month, 42 all-time, 12 helped).

Phase 06

Return

The home they come back to — status at a glance.

12 · Dashboard

Dashboard

Hero score, "Test now" CTA, 4 parameter mini-cards, alerts shortcut.

Branches · alternate states

What the flow looks like in edge cases

Three variants of the result/dashboard pair: no sensor detected, dangerously bad score, excellent score.

13 · No sensor

Empty state

Dashboard pre-pair — "No water data yet" + search device CTA.

14 · Results · Bad

Poor result

Score 38/100, red boil-water banner, danger CTA locks the screen.

15 · Results · Excellent

Excellent result

Score 92/100, green theme, "All parameters within safe range".

Mode 04 · System

281 variables, zero hex hardcoded.

An embryonic design system, shipped to v3 — mirrored here from the Figma file. Three layers, five pillars, six components, sixteen icons. This is the scaffold the rest of Fior is built on.

Section 01

Three-layer cascade

Every token references the layer above it. Change primitives, everything inherits.

Fior's DS uses a 3-layer architecture: primitives (absolute values), semantic (contextual aliases), components (specific tokens). This is what made the mid-project Inter → Nunito migration cheap — and what makes the dark-mode plan trivial.

89 primitives + 97 semantic + 95 components = 281 total. Semantic tokens carry Light + Dark modes. Zero hex hardcoded across 27 screens and 2356+ variable bindings.

Section 02

Colour — 5 families + neutral

One colour per feature pillar, 10-step neutral ramp, all referenced through semantic aliases.

The 400-level is the pillar's working colour (Blue 400 = Monitor's accent, etc). The 50 is the soft surface; 500 is the darker action; 700 is the deep inverse. Rest of the scale rounds out states without hex gymnastics.

Section 03

Type scale — Nunito

Migrated from Inter in v3. Softer terminals, warmer tone, same weight mapping.

display 40 / 700 / 1.2
Your water, measured.
h1 32 / 700 / 1.2
Boil-water notice
h2 24 / 600 / 1.3
Results for today
h3 20 / 600 / 1.3
Parameter detail
h4 17 / 500 / 1.4
Recent readings
body 16 / 400 / 1.5
COD elevated — typical of agricultural runoff after heavy rain.
body-sm 14 / 400 / 1.6
Last sync 3 min ago · tap to refresh
label 13 / 500 / 1.4
Threshold · EPA 2024
caption 12 / 400 / 1.6
µg/L · per litre

Weights: 400 / 500 / 600 / 700 / 800. Inter → Nunito mapping was 1:1 so the migration touched only the font-family token, not the 27 screens.

Section 04

Spacing — base-4

One scale, derived, never free-handed. Contextual tokens ride on top for components.

Contextual tokens layered on top: icon-gap · 4, card-inner · 20, section-gap · 24, nav-height · 48, hero-gap · 64. Never padding: 17px anywhere.

Section 05

Components — 6 sets, 42 variants

Small inventory, intentional. Each component earns its keep by appearing on 3+ screens.

Button 6 variants
Primary Secondary Outlined Warning Success Disabled

Ships on Dashboard, Results, Suggestions. Implemented in the prototype. Min touch target 44×44pt (Apple HIG · WCAG 2.5.5).

Badge 8 statuses
Excellent Good Medium Bad Offline Boil Alert Filter Now Connected

Ships on Dashboard score card, History day blocks, Results verdict. Colour always accompanied by text — never the only signal (WCAG 1.4.1).

Input 5 states
Default Placeholder Focus Typing… Filled Galway, IE Error Required field Disabled —

Ships on Share reading form (location, note). Focus ring carries 2px accent border for keyboard visibility.

Metric Card 5 statuses
EC Excellent 410 µS/cm TDS Good 245 ppm COD Medium 18 mg/L UV275 Bad 0.9 AU

Ships on Monitor live readings. 6 params (TDS, TOC, COD, UV275, EC, Temp). Header pairs parameter name with its status tag; sparkline shows recent trend, tinted by risk level.

Nav Bar 2 themes
homeHome sensorsMonitor notificationsAlerts mapMap
homeHome sensorsMonitor notificationsAlerts mapMap

Ships on all app screens (bottom position on mobile, sidebar on desktop). Light + Dark themes adapt via semantic tokens — same component, different surface.

Icon library 16 Material Symbols
home sensors history notifications lightbulb map bluetooth battery_full sync info check_circle warning error filter_alt share download

Ships everywhere — nav, status, actions, feedback. Outlined style · 24×24 · 2px stroke · neutral-900 default. Stroke-based to keep weight consistent with Nunito.

What we're not building yet: modals, toasts, date pickers, skeleton loaders, chart components. Each will only ship when a screen needs it more than twice — no speculative components.

Section 06

The numbers

Shipped state of the DS as of v3 (March 2026).

Figma is the source of truth — everything here is mirrored from the Fior working file. If this artefact ever drifts from the spec, Figma wins.

Internal work file — not published publicly.