Pular para conteúdo

MVP-1 Web Rebrand Total (2026-04)

Objetivo

Redefinir completamente a identidade visual e a experiência da superfície web do Auraxis, com foco em:

  1. precisão analítica;
  2. leitura imediata para usuário leigo;
  3. profundidade operacional para usuário hardcore.

Este documento substitui a direção de "polimento incremental" por uma estratégia de rebrand total (cores, tipografia, layout, navegação e comportamento de dados).

Problema a resolver

A versão atual dos protótipos apresenta:

  • drift visual entre páginas (dark institucional vs light SaaS vs variações isoladas);
  • consistência fraca de tipografia e semântica visual;
  • navegação com padrões diferentes por feature;
  • dashboard com leitura boa, porém sem estrutura de analytics ampla e alternância robusta de visualizações.

Resultado: percepção de produto fragmentado e sem assinatura forte de plataforma financeira premium.

Referências e sinais de mercado (pesquisa)

1. Direção Apple (clareza + profundidade sem ruído)

  • Apple HIG (Materials): ênfase em material dinâmico para hierarquia entre conteúdo e controles, mantendo legibilidade.
  • Apple HIG (Charts): gráficos devem destacar poucas mensagens-chave com leitura rápida e acessível.

2. Benchmarks de produto financeiro moderno

  • Copilot (App Store + artigo Apple): posicionamento em clareza visual, cash flow e drill-down por período/categoria/transação.
  • Monarch (App Store): dashboard customizável com visão consolidada, relatórios por tendência e metas de médio/longo prazo.
  • TradeMap (App Store): proposta explícita de navegação fluida + carteira consolidada com gráfico em tempo real e camada analítica.

3. Acessibilidade e ergonomia obrigatórias

  • WCAG 2.2: foco em navegação por teclado visível, elemento focado não oculto e alvo mínimo adequado para toque/interação.

Nova Direção de Design (rebrand total)

Nome da direção

Precision Layered Analytics

Princípios

  1. Signal-first: a informação crítica aparece antes da informação completa.
  2. Progressive disclosure: do simples para o avançado sem mudar de tela.
  3. Instrument panel feeling: sensação de painel profissional (não "app de template").
  4. Human + Quant: copy simples para leigos e métricas profundas para usuários avançados.

Nova identidade visual (proposta v1)

Paleta (nova, sem herança direta da versão anterior)

  • bg-900: #070B12
  • bg-800: #0E1522
  • surface-700: #141F31
  • surface-600: #1C2A40
  • text-100: #EAF2FF
  • text-300: #A7B4CB
  • brand-primary: #5AB2FF (azul precisão)
  • brand-secondary: #27D3B1 (teal ação/saúde)
  • brand-tertiary: #8E7CFF (contexto analítico)
  • profit: #22C55E
  • loss: #F87171
  • warning: #F4C75E

Tipografia (nova)

  • Heading: SF Pro Display (fallback: Inter)
  • Body/UI: Inter
  • Números e métricas: IBM Plex Mono

Motion

  • curto e utilitário: 120–220ms
  • sem "efeitos show"; microanimação com propósito (foco, seleção, mudança de período)

Propostas visuais (A/B/C)

Proposta A - Cobalt Intelligence

  • base escura fria (navy/carbon) com acentos azul + teal;
  • visual de painel executivo refinado;
  • melhor equilíbrio entre clareza para leigo e profundidade analítica.

Proposta B - Graphite Minimal Apple-like

  • menor saturação, maior uso de cinzas azulados;
  • destaque pontual para ações e estados;
  • estética super limpa, focada em legibilidade e microinterações.

Proposta C - Market Pulse (mais TradeMap, selecionada)

  • contraste alto com acentos mais vibrantes;
  • densidade de informação maior no dashboard;
  • excelente para hardcore, mas exige guardrails para não sobrecarregar iniciantes.

Critério para escolha entre A/B/C

  1. tempo de entendimento do cenário financeiro em <= 30s (usuário leigo);
  2. cliques para drill-down de categoria/transação (usuário hardcore);
  3. percepção de acabamento premium em teste rápido qualitativo.

Arquitetura de informação (web)

Público

  • Landing
  • Pricing
  • Ferramentas Públicas
  • Login
  • Cadastro

Privado

  • Dashboard (analytics-first)
  • Transações
  • Metas
  • Carteira
  • Ferramentas

Regras de navegação

  • mesmo padrão de header/shell entre superfícies equivalentes;
  • breadcrumbs consistentes no privado;
  • filtros e contexto de período sempre no topo da área analítica.

Dashboard alvo (analytics-first)

Estrutura

  1. Control bar global (fixa)
  2. período rápido: 7d, 30d, Mês, Trimestre, Ano, Custom
  3. comparação: vs período anterior on/off

  4. dimensão: por categoria, por conta, por projeto, por tag

  5. Faixa executiva (leigo)

  6. Receitas, Despesas, Saldo líquido, taxa de poupança

  7. 3 insights textuais curtos: "o que mudou" + "próxima ação"

  8. Workspace analítico (hardcore)

  9. alternância por aba/segmento de gráfico:
  10. Fluxo de caixa (barras + linha)
  11. Composição de gastos (stacked/donut)
  12. Tendência acumulada (área)
  13. Calendário de gastos (heatmap)

  14. drill-down: clique no ponto/barra => categoria => transações

  15. Tabela analítica detalhada

  16. ordenação, filtro e export

  17. colunas densas para usuário avançado

  18. Modo de leitura

  19. Essencial (resumo + ações)
  20. Analítico (painel completo)

Critério visual do dashboard

  • qualquer pessoa entende o cenário financeiro em <= 30s;
  • usuário avançado consegue investigar variação sem trocar de produto/tela.

Plano de execução (refeito)

Fase 0 - Brand Reset (1 semana)

  • congelar decisões antigas de paleta/tipografia para web;
  • aprovar nova base semântica de tokens;
  • revisar docs canônicos impactados.

Fase 1 - Foundation System (1 semana)

  • tokens v3 (cores/tipo/spacing/radius/motion);
  • componentes de shell e navegação;
  • estados de acessibilidade (focus, target size, etc).

Fase 2 - Wave A (1-2 semanas)

  • landing, login, signup, forgot_password, dashboard;
  • objetivo: primeira impressão premium + analytics claro.

Fase 3 - Wave B (1-2 semanas)

  • tools_home + calculadoras;
  • template único de calculadora com linguagem visual consistente.

Fase 4 - Wave C (1-2 semanas)

  • financial_goals, investments_wallet, investor_questionnaire;
  • unificação narrativa: perfil -> meta -> carteira.

Fase 5 - Unificação final

  • revisão cross-feature;
  • validação de consistência e performance visual;
  • pacote final para web/app parity.

Métricas de sucesso

  1. Taxa de conclusão de tarefas críticas >= 90%.
  2. Tempo para primeira ação no dashboard <= 30s.
  3. Redução de erros de navegação >= 30%.
  4. 0 drift visual entre telas da mesma wave.

Governança e risco

Este rebrand total altera bases canônicas anteriores de design no web.

Ações obrigatórias para execução completa:

  1. atualizar fontes canônicas de design no contexto global;
  2. validar impacto de paridade com app;
  3. definir rollout progressivo para evitar regressão de UX.

Fontes utilizadas