S.E.R.G.I.O
Hidrômetro Inteligente e Aplicativo de Monitoramento
O desafio
Na Região Metropolitana do Recife, o furto de hidrômetros deixa famílias dias sem água e causa desperdício de milhares de litros.
Moradores ficam sem abastecimento até que o hidrômetro seja reposto.
Companhia de água arca com custos.
Falta de leitura remota e notificação proativa.
Processo de design
Conduzimos o projeto com Design Thinking estruturado pelo Double Diamond. Após Descobrir/Definir com Matriz CSD, desk research e entrevistas com moradores e stakeholders, priorizamos o problema e fechamos o escopo do MVP.
Em seguida, evoluímos de um protótipo de baixa fidelidade (avaliação de dimensões, fixação e luzes indicativas) para o protótipo funcional do hidrômetro, validado em testes e entregue como MVP.
Com os aprendizados adquiridos nas fases anteriores, iniciamos o desenvolvimento do aplicativo para os moradores: arquitetura da informação, principais telas (painel e alertas) e fluxo de pagamento via PIX, iterando com testes de usabilidade até consolidar styleguide e interações.
Público
Atendemos principalmente moradores de casas (residências unifamiliares) em Recife e região, independentemente do bairro. Essas pessoas precisam acompanhar o consumo, receber alertas de vazamento ou violação e resolver tudo pelo celular, abrir chamados e pagar via Pix/boletos. Como stakeholders secundários, a companhia de abastecimento e seus técnicos se beneficiam de leitura remota, priorização de ocorrências e redução de custos, enquanto o meio ambiente ganha com a diminuição do desperdício hídrico.
Moradora de Recife
Representante da Companhia de Abastecimento
Objetivos principais
Monitorar consumo em tempo real
Detectar e alertar violações
Abrir chamados
Pagar contas no app
O Hidrômetro
Protótipo funcional do S.E.R.G.I.O. foi montado em Arduino Uno com sensor de fluxo YF-S201 (medição em litros), acelerômetro MPU-6050 para detectar movimentação/violação e módulo Bluetooth HC-05 para telemetria e LED frontal indica o estado do dispositivo. A lógica de estados é simples e auditável: em repouso a LED pisca a cada 1 s, com fluxo de água permanece acesa, e ao detectar movimentação suspeita, pisca a cada 0,5 s. A carcaça é impressa em 3D e integra conexões hidráulicas de meia polegada, acomodando a eletrônica (protoboard, bateria 9V e chicotes) para testes de campo.
Vídeo do protótipo do hidrômetro em funcionamento.
Protótipo Funcional
Vista explodida do protótipo
Protótipo de baixa fidelidade
Esquema dos componentes eletrônicos
O Aplicativo
Arquitetura
Navegação por 5 abas persistentes (Painel, Alertas, Pagamentos, Suporte, Mais) para reduzir esforço cognitivo e garantir acesso rápido às tarefas-chave. Fluxos sensíveis (pagamento, abrir chamado, parear dispositivo) acontecem em modais full-screen para foco e menor chance de erro.
Wireframes
Fluxo em Destaque: Pagamento via Pix
Visão geral
Selecionamos o Pix como fluxo crítico por impacto direto na experiência e no negócio. O objetivo é iniciar o pagamento em até 4 toques, oferecendo copia-e-cola (ênfase de uso real) e QR Code para cenários multi-device. O fluxo prioriza clareza, velocidade e feedback imediato.
Princípios de UX
Foco: telas limpas, um objetivo por passo.
Padrão de mercado: Pix copia-e-cola destacado + QR em segundo plano.
Confiança: revisão antes de confirmar, spinner de processamento, tela de sucesso com recibo.
Acessibilidade: contraste ≥ 4,5:1; alvos ≥ 48×48 px; rótulos claros; leitura de estado.
Vídeo do protótipo do app em funcionamento, mostrando fluxo de pagamento com PIX
Painel
Cartão da fatura em aberto com valor, vencimento e CTA “Pagar”.
Pagamentos
Lista de faturas com valor, vencimento e status. Toque na fatura atual abre o detalhe.
Detalhes da fatura
Exibe valor, vencimento, status e CTA “Pagar agora".
Seleção do método
Opções: Pix, Cartão de crédito e Boleto.
Revisar e confirmar
Valor total, método, descrição (mês/competência). CTA primário: “Confirmar e gerar PIX”.
PIX e código QR
Botão “Copiar” em destaque → toast “Copiado”. QR Code disponível para uso em outro dispositivo.
Sucesso
Confirmação visual (ícone de check), resumo do pagamento e link do recibo (PDF). CTA secundário: “Voltar ao Painel”.
Próximos Passos
Com a prova de conceito validada e o fluxo Pix em hi-fi, os próximos passos estão organizados em sprints curtas para validar experiência, consolidar o design system e preparar o handoff.
Sprint 1
Protótipo interativo - Aproximar a experiência de navegação real e medir usabilidade inicial.
Sprint 2
Teste de usabilidade moderado - Ajustar textos, navegação e CTAs com base em evidências.
Sprint 3
Design System - Garantir consistência visual e escalabilidade.
Sprint 4
Handoff e QA - Reduzir retrabalho na implementação e assegurar qualidade.