Orbit Dashboard
Um dashboard de analytics que explica os próprios números.
- Ano
- 2025
- Tipo
- Web
- Situação
- No ar
- Meu papel
- Design e desenvolvimento full stack
Contexto
Dashboards costumam responder o que aconteceu, raramente o porquê, e quase nunca o quanto dá para confiar em um número. Este produto fictício explora o ponto de partida oposto.
Abordagem
As métricas são documentos versionados guardados junto aos dados. Um pequeno serviço em TypeScript compila tudo em SQL, faz cache dos resultados pela versão da definição e alimenta uma interface renderizada no servidor.
Destaques
- Atualização visível em todos os painéis, com alerta quando passa do limite
- Chaves de cache derivadas da versão da definição: fórmula nova nunca entrega resultado antigo
- Links de detalhamento compartilháveis que reproduzem a consulta exata
- Renderização mediana dos painéis abaixo de 300 ms no benchmark do conceito
Resultado
Nas sessões de teste fictícias, as perguntas sobre números quebrados caíram cerca de dois terços.
A história completa
Por que este conceito existe
O Orbit Dashboard é um produto fictício de analytics que uso para explorar uma pergunta: quanto um dashboard consegue explicar sozinho antes que alguém precise chamar um analista? A maioria dos dashboards responde o que aconteceu. Pouquíssimos ajudam a entender por quê, e quase nenhum diz o quanto dá para confiar no número que está na tela.
O problema da abordagem de sempre
Os times costumam começar pelos gráficos. Alguém escolhe uma biblioteca, liga algumas queries e publica um mural de widgets. Seis meses depois, ninguém lembra qual gráfico conta estornos, qual está em UTC e qual descarta eventos atrasados sem avisar. A interface parece pronta, mas o significado se perdeu.
Eu queria o contrário: começar pelas definições. Cada métrica do Orbit é um pequeno documento versionado, com nome, fórmula, responsável e um limite de atualização. O gráfico é só uma das formas de exibir esse documento.
Como foi construído
- Registro de métricas. As definições ficam no PostgreSQL, ao lado dos dados que descrevem. Assim, uma migration que altera uma coluna também precisa atualizar a métrica que depende dela.
- Camada de consulta. Um serviço enxuto em TypeScript compila as definições em SQL com fuso horário explícito e tratamento explícito de dados atrasados. Os resultados ficam em cache no Redis, com chaves derivadas da versão da definição, então uma mudança de fórmula nunca entrega uma resposta desatualizada.
- Interface. O frontend é um app Next.js renderizado no servidor. Cada painel mostra o valor, o período de comparação, a atualização dos dados e uma definição de uma linha em linguagem simples.
Decisões de design que valem a pena
A atualização faz parte do valor
Número sem data é boato. Cada painel mostra quando seus dados ficaram completos pela última vez e entra em estado de alerta quando passa do limite de atualização. Só essa mudança eliminou a maior parte das mensagens de "isso quebrou?" nas sessões de teste do conceito.
As comparações têm opinião
Em vez de deixar cada pessoa escolher qualquer intervalo de datas, cada métrica declara sua comparação natural: semana contra semana para tráfego, mês contra mês para receita, coorte contra coorte para retenção. Menos botões, menos conclusões erradas.
O detalhamento nunca tira você do contexto
Clicar em um valor abre um painel lateral com a quebra dos dados e os parâmetros exatos da consulta, sem trocar de página. Dá para compartilhar um link para esse estado preciso, o que transforma prints no chat em perguntas reproduzíveis.
O que eu faria em seguida
O próximo experimento são anotações escritas pelo próprio sistema: quando uma métrica sai da faixa habitual, o dashboard listaria os deploys, incidentes e campanhas que aconteceram na mesma janela. A ideia não é substituir analistas, e sim dar a eles perguntas iniciais melhores.
Observações
Este é um conceito de design e engenharia com dados inventados. Os números, as pessoas usuárias e as sessões de teste descritos aqui são fictícios e existem só para mostrar como eu abordo um problema desse tipo.
Tecnologias
- TypeScript
- React
- Next.js
- PostgreSQL
- Redis
Galeria
Projetos relacionados
MobileEm andamentoPocket Ledger
Conceito mobile de finanças que registra gastos em dois toques, sincroniza quando a conexão volta e nunca perde um lançamento.
- TypeScript
- React
- Node.js
- PostgreSQL
IntegraçãoNo arPay Bridge
Conceito de integração entre uma loja e um provedor de pagamentos, com requisições idempotentes, fila durável e relatórios de conciliação legíveis.
- Node.js
- TypeScript
- Stripe
- RabbitMQ
- mais 1 tecnologia
Open sourceNo arLint Kit
Conceito open source: uma configuração de lint em que cada regra aponta para uma justificativa curta, para que os times adotem por acordo e não por imposição.
- TypeScript
- Node.js
- Git
- GitHub
