Customer Portal
Um portal de autoatendimento pros clientes industriais da NETZSCH Grinding & Dispersing: máquinas, peças de reposição, orçamentos, contratos, testes de laboratório e um assistente de IA. Feito pra quem toca as compras numa planta, não pra comprador casual.
- 110+
- Frames no Figma
- 12
- Fluxos desenhados
- 4
- Papéis do lado do comprador
Desafio
Compra industrial não se parece com e-commerce. Os compradores pedem por número de peça e código de material, compras acima de um teto precisam de um aprovador, os preços vêm de contratos negociados e não de uma lista pública, e quem opera a máquina muitas vezes nem tem permissão pra ver preço.
Antes do portal, tudo isso passava por e-mail e representantes de vendas. O briefing era um lugar único onde o cliente pudesse conferir suas máquinas instaladas, repor mídia de moagem, acompanhar pedidos e puxar preço de contrato sem ligar pra ninguém.
Abordagem
Desenhei a superfície inteira no Figma: 110+ frames em 12 fluxos, de um caminho de cadastro e SSO de 23 telas até checkout, contratos, serviços e uma área administrativa de cinco páginas. Só light mode, Inter, o verde NETZSCH e uma meta de contraste AAA, porque isso é usado em laptops de chão de fábrica com telas ruins.
A decisão estrutural foi o design por papéis. Quatro papéis do lado do comprador (administrador, comprador, aprovador, técnico) veem navegações diferentes, ações diferentes, e no caso do técnico nenhum preço em lugar nenhum: o "adicionar ao carrinho" dele vira "solicitar aprovação" e gera um número de solicitação interno em vez de um pedido. Também desenhei a Milla, uma assistente de IA com quatro estados, de uma sugestão na barra de busca até um chat completo, com escopo em peças de reposição, status de pedido e documentos.
A implementação foi pra HTML/CSS com um contrato 1:1 com o Figma, assumida por um colega em abril de 2026 enquanto eu revisava contra os frames.
Resultado
68 telas estão no ar no deploy de teste interno, fiéis pixel a pixel à fonte no Figma, cobrindo dashboard, máquinas com horímetros e histórico de serviço, loja com faixas de preço por volume, pedidos, orçamentos, contratos com listas de preço negociadas e a área administrativa completa.
É pré-produção: o deploy fica atrás de um portão de acesso, e as respostas da Milla são simuladas enquanto a integração com o LLM segue no roadmap. O que existe hoje é a superfície completa desenhada e construída, esperando a ligação com o backend.
Pra quem eu desenhei
O Marcus, a persona em toda tela, gerencia as compras de uma planta que roda cinco moinhos NETZSCH. O trabalho dele é manter as máquinas moendo: repor as esferas antes que acabem, orçar um eixo de rolamento, verificar por que um pedido atrasou.
Em volta dele estão três outros papéis com direitos diferentes. O aprovador revisa o que os compradores põem na fila. O técnico sabe exatamente qual peça de reposição a máquina precisa, mas não tem permissão pra comprometer dinheiro. O admin gerencia quem pode fazer o quê. Desenhar pros quatro ao mesmo tempo é o que moldou o portal mais do que qualquer decisão visual.
A decisão-chave: papéis como primitivo de design
A versão fácil desse portal seria uma interface só com um toggle de admin. Em vez disso, desenhei o modelo de papéis dentro de cada fluxo, e o deixei visível numa matriz de admin onde as permissões de cada papel podem ser lidas por módulo.
O papel do técnico é o exemplo mais claro. Mesmo catálogo, mesmas páginas de máquina, mas sem preço, sem carrinho e sem checkout. O fluxo dele termina numa solicitação com número próprio que cai na mesa do aprovador. Isso respeita como essas empresas de fato compram: a pessoa com o conhecimento técnico e a pessoa com o orçamento são pessoas diferentes, e fingir o contrário é como os portais acabam sem uso.
O que não foi bem
A Milla é o buraco honesto. Desenhei quatro estados de uma assistente de IA e as respostas da demo são enlatadas: a integração do modelo nunca saiu do roadmap enquanto eu estava no projeto. O design se sustenta, mas não tenho como te mostrar uma resposta real.
O outro buraco é a validação. O portal vive num deploy de teste com portão e ainda não esteve na frente de clientes de verdade, então toda decisão de fluxo ainda é uma aposta informada, não uma medida. E eu passei a implementação adiante no meio do projeto, o que deu certo porque o contrato 1:1 era rígido, mas significa que o acabamento entregue depois desse ponto não é meu pra reivindicar.
Telas selecionadas
" Design B2B é, na maior parte, respeitar um organograma que você não desenhou. As melhores ideias do portal não são visuais, são os números de solicitação, as filas de aprovação e as regras de visibilidade de preço que espelham como um cliente industrial já trabalha. "
IRIS Design System
→A biblioteca de componentes por trás da plataforma HMI IRIS. 29 famílias de componentes, tokens, variações de painel de 12" e 15".