Um produto com muitas funcionalidades e nenhuma porta de entrada clara.
O OPIAN mede a percepção pública de órgãos, partidos e mandatos. Antes do código definitivo, era preciso decidir para quem cada tela fala e provar a experiência inteira, com dados fictícios, para validar com quem vai usar.
- Três segmentos
Institucional, Partido e Político: o mesmo produto muda vocabulário, módulos e navegação conforme o segmento.
- Início por papel
Analista cai na triagem, gestor nas decisões, autoridade num resumo de celular e porta-voz na sua própria tela.
- Protótipo de ponta a ponta
Navegável e completo, com dados fictícios e sem backend, para decidir antes de construir.
As telas, como foram construídas.
Capturas e gravações do produto rodando, sem montagem.
Como o sistema se organiza.
Camadas da aplicação e a estrutura real do repositório.
- InterfaceNext.js 16 · React 19 · Tailwind 4 · Motion
- VisualizaçãoD3 (force, geo, sankey, zoom) · mapas IBGE e bairros
- DomínioSegmentos, papéis e módulos em um vocabulário único
- Dados36 bases fictícias que simulam toda a operação
- EntregaImagem standalone · Quality → Deploy · volta automática
opian/ ├─ src/app/ ............ 88 telas ├─ src/components/ds/ .. design system ├─ src/components/shell/ sidebar, ⌘K, alertas ├─ src/components/mobile/ telas de celular ├─ src/lib/segments.ts .. vocabulário por segmento ├─ src/lib/mock/ ....... 36 bases fictícias ├─ public/geo/ ......... UFs, municípios, bairros └─ docs/design-system.md
Decisões que sustentam o produto.
- 01
Vocabulário por segmento
Um arquivo define nomes, módulos e navegação de cada segmento. A mesma tela serve órgão, partido e político sem duplicar código.
- 02
Design system documentado
Componentes próprios e um guia obrigatório para novas telas: as 88 telas falam a mesma língua visual.
- 03
Celular como produto, não versão
A autoridade recebe um resumo sem menu, pensado para o celular, com prévia do envio por WhatsApp.
- 04
Navegação de quem trabalha rápido
Busca e comandos por ⌘K e atalhos de teclado em toda a plataforma.
- 05
Publicação segura
Cada push passa por lint, tipos e build antes do deploy; o protótipo fica com acesso restrito e, se a nova versão falhar, a anterior volta sozinha.
O que foi entregue.
A decisão sobre o produto ficou visível antes do código definitivo: o cliente navega o OPIAN inteiro, valida com quem vai usar e entra na construção com escopo claro.
- 88telas navegáveis
- 3segmentos comerciais
- 4papéis com início próprio
- 36bases de dados fictícias
- Consultoria de produto
- Identidade visual
- Protótipo navegável
- Design system
- Site de vendas
- Deploy contínuo
métricas de uso a incluir quando medidas em produção