Em desenvolvimento: esta página ainda não está pronta. Volte em breve para conferir as novidades!
UX/UI Design Design System Desktop · Web Dark Mode

EZ Topology: Design de interface para sistemas de rede complexos

Atuei como UX/UI Designer Junior em um contrato PJ de três meses na Harpia Networks durante o ano de 2020. Fui o responsável por estruturar a experiência do EZ Topology e traduzir configurações técnicas de rede em fluxos operacionais lógicos para profissionais de infraestrutura.

Desenvolvi wireframes, o design de interface de alta fidelidade e um Design System inicial no Figma. Conduzi o processo de maneira artesanal, priorizando a precisão técnica e a clareza informacional exigidas pelo público da ferramenta.

Empresa Harpia Networks Contrato PJ (3 meses) Ano 2020 Processo Elaboração artesanal
EZ Topology: tela de login com mesh gradient em roxo e azul escuro EZ Topology: visão geral da interface principal com sidebar de navegação
100% Fluxos Mapeados

Projetei a experiência completa para orientar o usuário desde o login até a entrega do mapa de rede por e-mail.

DS Design System

Entreguei uma biblioteca de componentes com tokens, variantes e estados pronta para a implementação do frontend.

4 Jornadas Críticas

Estruturei as etapas de Autenticação, Setup, Node Mapping e Resultados com progressão lógica e feedback visual explícito.

Dark Mode Nativo

Apliquei o tema escuro para reduzir a fadiga visual e adequar a interface ao ambiente de trabalho dos profissionais de TI.


Sobre o Produto

Ferramenta técnica projetada para uso imediato.

O contexto que motivou a criação do EZ Topology exigiu soluções de design focadas no posicionamento claro da ferramenta e na eficiência operacional do usuário final.

A Harpia Networks criou o EZ Topology para automatizar a descoberta de redes de computadores por meio do mapeamento da topologia física. O trabalho manual anterior deu lugar a um processo concluído em poucos minutos. Os resultados chegam de forma organizada diretamente no e-mail do cliente.

O modelo de negócio da plataforma exige uma curva de aprendizado quase nula. O usuário adquire tokens, instala o agente de coleta e conecta o sistema à rede. A identificação dos dispositivos ocorre de maneira automática via protocolo SNMP.

O público-alvo inclui profissionais de suporte N2, estudantes de infraestrutura e administradores de rede. Esse grupo domina protocolos complexos e procura interfaces que facilitem as operações diárias sem exigir longas horas de treinamento ou leitura de manuais.

Figma Design System Wireframing Dark Mode Desktop · Web
EZ Topology: interface principal com sidebar de navegação e gestão de projetos
EZ Topology: plataforma de mapeamento automático de topologia física de redes.

O Desafio

Organização de dados densos em uma interface funcional.

O EZ Topology gerencia conceitos muito específicos, como protocolos SNMP, endereços IP e configurações Meraki. A exposição inadequada desses termos na interface causaria atritos no uso e comprometeria a eficiência de todo o sistema.

O principal desafio foi projetar uma camada externa que conferisse legibilidade aos processos internos de alto nível técnico.

Cada tela precisava detalhar as ações necessárias para o usuário, as justificativas para esses comandos e os resultados aguardados. Apliquei esse nível de clareza para evitar erros de configuração e manter os fluxos de trabalho constantes.

  • Configurações técnicas expostas sem contexto. Botões e atalhos para SNMP, Meraki e CDP precisavam de explicações visuais integradas para dispensar a documentação externa.
  • Fluxo de setup fragmentado. O processo de criar um novo projeto apresentava um risco alto de abandono em várias etapas do funil.
  • Input de IPs em lote. A interface exigia validação de dezenas de endereços em tempo real sem gerar poluição visual ou confusão.
  • Estados de carregamento demorados. O descobrimento de uma rede inteira leva vários minutos. A interface precisava comunicar esse progresso de maneira ativa para evitar a ansiedade do usuário.
  • Público heterogêneo. O design precisava acomodar desde o estudante iniciante de TI até o administrador de redes sênior.
  • Falta de referências de mercado. O segmento nacional carecia de padrões visuais modernos e consolidados para ferramentas desse porte na época.

Meu Papel · DesignOps

Arquitetura de experiência e Design System aplicados ao produto.

Assumi a responsabilidade pela criação de toda a camada visual da solução. Fundamentei cada decisão de componente nas necessidades lógicas do sistema e nas expectativas dos clientes reais.

Wireframing e Arquitetura de Informação

Estruturação dos fluxos antecedeu qualquer decisão visual. Mapeei cada ponto de escolha do usuário e as possíveis rotas de erro. Isso garantiu que a lógica de navegação operasse de forma sólida e previsível.

Design de Interface em Alta Fidelidade

Entreguei as telas finais com os estados de padrão, hover, foco, erro, loading e vazio rigorosamente documentados. O feedback constante da interface previne falhas silenciosas em operações críticas.

Design System Completo no Figma

Construí uma biblioteca de componentes funcional com design tokens de cor para dark mode, tipografia e espaçamento. A nomenclatura utilizada espelhou de maneira exata a estrutura exigida pelo frontend no momento do handoff.

Templates Reutilizáveis

Padronizei fluxos recorrentes por meio de templates específicos para formulários de configuração e tabelas de resultados. Essa entrega manteve a consistência visual do produto e eliminou o retrabalho técnico da equipe.

EZ Topology: tela de onboarding com ilustrações 3D e proposta de valor direta
EZ Topology: onboarding com ilustrações 3D e fluxo direto ao primeiro uso.

Solução · Visual & UI

Dark mode como decisão técnica de usabilidade.

A adoção do dark mode ocorreu em função do contexto operacional. Profissionais de infraestrutura passam o expediente em ambientes com pouca luz e precisavam de um layout que minimizasse o cansaço visual.

EZ Topology: tela de login com mesh gradient em tons de roxo e azul escuro
Login: mesh gradient como linguagem de marca no ponto de entrada.
EZ Topology: tela de splash com identidade visual tecnológica e premium
Splash: identidade premium consolidada antes do primeiro uso.

Desenvolvi a paleta sobre tons de roxo e azul escuro profundo. Utilizei mesh gradients modernos de forma pontual nos momentos de primeiro contato, englobando o Login, Splash e Onboarding. As telas internas adotam superfícies neutras para prender o foco no conteúdo.

A identidade visual combinou um aspecto tecnológico a um acabamento sofisticado e manteve a legibilidade intacta durante operações complexas.

Decisões de design que sustentam a experiência

Mesh Gradients como Hierarquia

Apliquei gradientes densos estritamente nas telas de Login, Splash e Onboarding para causar impacto visual. A área interna do software recebeu superfícies neutras para otimizar o tempo de leitura.

Sidebar como Ancoragem

Fixei a estrutura de navegação lateral para exibir sempre a gestão de projetos, os dados da conta e o saldo de tokens. O botão de compra ganhou destaque estratégico para viabilizar o upsell sem invadir o espaço útil.

Tipografia Funcional

Separei labels de configuração, descrições de contexto e feedbacks de alerta por meio de uma hierarquia rígida de fontes. A clareza tipográfica atuou diretamente na prevenção de erros graves durante o preenchimento de formulários.

Estados Explícitos

Mapeei o comportamento visual interativo de botões e links. O aviso visual imediato de um componente inativo ou de um erro de digitação facilita a correção rápida por parte do administrador.

Toggles Contextualizados

Projetei os controles de rede SNMP, Meraki e CDP acompanhados de pequenos blocos descritivos. O cliente assimila a função técnica daquele botão no exato momento do clique, dispensando guias em PDF.

Ilustrações 3D no Onboarding

Selecionei e organizei representações visuais em 3D durante o onboarding para destacar 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.

Projetei uma jornada contínua focada em eliminar o atrito em cada etapa da plataforma, desde a autenticação primária até a notificação final de sucesso.

1. Login e Autenticação

A tela de login recebe o usuário com um gradiente em roxo e azul, comunicando um posicionamento imediato de marca. O feedback de erro informa a falha exata de digitação e orienta a correção. A página de recuperação de senha utiliza ilustrações de apoio para suavizar um momento tenso da experiência.

2. Onboarding Direto ao Ponto

Apresento o valor do serviço em três telas curtas acompanhadas de assets em 3D. O fluxo linear responde o que a ferramenta faz, o motivo para adotá-la e o caminho prático para iniciar, eliminando tutoriais longos e focando no preenchimento de informações essenciais.

3. Setup de Novo Projeto

O sistema de etapas revela os campos de forma progressiva para diminuir a carga cognitiva. Os seletores de protocolo exibem textos de apoio contextual para agilizar decisões. O configurador de limite de nós cruza o volume da rede com o gasto estimado em tokens e mantém o custo operacional sempre às claras.

4. Node Mapping e Validação

A área de mapeamento atende tanto configurações pontuais via digitação manual quanto uploads robustos via arquivos CSV. A validação do sistema acusa IPs fora de formato em tempo real, bloqueando o envio de dados que causariam quebras e atrasos na varredura.

5. Descoberta e Resultado Final

A tela de rastreamento informa o andamento da tarefa para garantir que o processo está ativo e funcionando. A tabela central exibe os hardwares encontrados com filtros rápidos de leitura. O mapa completo da estrutura é gerado e despachado automaticamente por e-mail no fim do processamento.


Galeria

Seleção de telas entregues.

Abaixo apresento a evolução das interfaces e o fluxo completo aprovado para o EZ Topology.


Reflexão Final

Design de qualidade para ferramentas técnicas.

O caso do EZ Topology comprovou a relevância de um design rígido em sistemas focados em operações densas.

Interfaces de produtos ligados à infraestrutura afetam a segurança de dados e a agilidade nas rotinas de manutenção. Informações exibidas de forma ambígua quebram a eficiência e minam a confiança da equipe de tecnologia na plataforma.

Mantive o foco em equilibrar as nomenclaturas técnicas originais com uma arquitetura de dados organizada visualmente. Estruturei um layout limpo que preserva a exatidão dos comandos e impulsiona a velocidade das configurações de rede.

0→1
Produto do Zero

Desenhei os componentes e fluxos originais sem base anterior partindo da pesquisa até a biblioteca finalizada.

4
Fluxos Completos

Especifiquei os cenários de Autenticação, Onboarding, Setup e Mapeamento cobrindo as rotas de acerto e falha.

DS
Design System

Compilei a biblioteca central no Figma com tokens nomeados e prontos para a adoção pela engenharia.

Handoff Técnico

Descrevi templates e lógicas de estado atrelados aos padrões de código para zerar os ruídos de implementação.


Precisa de um design focado em resultados técnicos?

Desenvolvo produtos digitais e sistemas de design que transformam dados complexos em interfaces fáceis de operar. Tenho disponibilidade para integrar times e liderar o desenho de arquiteturas que demandam rigor e clareza.