Pular para o conteúdo principal

Menu

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

  • Arte de capa abstrata do Pocket Ledger: luzes verde e azul sobre uma grade escura
    MobileEm andamento

    Pocket 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
  • Arte de capa abstrata do Pay Bridge: luzes ciano e verde sobre uma grade escura
    IntegraçãoNo ar

    Pay 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
  • Arte de capa abstrata do Lint Kit: luzes violeta e âmbar sobre uma grade escura
    Open sourceNo ar

    Lint 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