Resultado em uma frase
Uma plataforma B2B de precificação, cheia de regras e dados, ganhou uma interface que times comerciais conseguem usar sem planilha paralela, e um processo de produto que manteve stakeholders e desenvolvedores olhando para a mesma prioridade.
- Cliente: Maxi Margin, plataforma de gestão de preços e margem para empresas com grandes catálogos de produtos
- Meu papel: redesign visual e de UI/UX, implementação do frontend em React e Chakra UI, e Product Manager (sprints no ClickUp e ponte entre stakeholders e time técnico)
- Redesenhar pelo fluxo de trabalho: organizei a plataforma em torno do caminho real do usuário: definir a estratégia, planejar a execução, acompanhar os produtos e analisar os dados.
- Esconder a complexidade, não removê-la: regras e filtros continuam poderosos, mas são montados visualmente, com construtor de condições, arrastar e soltar e pré-visualização, em vez de campos técnicos.
- Design system sobre o Chakra UI: uma biblioteca de componentes compartilhados (tabelas, filtros, painéis, diálogos, cabeçalhos de workflow) para manter consistência entre módulos e acelerar telas novas.
- Produto com cadência: como PM, organizei o backlog e as sprints no ClickUp, traduzi pedidos de negócio em histórias que o time conseguia estimar e mantive os stakeholders informados sobre o que entrava, o que ficava e por quê.
- Interface única e consistente entre estratégias, execução, produtos e dados
- Regras complexas montadas visualmente, sem depender do time técnico
- Sprints com prioridade clara e stakeholders acompanhando o que era entregue
O contexto
Em empresas com milhares de produtos, preço é estratégia: uma regra de margem mal configurada se multiplica pelo catálogo inteiro. Quem define essas regras é o time comercial e de pricing, não o time de tecnologia, então a ferramenta precisa ser poderosa sem exigir que o usuário pense como programador.
O problema
A plataforma tinha a lógica certa, mas a experiência não acompanhava. Montar uma estratégia de preço, filtrar produtos por regras, acompanhar a execução e conferir o resultado exigia conhecer o sistema por dentro. Ao mesmo tempo, as demandas chegavam de vários lados, e sem um processo claro o time técnico ficava entre pedidos concorrentes sem saber o que entregar primeiro.
A abordagem
A solução
Estratégias de preço. Um workflow visual de tarefas por estratégia, com tarefas reordenáveis por arrastar e soltar, filtros montados num construtor de condições, métricas de negócio selecionáveis e histórico de alterações. Uma galeria de templates permite começar uma estratégia a partir de modelos prontos. Planos de execução. Agendamento e acompanhamento da aplicação das estratégias, com changelog de cada plano. Gestão de produtos. Tabelas grandes com virtualização, visões configuráveis e salvas pelo usuário, e o cálculo de preço, margem e markup processado direto da interface.
Data hub e dashboards. Importação e exportação de bases de dados, dashboards montáveis em grade com gráficos e uma interface em português e inglês.
Gestão de produto. Backlog e acompanhamento de sprints no ClickUp.
Por baixo do capô
React 18 com TypeScript, Chakra UI com tema próprio, TanStack Query, Table e Virtual para lidar com catálogos grandes sem travar a tela, React Hook Form, dnd-kit para os workflows, construtor de consultas para regras, ECharts e Gridstack nos dashboards, editor Monaco para casos avançados, autenticação com Auth0, consumo de APIs GraphQL e REST, i18n em pt-BR e en-US e pipeline de CI no Azure DevOps.
Resultados
O que eu levo deste projeto
Fazer design, frontend e gestão de produto ao mesmo tempo mostrou que boa parte dos problemas de interface nasce antes da tela, na conversa sobre prioridade. Quando o time sabe por que algo importa, a solução fica mais simples para todo mundo.
