EZ Topology: design de interface para sistemas de rede complexos
Estruturei a experiência do EZ Topology e traduzi configurações técnicas de rede em fluxos operacionais lógicos para profissionais de infraestrutura.
- 100%
- Fluxos mapeados. A experiência completa, do login até a entrega do mapa de rede por e-mail.
- DS
- Design system. Biblioteca de componentes com tokens, variantes e estados, pronta para o front-end.
- 4
- Jornadas críticas: autenticação, setup, mapeamento de nós e resultados, com feedback visual explícito.
- ☾
- Dark mode nativo, para reduzir a fadiga visual no ambiente de trabalho dos profissionais de TI.
Sobre o produto
Uma ferramenta técnica projetada para uso imediato
O contexto do EZ Topology pedia um design focado no posicionamento claro da ferramenta e na eficiência de quem usa.
A Harpia Networks criou o EZ Topology para automatizar a descoberta de redes de computadores pelo mapeamento da topologia física. O trabalho manual deu lugar a um processo concluído em poucos minutos, com os resultados organizados direto no e-mail do cliente.
O modelo de negócio exige uma curva de aprendizado quase nula. O usuário compra tokens, instala o agente de coleta e conecta o sistema à rede. A identificação dos dispositivos acontece de forma automática, via protocolo SNMP.
O público inclui profissionais de suporte N2, estudantes de infraestrutura e administradores de rede. Essas pessoas dominam protocolos complexos e procuram interfaces que facilitem o dia a dia sem horas de treinamento ou leitura de manual.
- Figma
- Design system
- Wireframes
- Dark mode
- Desktop e web
O desafio
Organizar dados densos numa interface funcional
O EZ Topology lida com conceitos muito específicos, como protocolos SNMP, endereços IP e configurações Meraki. Expostos do jeito errado, esses termos travariam o uso e a eficiência do sistema inteiro.
O principal desafio foi projetar uma camada externa que desse legibilidade a processos internos muito técnicos.
Cada tela precisava deixar claro o que o usuário tinha de fazer, por que e o que esperar como resultado. Esse nível de clareza evita erros de configuração e mantém o fluxo de trabalho constante.
Configurações técnicas sem contexto
Botões e atalhos de SNMP, Meraki e CDP precisavam de explicações visuais integradas, para dispensar a documentação externa.
Setup fragmentado
Criar um novo projeto tinha risco alto de abandono em várias etapas do funil.
IPs em lote
A interface precisava validar dezenas de endereços em tempo real sem poluição visual nem confusão.
Carregamentos demorados
Descobrir uma rede inteira leva vários minutos. A interface precisava mostrar o progresso de forma ativa para não gerar ansiedade.
Público heterogêneo
O design precisava acomodar do estudante iniciante de TI ao administrador de redes sênior.
Poucas referências de mercado
Na época, o segmento nacional não tinha padrões visuais modernos e consolidados para ferramentas desse porte.
Meu papel e DesignOps
Arquitetura de experiência e design system aplicados ao produto
Fui responsável por toda a camada visual da solução. Cada decisão de componente partiu das necessidades lógicas do sistema e das expectativas dos clientes reais.
Desenvolvi os wireframes, a interface em alta fidelidade e um design system inicial no Figma. Conduzi o processo de forma artesanal, priorizando a precisão técnica e a clareza que o público da ferramenta exige.
-
Wireframes e arquitetura de informação
Os fluxos vieram antes de qualquer decisão visual. Mapeei cada ponto de escolha e as possíveis rotas de erro, para a navegação funcionar de forma sólida e previsível.
-
Interface em alta fidelidade
Telas finais com os estados padrão, hover, foco, erro, carregamento e vazio documentados. O feedback constante evita falhas silenciosas em operações críticas.
-
Design system no Figma
Biblioteca de componentes com tokens de cor para dark mode, tipografia e espaçamento. Os nomes espelhavam a estrutura que o front-end usaria no handoff.
-
Templates reutilizáveis
Fluxos recorrentes padronizados em templates de formulários de configuração e de tabelas de resultados, para manter a consistência e evitar retrabalho.
Solução visual
Dark mode como decisão técnica de usabilidade
O dark mode veio do contexto de uso. Profissionais de infraestrutura passam o expediente em ambientes com pouca luz e precisavam de um layout que cansasse menos a vista.
A paleta parte de tons de roxo e azul-escuro profundo. Os mesh gradients aparecem só nos momentos de primeiro contato (login, splash e onboarding); as telas internas usam superfícies neutras para manter o foco no conteúdo.
A identidade junta um aspecto tecnológico a um acabamento sofisticado, sem perder legibilidade durante operações complexas.
Decisões de design que sustentam a experiência
-
Gradientes como hierarquia
Gradientes densos só em login, splash e onboarding, para causar impacto. A área interna ficou com superfícies neutras, que leem mais rápido.
-
Barra lateral como âncora
Navegação lateral fixa com os projetos, os dados da conta e o saldo de tokens. O botão de compra ganhou destaque para o upsell sem invadir o espaço útil.
-
Tipografia funcional
Rótulos de configuração, descrições de contexto e alertas separados por uma hierarquia rígida. A clareza tipográfica previne erros graves no preenchimento.
-
Estados explícitos
Comportamento visual de botões e links mapeado. O aviso imediato de um componente inativo ou de um erro de digitação acelera a correção.
-
Controles com contexto
Os controles de SNMP, Meraki e CDP vêm com um pequeno texto de apoio. O cliente entende a função técnica no momento do clique, sem guia em PDF.
-
Ilustrações 3D no onboarding
Ilustrações 3D para mostrar os benefícios práticos do sistema antes mesmo da configuração inicial.
Experiência
O fluxo completo até a entrega do mapa de rede
Uma jornada contínua, pensada para tirar o atrito de cada etapa, da autenticação à notificação final.
Login e autenticação
O login recebe o usuário com um gradiente em roxo e azul, que já posiciona a marca. O erro diz exatamente o que foi digitado errado e como corrigir. A recuperação de senha usa ilustrações para suavizar um momento tenso.
Onboarding direto ao ponto
Três telas curtas, com ilustrações 3D, respondem o que a ferramenta faz, por que usar e como começar, sem tutorial longo.
Setup de novo projeto
Os campos aparecem em etapas, para reduzir a carga cognitiva. Os seletores de protocolo têm texto de apoio, e o configurador de limite de nós cruza o tamanho da rede com o gasto estimado em tokens, deixando o custo sempre claro.
Mapeamento de nós e validação
A área aceita digitação manual e upload de CSV. A validação acusa IPs fora do formato em tempo real e bloqueia dados que quebrariam ou atrasariam a varredura.
Descoberta e resultado
A tela de rastreamento mostra que o processo está ativo. A tabela lista os equipamentos encontrados, com filtros rápidos, e o mapa completo vai por e-mail no fim do processamento.
Galeria
As telas entregues
O fluxo aprovado do EZ Topology, do login ao resultado. Toque numa tela para ampliar.
Reflexão final
Design de qualidade para ferramentas técnicas
O EZ Topology mostrou a importância de um design rigoroso em sistemas de operação densa.
Interfaces de produtos de infraestrutura afetam a segurança dos dados e a agilidade da manutenção. Informação ambígua quebra a eficiência e mina a confiança do time de tecnologia na plataforma.
Mantive o foco em equilibrar a nomenclatura técnica original com uma arquitetura de dados visualmente organizada: um layout limpo, que preserva a exatidão dos comandos e acelera a configuração da rede.
-
0→1
Produto do zero
Componentes e fluxos originais, sem base anterior, da pesquisa à biblioteca finalizada.
-
4
Fluxos completos
Autenticação, onboarding, setup e mapeamento, com os caminhos de acerto e de falha.
-
DS
Design system
A biblioteca central no Figma, com tokens nomeados e prontos para a engenharia.
-
✓
Handoff técnico
Templates e lógicas de estado descritos junto dos padrões de código, para zerar os ruídos de implementação.
Contato
Tem um produto complexo pela frente? Vamos conversar.
Conte o contexto e o prazo do projeto. Respondo em até 48 horas.