Estudo de caso

Painel de Gestão Processual & Formulários Dinâmicos B2B

Padronização arquitetural de um ecossistema com dezenas de fluxos jurídicos e regulatórios complexos.

Papel
Lead UX Designer & Product Owner
Escopo
Arquitetura da Informação, Mapeamento de Fluxos, Design System, Prototipagem e Documentação de Handoff
Áreas
  • B2B
  • Design System
  • Arquitetura da Informação
  • Jurídico/Regulatório
Painel de gestão processual: tabela de processos com filtros, busca por número e badges coloridos de situação como Pendente, Em análise e Em atraso.

Analistas, técnicos e magistrados perdiam tempo e cometiam erros ao consultar e registrar processos de alto volume em um sistema sem padronização. Reestruturei o ecossistema em duas frentes: um painel de gestão para consulta rápida e um formulário de inclusão progressiva com salvamento automático, reduzindo o retrabalho entre Design e Engenharia e o tempo de busca de processos. O resultado foi 40% de ganho de tempo no preenchimento e 25% menos erros.

Sistemas corporativos e administrativos frequentemente sofrem com o acúmulo de dados desorganizados, telas poluídas e formulários intermináveis sem hierarquia clara. O objetivo foi transformar uma operação complexa em um ambiente de trabalho produtivo, intuitivo e à prova de falhas.

Os dois grandes gargalos operacionais

  1. Navegação em painéis de alto volume

    Dificuldade em localizar processos críticos, prazos urgentes e status atualizados devido à falta de filtros avançados e tabelas mal estruturadas.

  2. Formulários extensos e rígidos

    A inserção de dados jurídicos (partes envolvidas, advogados, prazos, anexos) era custosa, sem salvamento de rascunhos e com alta taxa de abandono ou preenchimento incorreto de campos obrigatórios.

O maior desafio não foi só a estética visual, mas sim a taxonomia e o sequenciamento lógico da informação.

Pilares da arquitetura da informação criada

  • Divulgação progressiva (progressive disclosure)

    Em vez de exibir dezenas de campos simultaneamente, o formulário foi dividido em seções lógicas e sequenciais (Dados do Processo → Partes → Documentação → Revisão).

  • Densidade de dados balanceada

    Tabelas operacionais capazes de exibir múltiplos atributos (número, tipo, juiz responsável, prazo, status) sem gerar poluição visual ou exigir rolagem excessiva.

  • Prevenção de erros (error prevention)

    Funções de “Salvar Rascunho” e “Pré-visualizar Modelo” para permitir pausas e revisões antes da submissão definitiva.

  • Busca global vs. filtros combinados

    Optou-se por filtros multifacetados alinhados à barra de busca rápida, permitindo que analistas encontrem um caso específico por número, data ou status em menos de 3 cliques.

  • Formulário passo a passo (wizard) vs. página única

    A abordagem em etapas progressivas foi escolhida para reduzir a carga cognitiva, agrupando campos por afinidade sem perder o contexto do progresso geral.

  • Gestão de prazos visual

    Marcadores e micro-badges de status (ex.: “Urgente”, “Em Análise”, “Concluído”) com código de cores acessíveis para identificação imediata na lista de processos.

  • A. Painel de Gestão Processual (Dashboard)

    Interface tabular otimizada para consulta rápida, com paginação limpa, ordenação de colunas por prioridade/prazo e navegação por abas contextuais.

  • B. Interface de Inclusão de Processos

    Fluxo de entrada de dados estruturado em blocos colapsáveis e etapas claras, com validação em tempo real de campos obrigatórios e suporte a rascunhos.

Para garantir que a visão de produto fosse traduzida perfeitamente no desenvolvimento front-end, criei um pacote de handoff e especificações de design:

  • Guia de componentes e design system

    Detalhamento funcional de tabelas, botões, modais, inputs, tags de status e filtros.

  • Especificação de grids e espaçamentos

    Definição rigorosa de margens, paddings e regras de responsividade para diferentes resoluções corporativas.

  • Mapeamento de estados de interação

    Default, hover, foco, preenchimento, erro, carregamento e sucesso.

  • Fluxos de erro e casos de borda

    Comportamento do sistema em quedas de conexão ou inconsistência de dados.

de ganho de tempo no preenchimento de formulários
40%
menos erros no preenchimento de formulários
25%
  • Padronização e escala

    A estrutura de componentes e formulários criada serviu de base reutilizável para outros módulos do sistema.

  • Eficiência do time de TI

    A documentação completa reduziu chamados de dúvidas durante a sprint e eliminou o retrabalho de refatoração de UI.

  • Ganhos de produtividade

    Usuários finais relataram maior agilidade na localização de pendências e maior confiança ao registrar novos processos.