// 003  ·  Product Design

Fior — Verdade da Água

fíor  ·  irlandês  ·  verdadeiro, real, puro

Product Design UX Research Design Systems IoT Saúde Gestão de Projetos Prototipação com IA

Um app mobile combinado com RYAKKA, um sensor IoT sob medida que lê seis parâmetros da água potável em casa e os condensa em quatro veredictos simples: Excellent, Good, Medium, Bad. Pensado para um contexto irlandês em que os relatórios oficiais são PDFs anuais e a conformidade é reportada em médias — mas a pessoa na torneira ainda não faz ideia do que saiu hoje.

Função Pesquisador & UX Designer
Cronograma Jun 2025 — Em andamento
Equipe Solo
Plataforma iOS · Android · IoT

// Problema

497K
Pessoas em abastecimentos de risco
EPA Remedial Action List · 2024
99,8%
Conformidade nacional
EPA · Public Water Supplies

// Resposta

6
Parâmetros do sensor
RYAKKA · TDS · TOC · COD · UV275 · EC · TEMP
4
Estados de veredito
Excellent · Good · Medium · Bad

O que percebi

Na Irlanda, um relatório anual de conformidade da EPA ainda supera o que a pessoa na torneira consegue confirmar hoje. As águas superficiais pioram — apenas 52% das águas superficiais estão em condição ecológica satisfatória, uma queda em relação aos 54% anteriores. O limite de chumbo cai pela metade em 2036 (10 → 5 µg/L), com o maior risco recaindo sobre bebês, crianças e gestantes (EPA, 2023). No papel, a conformidade geral soa tranquilizadora. A chaleira discorda.

O que construí

Fior é um companheiro mobile do RYAKKA, um sensor doméstico que combina seis leituras com uma Verdict Ladder de quatro estados. A linguagem é calma, não alarmista; toda afirmação tem fonte, não é apenas alegada. O que você pode fazer a seguir, não o que você deveria temer.

O que isso me ensinou

MVP conceitual — não lançado, mas validado. A pesquisa levou a uma mudança de persona, de foco rural para locatário urbano, visando o go-to-market. O resultado: um design system token-first (281 tokens em três camadas, 2.356+ bindings), 15 telas hi-fi navegáveis, e um ecossistema de três superfícies coordenadas — estudo de caso, doc de processo, protótipo hi-fi — compartilhando um único design system.

// 01

A Pesquisa Que Moldou o Fior

Eu me mudei para a Irlanda em 2022. A primeira coisa que minha chaleira me ensinou foi como é o calcário — uma crosta branca na resistência depois de uma semana, não importava quantas vezes eu enxaguasse. A água da torneira era tecnicamente segura — a EPA garantia isso. Mesmo assim, eu não sabia realmente o que havia nela.

Essa lacuna — entre “a água é tecnicamente segura na média nacional” e “eu, hoje, na minha casa, consigo confirmar isso” — virou o brief. A categoria de consumo praticamente não existe na Irlanda: os dados da EPA ficam em relatórios institucionais, não no bolso das pessoas. O Fior fecha essa distância.

// Base de Evidências · EPA 2025
  • 99,8%+ das amostras de água pública irlandesa cumprem os limites bacteriológicos e químicos — mas essa média nacional mascara riscos localizados.
  • ~497 mil pessoas permanecem em abastecimentos “de risco” (EPA Remedial Action List, final de 2024).
  • O limite de chumbo cai pela metade em 2036 (10 → 5 µg/L). O maior risco recai sobre bebês, crianças e gestantes. A EPA classificou o progresso nacional como “lento demais” (Jul 2025).
  • A qualidade das águas superficiais está piorando — apenas 52% das águas superficiais estão em condição ecológica satisfatória, uma queda em relação aos 54% anteriores.

Fontes: EPA · Drinking Water Quality 2024 · EPA · Water Quality Report 2019–2024

Etapa 01
01

Impact Mapping

Raio de Impacto Amplo · Quatro Categorias de Impacto

Comecei amplo, de propósito. O prompt era “quais são os impactos da água não tratada na Irlanda?” — não “que aplicativo devemos construir?”. Mapear o raio de impacto primeiro evita que um projeto colapse numa única feature antes que o problema seja compreendido.

  • Saúde — doenças transmitidas pela água, exposição ao chumbo, saúde pública de longo prazo
  • Qualidade da água potável — lacunas de conformidade, poços privados, pontos cegos de monitoramento
  • Meio ambiente — declínio das águas superficiais, escoamento agrícola, danos estuarinos
  • Economia — custo de saúde, dependência de água engarrafada, risco ao turismo

Cada categoria destravou um ângulo diferente para a próxima rodada de perguntas.

Etapa 02
02

Problem Statement & Guinada de Persona

Statement Mantido · Persona Primária Mudou

Primeira versão do problem statement: “Famílias rurais na Irlanda precisam de uma forma confiável e acessível de ter acesso a água limpa e segura, porque água não tratada pode causar problemas de saúde, ambientais e econômicos.”

Esse statement sobreviveu até que as personas foram esboçadas — e então ele mudou de rumo.

// Tensão · Guinada de Persona

A persona primária mais nítida acabou sendo a Concerned Renter — o locatário preocupado (urbano, 25–40, Dublin / Cork / Galway). Donos de poços rurais têm risco objetivo mais alto, mas locatários têm risco engajável mais alto: eles não podem modificar o encanamento, suspeitam de canos de chumbo, já compram jarras filtrantes, e já vivem dentro da categoria de produto quantified-self.

Donos de poços rurais viraram a persona secundária; novos pais, a terciária. O problem statement se manteve — o alvo primário mudou de quem tinha mais risco para quem tinha mais chance de agir.

Etapa 03
03

How Might We — 8 Direções

Divergir · Um Ângulo por Vetor de Impacto

Oito prompts de How-Might-We, um por vetor de impacto. O objetivo aqui não era escolher um vencedor — era trazer à tona os ângulos para que a rodada de ideação não começasse pré-comprometida.

  • Acesso… tornar o teste de água disponível para qualquer pessoa, em qualquer lugar da Irlanda?
  • Educação… transformar os dados da EPA em algo que as pessoas realmente leem?
  • Monitoramento… dar às famílias uma forma de checar sua água continuamente?
  • Comunidade… agregar leituras locais em um mapa compartilhado?
  • Alavancagem Tecnológica… usar sensores e celulares para reduzir o piso de custo?
  • Ciclos de Feedback… mostrar mudança ao longo do tempo, não apenas uma foto instantânea?
  • Serviço… conectar cada leitura a uma próxima ação (ferver, filtrar, ligar)?
  • Incentivos… recompensar a contribuição para o conjunto de dados da comunidade?
Etapa 04
04

Ideação — Quatro Direções de Produto

Convergir · Filtro por Valor Diário + Moat + Escopo

As HMWs colapsaram em quatro produtos plausíveis. Cada um foi avaliado contra três filtros: valor pessoal diário, defensibilidade, e disciplina de escopo (um designer solo conseguiria prototipar isso de ponta a ponta?).

  • 01 Mapa de fontes de água limpa — jogada de diretório, ciclo pessoal fraco. Rejeitado
  • 02 App de educação — guiado por conteúdo, difícil de sustentar, sem moat. Rejeitado
  • 03 Monitorar + Melhorar — valor pessoal diário, moat de hardware via RYAKKA, escopo contido. ★ Selecionado
  • 04 Hub de tratamento comunitário — produto operacional, bem fora do escopo deste brief. Rejeitado
// Por Que a Direção 03

Valor pessoal todos os dias — você não checa um mapa todo dia, mas bebe água todo santo dia. Um moat de hardware através do RYAKKA, o sensor IoT companheiro que transforma seis parâmetros em um único veredito. E um escopo que um designer solo consegue de fato entregar de ponta a ponta: seis leituras, um veredito, um app. Fronteira limpa.

Etapa 05
05

Primeiro Wireframe — A Espinha Dorsal

ASCII de 4 Telas · Ancestral do Hi-Fi de 15 Telas

Antes de qualquer pixel, um esboço ASCII de quatro telas. Home → Test → Result → Suggestions. Essa espinha dorsal ainda está visível no protótipo hi-fi de 15 telas: Home virou Dashboard, Test virou Measuring, Result virou a tela de veredito, Suggestions permaneceu como um 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   │   │                │
└────────────────┘   └────────────────┘   └────────────────┘   └────────────────┘
// esboço de 4 telas · ancestral direto do hi-fi de 15 telas ← Role horizontalmente para ver o fluxo completo →

Tudo que veio depois — 281 design tokens, oito rampas de cor, o componente Verdict Ladder, a migração de Inter para Nunito — foi engrossando a espinha dorsal. A espinha dorsal em si nunca mudou de lugar.

// 02

Uma Fundação Token-First

O design system do Fior foi construído diretamente em código, não traduzido do Figma. Três camadas de tokens, uma migração de tipografia no meio do projeto, e um único componente de quatro estados que carrega todo o ponto de vista do produto sobre saúde e honestidade.

281
Design Tokens
2.356+
Token Bindings
0
Hardcoded Hex
Princípio 01
01

Arquitetura de Tokens em Três Camadas

Primitives → Semantic → Component

Todo token do sistema pertence a uma de três camadas. Primitivos guardam valores brutos. Tokens semânticos mapeiam significado sobre esses valores (primary, surface, danger). Tokens de componente vinculam a camada semântica a uma parte específica da UI. Troque um primitivo, e as camadas acima se atualizam automaticamente.

01 · Primitive --blue-500 #2B8FD9
02 · Semantic --color-primary = --blue-500
03 · Component --button-bg-primary = --color-primary
  • 281 tokens nas três camadas — pequeno o suficiente para caber na sua cabeça
  • 2.356+ bindings em componentes, telas e estados
  • Zero hex hardcoded na camada de componente — todo valor remonta, passando pelo semântico, até o primitivo
Princípio 02
02

Migração de Inter → Nunito

Uma Troca de Primitivo · 2.356 Bindings Atualizados

No meio do projeto, o tom de marca quebrou a escolha tipográfica. Inter é nítida e neutra — certa para SaaS, errada para um utilitário irlandês calmo que quer soar como um amigo experiente. Os terminais arredondados da Nunito chegam mais quentes sem abrir mão da legibilidade.

// Por Que a Arquitetura Valeu a Pena

Com um sistema plano, essa migração teria sido um search-and-replace de 2.356 linhas. Com a arquitetura de três camadas, a mudança foi uma única troca de primitivo: --font-family-base passou a apontar de Inter para Nunito, e todo token semântico e de componente se propagou automaticamente.

Dez minutos de trabalho, zero regressões visuais. A arquitetura não era teórica — ela pagou o custo de ser montada logo na primeira mudança estrutural.

Princípio 03
03

A Verdict Ladder

Quatro Estados · Um Componente · Um Ponto de Vista

Seis parâmetros do sensor (TDS, TOC, COD, UV275, EC, TEMP) são complicados. Um veredito não é. A Verdict Ladder é o único componente que transforma a leitura em uma manchete sobre a qual qualquer pessoa consegue agir em menos de dois segundos. Quatro estados. Linguagem simples. Nenhuma muralha numérica.

Estado 01
Excellent
#1AC863 · Verde
Estado 02
Good
#2B8FD9 · Azul
Estado 03
Medium
#FFB200 · Amarelo
Estado 04
Bad
#F43535 · Vermelho
// Decisão Chave · Veredito Antes do Parâmetro

O dashboard lidera com o veredito, não com as leituras. COD, TDS, UV275 são evidência — ficam um toque mais fundo, para quem quiser vê-las. A maioria não quer. Tom calmo em vez de tom assustador: os quatro estados nunca dizem “inseguro” ou “alerta” — eles dizem o que você deve fazer a seguir (ferver, filtrar, beber).

// Linguagem Visual

Tokens, Tipografia & Espaçamento

As oito rampas de cor, a escala tipográfica da Nunito, e a grade de espaçamento base-4 — as superfícies às quais a arquitetura de três camadas afinal se resolve.

// Oito Rampas de Cor · Tom 500
500
Azul · #2B8FD9
Pilar Monitor · ações primárias · links
500
Destaque · #00E87A
Pilar History · gradiente de marca · tendências
500
Verde · #1AC863
Pilar Alerts · veredito Excellent · estado de aprovação
500
Amarelo · #FFB200
Pilar Suggestions · veredito Medium · nudges
500
Vermelho · #F43535
Pilar Map · veredito Bad · alerta crítico
500
Céu · #3D95FF
Destaque de apoio · estados informativos · CTAs secundários
500
Neutro · #0D1E2E
Texto de corpo · chrome do app · traços de ícone
500
Escuro · #071525
Superfícies de foco · onboarding · base do dark mode
// Escala Tipográfica · Nunito · 5 Pesos
Display Sua água, medida. 40 / 700
Título 01 Good morning, Ciarán 32 / 700
Título 02 Last tested today · 08:42 24 / 600
Título 03 Seis parâmetros do sensor 20 / 600
Corpo Calma, factual, nunca alarmista. Um amigo experiente que também é engenheiro de água. 16 / 400
Rótulo Last test · 08:42 13 / 500
// Escala de Espaçamento · Base-4
4
8
12
16
20
24
32
40
48
64
// 03

Três Superfícies Coordenadas

O Fior vive em três superfícies ativas — o estudo de caso que você está lendo, um doc de processo mobile-first, e um protótipo hi-fi interativo. Elas compartilham 281 design tokens, a mesma Verdict Ladder, a mesma voz calma. Um design system. Três vozes.

CONFIDENCIAL // DOC-ID · RM-2026-H2O
// 003 · CASO
FIOR
Verdade da Água
fíor · irlandês · verdadeiro, real, puro
// ESTUDO DE CASO · CONFIDENCIAL
// 01 · Superfície

Estudo de Caso

A entrada narrativa — a história dentro da qual você está agora.

Vanilla HTML Estética Death Stranding
// lendo agora · esta superfície
// 4 MODOS Process → Wireframe → Prototype → System
// DOC DE PROCESSO · MOBILE-FIRST
// 02 · Superfície

Doc de Processo

Um único documento mobile-first com quatro modos — Process, Wireframe, Prototype, System. Percorre a trilha de design desde o enquadramento do problema até o sistema embrionário.

Vanilla HTML Zero deps 4 Modos Mobile-first
Abrir Doc de Processo
// HI-FI · PROTOTYPE
// 03 · Superfície

Protótipo Hi-Fi

Vite + React 18 + TypeScript strict. 15 telas em 6 fases e 3 branches. A Verdict Ladder de 4 estados vive aqui, de ponta a ponta. Hash routing, sem build SSR.

React + TS 15 Telas 28 Testes ~85 KB · WCAG AA
Lançar Protótipo
// 04

O brief não estava no laboratório. Estava na lixeira.

A água pública irlandesa tem 99,8% de conformidade, e as lixeiras de reciclagem de Dublin estão cheias de garrafas de água. Essa lacuna é o verdadeiro brief. As pessoas não estavam fugindo de água insegura; estavam fugindo da ausência de confirmação pessoal. A pesquisa mora menos no que as pessoas dizem estar errado, e mais no pequeno workaround que elas construíram silenciosamente ao redor disso.

A maioria dos apps de saúde lidera com a leitura — TDS 128, pH 7,2 — e deixa você traduzir isso sozinho. Isso é uma falha de voz disfarçada de transparência. A Verdict Ladder do Fior lidera com o estado e guarda os números a um toque de distância. Calma não é um tom; é uma decisão de information architecture.

Tudo isso foi lançado solo — 15 telas, 281 tokens, 28 testes passando, WCAG 2.1 AA — porque o uso disciplinado de AI co-pilot cuidou da execução enquanto eu direcionava o sistema: personas, Information Architecture, a voz calma, a verdict ladder como a decisão central.