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.

294
Variables
262/294
Code-named
27
Figma screens
0
Hex hardcoded
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 15-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.

Prototype mode turns this flow into 15 hi-fi screens: some steps merged, the history step left for later. Real taps, real transitions.

See the prototype

Mode 03 · Prototype

15 screens, 6 phases, 3 branches.

The full hi-fi walkthrough lives on its own deploy (React, mobile-first; on desktop it sits in a presentation frame). 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 logo and tagline; 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

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 water 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-advice banner, "View Treatment" CTA.

15 · Results · Excellent

Excellent result

Score 92/100, green theme, "Well within Irish Water Quality reference ranges".

Mode 04 · System

294 variables, zero hex across 27 Figma screens.

An embryonic design system, shipped to v3.2 and kept in step with the Figma file and the hi-fi code. Three layers, five pillars, five components, sixteen icons. This is the scaffold the rest of Fior is built on.

Section 01

Three-layer cascade

Most tokens reference the layer above them; a few component tokens point straight at a primitive.

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.

94 primitives + 98 semantic + 102 components = 294 total. Semantic tokens carry Light + Dark modes. Zero hex hardcoded across the 27 Figma screens and the prototype's CSS modules, and 4450+ variable bindings on authored layers.

Section 02

Colour — 5 families + neutral

One colour per feature pillar, 11-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. In code, the Inter → Nunito mapping was 1:1, so the migration touched only the font-family token.

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, hero-gap · 64.

Section 05

Components — 5 sets + 16 icons, 62 variants

Small inventory, intentional. Button and Badge carry the screens; Input and Metric Card are library components the screens have not adopted yet.

Button 5 types · 4 states
Primary Secondary Outlined Warning Success Disabled

Primary ships on 11 of the 15 screens; warning and success live in the component library. 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 Alerts, the Dashboard mini-cards and the Results parameter cards. 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 —

Library component: no prototype screen uses it yet (Share reading has a plain note field). Focus ring carries 2px accent border for keyboard visibility.

Metric Card 4 statuses
EC Excellent 140 µS/cm TOC Good 0.8 mg/L UV275 Medium 0.048 AU COD Bad 42 mg/L

Library component: Results and Dashboard render their own parameter cards. 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 · 4 tabs
Home Monitor Alerts Map
Home Monitor Alerts Map

Bottom nav on the 10 in-app screens (onboarding has none). The dark variant exists in Figma only; the prototype is light.

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.2 (synced October 2026).

294
Variables
262/294
Code-named
27
Figma screens
0
Hex hardcoded

The shipped code sets the values: Figma mirrors the hi-fi, except where the code fails accessibility. Then the code changes and Figma keeps the accessible value.

Internal work file — not published publicly.