Modo 01 · Processo

Do aviso de ferver a água a uma sonda.

Cinco etapas, em ordem. Cada afirmação tem fonte — o Fior é um exercício de design, mas os dados de qualidade da água da Irlanda por trás dele são reais.

281
Variáveis
2356+
Vínculos
27
Telas
0
Hex fixos
ETAPA 01

Descoberta

Por que um país com 99,8% da água em conformidade ainda precisa de uma sonda pessoal.

O número de destaque da água na Irlanda parece ótimo: 99,8% das amostras de água pública cumprem os limites bacteriológicos e químicos. Mas essa média esconde um risco localizado, no nível de cada casa — e as pessoas mais expostas (donos de poço, quem aluga imóvel antigo, pais preparando mamadeira) não têm como checar no dia a dia.

Evidências — EPA, 2025

  • ~497 mil pessoas em abastecimentos "em risco" (Remedial Action List, fim de 2024).
  • O limite legal de chumbo cai pela metade em 2036 (10 → 5 µg/L); a EPA classificou o avanço como "lento demais".
  • Apenas 52% das águas superficiais em condição ecológica satisfatória (ante 54%).
  • Poços privados são o maior ponto cego — a EPA pediu registro obrigatório em julho de 2025.

A lacuna que o Fior fecha: entre "a água é tecnicamente segura na média nacional" e "eu, hoje, na minha casa, posso confirmar."

ETAPA 02

Pesquisa

Uma sequência de raciocínio em 5 passos no quadro do FigJam, do mapa de impacto ao primeiro wireframe.

O trabalho não começou pelas telas. Começou por uma pergunta ampla — "impactos da água não tratada na Irlanda?" — e passou por cinco reenquadramentos antes de existir qualquer interface.

Sequência de 5 passos

  • Mapa de impacto — 4 categorias: saúde · qualidade da água potável · meio ambiente · economia.
  • Definição do problema — "Domicílios rurais na Irlanda precisam de uma forma confiável e acessível de ter água limpa e segura."
  • How Might We — 8 reenquadramentos (acesso, educação, monitoramento, comunidade, tecnologia, feedback, serviço, incentivos).
  • Ideação — 4 direções de produto; monitorar + melhorar escolhida pelo valor pessoal + o diferencial do hardware.
  • Primeiro wireframe — esboço ASCII de 4 telas (Home → Test → Result → Suggestions) — ancestral direto do hi-fi de 14 telas.

Tudo o que veio depois — pilares, componentes, o protótipo — é só engrossar a espinha dorsal desenhada no passo 5.

ETAPA 03

Personas

Três usuários concretos — um primário, dois puxando em direções diferentes.

O Inquilino Preocupado · 25–40

Urbano (Dublin · Cork · Galway). Aluga, não pode mexer no encanamento. Preocupado com canos de chumbo. Já compra jarras com filtro. Primário.

O Dono de Poço Rural · 35–65

Fora do abastecimento público. Fez um teste de laboratório "uma vez, anos atrás". Preocupado com o escoamento agrícola. Secundário.

Os Novos Pais

Preparo de mamadeira, água do banho, alerta de chumbo para bebês. Alta urgência, alta disposição a pagar. Terciário.

⚠ Tensão em aberto

A definição original do problema girava em torno de domicílios rurais, mas a persona primária é um inquilino urbano. Vale justificar no texto do case — provavelmente um pivô para seguir o público de maior densidade.

ETAPA 04

Pilares

Cinco pilares de funcionalidade, cada um com sua cor e sua função.

Monitor Leitura do sensor ao vivo
History Tendências ao longo do tempo
Alerts Notificações push
Suggestions Ações em linguagem simples
Map Comunidade + camada da EPA

MoSCoW para o v1: leituras ao vivo, score de 4 níveis, pareamento BLE, alertas push, sugestões básicas, histórico de 30 dias (Must). Tendências, limiares, tags de localização, referências da EPA, dark mode (Should). Mapa da comunidade, compartilhamento, diretório de fornecedores (Could). Sem assinatura, sem smart-home, sem feed ao vivo do governo (Won't).

ETAPA 05

Decisões

Seis escolhas que moldaram o resto do trabalho.

1 · Hardware-first, não software puro Reformula a pergunta de "confie na rede" para "veja por si mesmo" — o único jeito de fechar a lacuna.
2 · Veredito antes dos valores de parâmetro "Good · 76/100" é a manchete. COD/TDS são evidência, não a resposta.
3 · Inter → Nunito no meio do projeto Terminações mais suaves transmitem o tom caloroso/irlandês melhor que a geometria mais dura da Inter.
4 · Tokens de três camadas desde o dia 1 Deixaram a migração de tipografia barata e o plano de dark mode trivial.
5 · Protótipo React de verdade Um recrutador usa o produto em 60 segundos, sem precisar de conta no Figma.
6 · Tom calmo em vez de tom assustador A tentação padrão é ser alarmista; o alarmismo ensina o usuário a ignorar alertas. O Fior escolhe a calma.

Modo 02 · Wireframe

Do sensor ao veredito em 9 passos.

Fluxo de baixa fidelidade. Alterne o veredito para ver como os três caminhos divergem — o app transforma o resultado, o alerta e as sugestões.

Setup · o pré-teste comum — abra o app, pareie o sensor, mergulhe.

PASSO 01 Setup

Abra o Fior

Carrossel de três slides, pedido de permissões. Sem fricção antes do valor — o usuário vê por que o Fior existe antes que qualquer coisa seja pedida.

PASSO 02 Setup

Pareie o sensor

Busca por Bluetooth. Um toque para parear assim que o dispositivo é encontrado. Caminho alternativo: se nenhum sensor aparecer, direciona para a solução de problemas.

PASSO 03 Setup

Mergulhe o sensor

Tela instrucional com ilustração animada. O CTA fica desabilitado — o tom é "acompanhe", não "clique para continuar".

PASSO 04 Monitor

Leituras ao vivo

Seis parâmetros alimentam um anel de score — o veredito é a manchete, os números são evidência. O score se transforma conforme o caminho acima.

PASSO 05 Monitor

Veredito

Badge âmbar, três cards de motivo explicando quais parâmetros puxaram o score para baixo. O CTA convida à ação, não ao alarme.

Badge verde, comentário mínimo. Sem texto assustador para um score que não justifica — o CTA pula direto para o histórico.

Badge vermelho, instrução clara de ferver a água. O CTA é prescritivo, não sugestivo — este é o momento de "agir agora" no fluxo.

PASSO 06 Alerts History Alerts

Alerta dispara

Resumo de sucesso

Banner persistente

Notificação push fora do app + um banner suave dentro do app quando você o abre. Informativo, não alarmante.

Nenhum alerta dispara. Em vez disso, uma confirmação de uma tela — "está tudo bem" — e o fluxo pula para o histórico sem incomodar.

O banner vermelho fica fixo no topo de todas as telas até o usuário agir. Alta urgência é reservada para alto risco.

PASSO 07 Suggestions Pulado Suggestions

Central de sugestões

Pulado

Prioridade ferver + filtrar

Três abas: correções rápidas, melhorias de longo prazo, opções da comunidade. Custo e tempo mostrados de cara — sem contas escondidas na torneira.

Um score bom significa nada a corrigir. O passo de sugestões é pulado para que o usuário não seja treinado a ignorá-lo depois, quando importa.

A lista se reordena — ações de ferver e filtrar sobem ao topo, o resto recolhe. Um toque em "mark as done" retroalimenta o status do dashboard.

PASSO 08 History

Salvo no histórico

Cada leitura vira um bloco de dia com seu próprio badge. O único lugar para onde todos os caminhos convergem — uma memória compartilhada da água da casa.

PASSO 09 Map

Veja o mapa da área

Camada de comunidade + EPA. Com zoom no bairro, pins com código de cor, o pin azul "me" ancora o usuário. Opt-in — nem todo mundo quer compartilhar.

Modo 03 · Protótipo

15 telas, 6 fases, 3 caminhos.

O walkthrough hi-fi completo vive no seu próprio deploy (React, desktop-first). Esta galeria é o índice amigável para mobile — percorra o fluxo e mergulhe no real quando estiver pronto.

Fase 01

Chegada

Recebe o usuário e estabelece confiança antes de pedir qualquer coisa.

01 · Welcome

Welcome

Splash de abertura com tagline e ilustração do dispositivo; CTA primário "Get started".

02 · Permissions

Permissions

Passo 2/4 — Bluetooth obrigatório, notificações e localização opcionais.

Fase 02

Conexão

Pareia o sensor. Faz parecer mágica, não configuração.

03 · Pair Sensor

Pair sensor

Animação de pulso BLE, card de dispositivo encontrado, pareamento em um toque.

04 · Ready

Ready

Passo 4/4 — 100% completo, sensor pareado, recursos vinculados.

Fase 03

Medição

Transparência durante a espera — mostra o trabalho sendo feito.

05 · Measuring

Measuring

Anel de progresso em tela cheia, labels por fase (sampling · analysing · calibrating).

Fase 04

Resposta

Entrega o veredito. Deixa a próxima ação óbvia.

06 · Results

Results

Card de score 76/100, grade de 6 parâmetros, tendências em sparkline, CTA para sugestões.

07 · Suggestions

Suggestions

Cards de ação priorizados — ferver, filtrar, UV, clorar — com custo e tempo.

08 · Alerts

Alerts

Abas de filtro (All · Critical · Warning · Resolved), lista de alertas ativos.

Fase 05

Contribuição

Pequena camada social — compartilha leituras, constrói um mapa local.

09 · Community Map

Community map

Pins com código de cor, controle de camadas, FAB de enviar leitura, legenda.

10 · Share Reading

Share reading

Toggle de anonimato, campo de localização, textarea de nota — "1,284 others in Galway".

11 · Contributed

Contributed

Tela de agradecimento — estatísticas de impacto (7 este mês, 42 no total, 12 ajudados).

Fase 06

Retorno

A tela inicial para onde eles voltam — status num relance.

12 · Dashboard

Dashboard

Score em destaque, CTA "Test now", 4 mini-cards de parâmetro, atalho de alertas.

Caminhos · estados alternativos

Como o fluxo se comporta em casos extremos

Três variações do par resultado/dashboard: nenhum sensor detectado, score perigosamente ruim, score excelente.

13 · No sensor

Empty state

Dashboard antes do pareamento — "No water data yet" + CTA de buscar dispositivo.

14 · Results · Bad

Poor result

Score 38/100, banner vermelho de ferver a água, CTA de perigo trava a tela.

15 · Results · Excellent

Excellent result

Score 92/100, tema verde, "All parameters within safe range".

Modo 04 · Sistema

281 variáveis, zero hex fixo.

Um design system embrionário, entregue na v3 — espelhado aqui do arquivo do Figma. Três camadas, cinco pilares, seis componentes, dezesseis ícones. É o esqueleto sobre o qual o resto do Fior é construído.

Seção 01

Cascata de três camadas

Todo token referencia a camada acima dele. Mude os primitivos, tudo herda.

O DS do Fior usa uma arquitetura de 3 camadas: primitivos (valores absolutos), semânticos (aliases contextuais), componentes (tokens específicos). Foi isso que deixou barata a migração Inter → Nunito no meio do projeto — e o que torna o plano de dark mode trivial.

89 primitivos + 97 semânticos + 95 componentes = 281 no total. Os tokens semânticos carregam os modos Light + Dark. Zero hex fixo em 27 telas e 2356+ vínculos de variável.

Seção 02

Cor — 5 famílias + neutro

Uma cor por pilar de funcionalidade, rampa neutra de 10 passos, tudo referenciado por aliases semânticos.

O nível 400 é a cor de trabalho do pilar (Blue 400 = o accent do Monitor, etc). O 50 é a superfície suave; o 500 é a ação mais escura; o 700 é o inverso profundo. O resto da escala completa os estados sem ginástica de hex.

Seção 03

Escala tipográfica — Nunito

Migrada da Inter na v3. Terminações mais suaves, tom mais caloroso, mesmo mapeamento de pesos.

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

Pesos: 400 / 500 / 600 / 700 / 800. O mapeamento Inter → Nunito foi 1:1, então a migração tocou apenas o token font-family, não as 27 telas.

Seção 04

Espaçamento — base-4

Uma escala, derivada, nunca no olho. Tokens contextuais montam por cima para os componentes.

Tokens contextuais em camada por cima: icon-gap · 4, card-inner · 20, section-gap · 24, nav-height · 48, hero-gap · 64. Nunca padding: 17px em lugar nenhum.

Seção 05

Componentes — 6 sets, 42 variantes

Inventário pequeno, intencional. Cada componente justifica sua existência aparecendo em 3+ telas.

Button 6 variantes
Primary Secondary Outlined Warning Success Disabled

Presente em Dashboard, Results, Suggestions. Implementado no protótipo. Alvo de toque mínimo 44×44pt (Apple HIG · WCAG 2.5.5).

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

Presente no card de score do Dashboard, nos blocos de dia do History, no veredito de Results. A cor sempre acompanhada de texto — nunca o único sinal (WCAG 1.4.1).

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

Presente no formulário de Share reading (localização, nota). O anel de foco tem borda de accent de 2px para visibilidade na navegação por teclado.

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

Presente nas leituras ao vivo do Monitor. 6 params (TDS, TOC, COD, UV275, EC, Temp). O header pareia o nome do parâmetro com sua tag de status; o sparkline mostra a tendência recente, tingido pelo nível de risco.

Nav Bar 2 temas
homeHome sensorsMonitor notificationsAlerts mapMap
homeHome sensorsMonitor notificationsAlerts mapMap

Presente em todas as telas do app (posição inferior no mobile, sidebar no desktop). Os temas Light + Dark se adaptam via tokens semânticos — mesmo componente, superfície diferente.

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

Presente em todo lugar — nav, status, ações, feedback. Estilo outlined · 24×24 · traço de 2px · neutral-900 padrão. Baseado em traço para manter o peso consistente com a Nunito.

O que ainda não estamos construindo: modals, toasts, date pickers, skeleton loaders, componentes de chart. Cada um só entra quando uma tela precisar dele mais de duas vezes — sem componentes especulativos.

Seção 06

Os números

Estado entregue do DS na v3 (março de 2026).

O Figma é a fonte da verdade — tudo aqui é espelhado do arquivo de trabalho do Fior. Se este artefato algum dia divergir da spec, o Figma vence.

Arquivo de trabalho interno — não divulgado publicamente.