Sigraweb · Case de product design

SigraAI Helpdesk

O SigrAI Helpdesk conecta dois públicos com necessidades opostas: o cliente, que quer abrir um chamado rápido e saber o que está acontecendo, e o time de suporte (CS), que precisa triar, acompanhar e resolver com o mínimo de ruído.

Todos os projetos

Empresa: Sigraweb
Meu papel: Design de ponta a ponta
Escopo: 5 telas redesenhadas
Pesquisa: Testes de usabilidade moderados

Dashboard: a resposta visual em 5 segundos

Resumo

A interface original misturava etapas de IA, status e ações pendentes sem hierarquia clara. Isso gerava dúvida (“alguém está cuidando disso?”), retrabalho e perda de informação entre IA e CS.

Redesenhei o fluxo ponta a ponta (dashboard, lista, abertura, detalhe e relatórios) com três princípios: simplicidade, respiro e hierarquia de informação. Validei os problemas com testes de usabilidade com o time interno e traduzi cada achado em uma decisão de design rastreável.

Em números

7análises de usabilidade levantadas em testes com CS e Comercial
5 de 6problemas únicos já resolvidos nas telas finais (83%); o 6º está priorizado como próximo passo
1único campo obrigatório na abertura de chamado (o título)
4indicadores no dashboard, com 1 ação primária por tela: “Novo chamado”
5telas redesenhadas e conectadas por um mesmo sistema visual

Contexto e problema

Um helpdesk existe para uma promessa simples: “você pediu ajuda, e alguém vai resolver”. Para cumprir essa promessa, a interface precisa responder três perguntas em segundos:

O que está acontecendo com o meu chamado? (status)
O que depende de mim? (próxima ação)
Com quem está? (responsável)

Na versão anterior, nenhuma dessas respostas era óbvia. A IA fazia a triagem, mas o usuário não entendia se a etapa tinha falhado, se estava esperando por ele, ou se a equipe já havia assumido.

Objetivo do projetoTornar o helpdesk mais simples, direto e organizado, reduzindo a incerteza do cliente e o esforço do CS.

Meu papel

Design de ponta a ponta: pesquisa com usuários, análise de problemas, definição de princípios, desenho de interface (UI) e sistema visual, e rastreabilidade entre pesquisa e decisões.

Pesquisas focadas na interface atual, com criação de fluxos para identificar e levantar hipóteses.
Criação de interfaces limpas, alinhadas com o padrão do sistema.
Documentação de todos os processos, bem como das mudanças em possíveis componentes.

Pesquisa: o que os usuários mostraram

Método: testes de usabilidade moderados com 3 pessoas do time interno, que representam os dois lados da operação.

Ana GabrielliCS · quem atende e resolve
Alisson SantiagoComercial · quem acompanha o cliente
Gabriel EliasDesenvolvedor · quem atende os chamados

Sobre o tamanho da amostra. Três participantes não dão significância estatística, e esse não era o objetivo. Em testes qualitativos, estudos clássicos de usabilidade mostram que poucos usuários já revelam a maior parte dos problemas graves de interface. Por isso tratei os achados como hipóteses de alta confiança para corrigir agora e planejei uma nova rodada para medir o efeito.

Consolidei as 7 análises em 6 problemas únicos, porque duas delas descreviam o mesmo problema (clareza de etapas e status).

#	Problema encontrado	Por que importa
1	A etapa “Aguardando resposta do cliente” não deixa claro que a ação é do usuário	Atrasa o atendimento: ninguém age porque ninguém sabe que precisa agir
2	Etapas da IA (“Pesquisa em Chamados Anteriores”, “Consulta à Base de Conhecimento”) aparecem em vermelho	Cor de erro faz o usuário achar que o sistema falhou
3	O número do chamado muda quando passa da IA para a equipe	Quebra a confiança e dificulta localizar o chamado
4	O campo de resposta continua ativo após a falha da IA	O usuário acha que fala com quem vai resolver, e mensagens se perdem
5	O CS não tem acesso à conversa com a IA; o Kanban demora a atualizar; não há feedback do cliente	Perda de contexto, acompanhamento prejudicado, impossível medir qualidade
6	Para analisar o próximo chamado é preciso voltar ao Kanban	Passos extras repetidos o dia inteiro
7	Chamados concluídos somem e não podem ser buscados por número ou nome	Parece um bug e impede recuperar informação
8	Colunas de responsável e módulo têm pouca diferenciação visual	Difícil distinguir o que está preenchido do que está pendente

Princípios de design

Os achados apontavam para o mesmo núcleo: excesso de ruído e falta de hierarquia. Defini quatro princípios para guiar todas as decisões.

Uma ação principal por tela

Cada tela tem um único botão em destaque (roxo sólido), para o usuário nunca ter que adivinhar o próximo passo.

Cor com significado

Vermelho só para prioridade alta; verde para concluído; laranja para andamento/média. Etapas da IA nunca usam cor de erro.

Estado sempre explícito

Todo chamado diz em que status está, quem é o responsável e o que falta. “Não atribuído” é um estado visível, não um vazio.

Respiro como ferramenta

Cartões com margem generosa, tipografia em poucos níveis e agrupamento por proximidade, para o olho encontrar o que importa sem esforço.

A solução, tela a tela

Cada tela parte de um problema levantado na pesquisa, registra as decisões tomadas e o argumento por trás delas.

Dashboard Lista de chamados Novo chamado Detalhe do chamado Relatórios e KPIs

Dashboard: a resposta visual em 5 segundos

Problema que resolve

O usuário precisava entrar na lista e filtrar para entender a situação geral.

Argumento

Hierarquia clara (número → rótulo → legenda) reduz o tempo para entender o estado da operação e reforça o princípio 1.

Decisões

4 cartões de indicador no topo (Em aberto, Em andamento, Concluídos, Sem responsável), com cor própria para cada estado. O número é o elemento mais forte do cartão; o rótulo e a legenda ficam menores.
Saudação personalizada (“Olá, Cliente!”) e resumo do dia, para criar um tom acolhedor em vez de uma tela puramente técnica.
Abas “Recentes / Meus chamados / Resolvidos” para trocar de visão sem sair da tela.
Barra lateral de contato direto, com e-mail, site e demonstração, para quando o chamado não é a melhor saída.
“Novo chamado” como único botão primário, sempre no mesmo lugar.

Lista de chamados: encontrar qualquer chamado, sempre

Problema que resolve

Chamados concluídos desapareciam e a lista não deixava claro quem era o responsável (achados 7 e 8).

Argumento

Tabelas só funcionam quando o usuário consegue varrer a informação. Cor semântica, cinza para pendência e filtros visíveis transformam a lista em uma ferramenta de decisão.

Decisões

Busca por título ou número em destaque, mais filtros de status, filtros avançados e período na mesma barra.
Colunas organizadas por prioridade de leitura: número, título, status, prioridade, responsável, sprint e data de abertura.
Barra lateral colorida ao lado do número, que indica a prioridade antes mesmo de ler o texto.
“Não atribuído” e “Sem sprint” em cinza claro, diferenciando o que está pendente do que está preenchido.
Chamados de teste (QA) ocultos por padrão, com opção “Mostrar”, para não poluir a lista real.
Mensagem de estado vazio positiva (“Poucos chamados no período, bom sinal”) e aviso de que novos chamados aparecem automaticamente, sem atualizar a página, que resolve a queixa de demora nas atualizações.

Novo chamado: menos esforço, mais qualidade

Problema que resolve

Chamados chegavam sem contexto, o que gera idas e vindas entre cliente e CS.

Argumento

Orientar na entrada custa menos do que corrigir depois. Melhores descrições significam menos perguntas do CS e resolução mais rápida.

Decisões

Apenas 1 campo obrigatório (título). O requerente já vem preenchido, então o usuário não digita o que o sistema já sabe.
Formulário em blocos (Atores, Informações do chamado, Anexo), com títulos de seção, para o formulário parecer curto mesmo tendo vários campos.
Dica contextual em destaque pedindo URL da tela, número do processo e mensagem de erro exata. É o equivalente a ensinar o usuário a abrir um bom chamado, sem exigir treinamento.
Descrição aceita colar imagens, formatação e links, o que reduz o atrito de quem normalmente só tem um print do erro.
Anexos por arrastar e soltar, com formatos e limite (20 MB) explícitos antes do envio.
Ação primária (“Abrir Chamado”) e secundária (“Cancelar”) claramente diferenciadas.

Detalhe do chamado: contexto completo em uma tela

Problema que resolve

Os achados 1 a 5: status confuso, número que muda, conversa fragmentada entre IA e CS.

Argumento

O usuário abre uma tela e entende a história inteira, sem precisar reconstruí-la. Isso ataca diretamente o risco de mensagens ignoradas e a perda de contexto entre IA e humano.

Decisões

Cabeçalho com identidade única: número, título, módulo, categoria e prazo, com etiquetas de urgência, status e prioridade. O número do chamado fica fixo.
Quatro blocos de pessoas (Autor, Responsáveis, Devs, Observadores), com botão “+” para adicionar: quem está envolvido fica visível sem abrir menus.
Conversa unificada: o chamado original fica fixado no topo, seguido da linha do tempo com mensagens e eventos de mudança de status (por exemplo, “Aberto → Em análise CS”). O histórico da IA e do atendimento vive no mesmo lugar, acessível ao CS.
Separação entre “Resposta do cliente” e “Nota interna” no campo de comentário, para o usuário saber para quem está escrevendo e evitar mensagens perdidas.
Abas Conversa / Notas internas / Histórico com contadores, para consultar sem poluir a conversa.
Painel de ações com status atual em destaque, o botão “Fechar chamado” e acesso a outros status.
Cartão SigraAI N1 que explica o que o agente faz (classifica urgência e módulo, valida e aponta um CS) e permite acionar a triagem. A IA deixa de ser uma caixa preta e vira um papel transparente no processo.

Relatórios e KPIs: de dados soltos a decisões

Problema que resolve

Não havia como medir qualidade, volume ou satisfação (achado de falta de feedback).

Argumento

O que não se mede não melhora. O relatório dá ao produto um ciclo de melhoria contínua.

Decisões

Quatro blocos temáticos: Volume, Desempenho, Satisfação e Cobertura, Distribuição. O gestor lê de cima para baixo, do geral ao específico.
Filtro de período (Todos, 7, 30, 60 e 90 dias) e exportação em XLS e PDF.
Métricas de resolução: taxa de resolução, tempo médio, chamados críticos e horas trabalhadas.
Satisfação média com chamada para ação (“peça feedback ao fechar chamados”), que prepara o terreno para avaliação por notas ou estrelas.
Distribuição por prioridade, status e módulo, com gráficos de barra e cores consistentes com o resto do sistema.
Estados vazios que ensinam (“o gráfico de proporção volta quando houver mais categorias”) em vez de telas quebradas.

Mapa de calor: Hotjar

Montei o mapa de calor em cima do print real do dashboard, com três visões no estilo Hotjar: Cliques (com pontos numerados e % de cliques), Movimento e Atenção (quanto da tela é visto, de cima para baixo).

Dashboard do cliente · SigrAI Helpdesk

Mapa de calor · Desktop · 1.248 sessões · últimos 30 dias

123456789

Menos

Mais

1Novo chamado18%
2Primeiro chamado da lista22%
3Chamados 2 a 412%
4Menu Chamados14%
5Card “Sem responsável” (inclui cliques repetidos)9%
6Abas Meus chamados / Resolvidos8%
7Ver todos6%
8Entrar em contato4%
9Contato direto2%

O que o mapa mostra

Cliques: O calor se concentra em “Novo chamado” (18%), no primeiro chamado da lista (22%) e no menu lateral “Chamados” (14%). Os chamados 2 a 4 esfriam rápido (12% somados).
Cliques no card “Sem responsável”: Esse card (9%) leva cliques repetidos, mesmo sem parecer um botão.
Movimento: O mouse segue um padrão em F. Passa pelo título, pela linha de KPIs e desce pela coluna esquerda da lista.
Zonas frias: O fim do card de chamados (vazio), toda a coluna direita abaixo de “Contato direto”, “Relatórios” e “Solicitar demonstração”.

Hipóteses e sugestões

Os cards de KPI parecem clicáveis, mas provavelmente não são.

Hipótese: o cliente clica em “Sem responsável: 20” ou “Em aberto: 2” esperando ver a lista filtrada.

Sugestão: transformar cada KPI em atalho para Chamados já filtrado. Antes, confirme com a gravação de sessão se os cliques repetidos são mesmo tentativas frustradas.

O “Sem responsável: 20” chama atenção por um motivo estranho.

Para o cliente, 20 chamados “aguardando atendimento” parece um problema grave, e ele reage a isso.

Se esse número não é relevante para ele, vale esconder o card na visão de cliente ou renomeá-lo para algo como “Aguardando atendimento”.

O menu “Chamados” compete com o card “Chamados” do dashboard.

Muito clique no menu lateral indica que a lista do dashboard não resolve a tarefa principal.

Sugestão: medir a taxa de clique em “Ver todos” contra o menu. Se o menu ganhar, o botão está pouco visível ou o card está pouco útil.

A lista tem pouca diferenciação, e os dados de teste atrapalham.

Os 4 itens têm o mesmo título “[E2E-TESTE]…”, e só a etiqueta Alta/Média muda.

Isso derruba o cliente nos itens 2 a 4. Em produção, mostre status, data e responsável em cada linha e ordene por prioridade e antiguidade.

Os chamados de teste também poluem os KPIs e qualquer análise. Filtre-os antes de rodar o Hotjar real.

A aba “Meus chamados” tem mais interesse do que “Recentes”.

Pode ser que o cliente queira ver só o que abriu. Considere abrir nela por padrão para quem tem chamados ativos.

A coluna direita e o bloco “Fale com o Suporte” estão frios.

O cliente já está dentro do helpdesk, então “Entrar em contato” (4%) e “Solicitar demonstração” (2%) têm pouco apelo. O último é um CTA de venda para quem já é cliente.

Sugestão: trocar o espaço por conteúdo útil, como chamados com prazo, artigos de ajuda relacionados ou o status do SLA.

O espaço vazio no fim do card sugere densidade mal distribuída.

A atenção cai a ~54% na última linha, e o card tem folga que ninguém vê. Há espaço para mais itens ou para a paginação.

Aprendizados

Cor é conteúdo

Um simples vermelho transformou etapas normais em “erros” na cabeça do usuário. Revisar o uso de cor foi uma das mudanças mais baratas e mais impactantes.

Transparência da IA gera confiança

Mostrar o que o agente faz, e quando um humano assume, reduziu a sensação de caixa preta.

Estado vazio também é design

Mensagens como “poucos chamados, bom sinal” tornam uma tela vazia informativa e simpática.

Poucos usuários, muito aprendizado

Dois testes bastaram para encontrar problemas estruturais, mas medir impacto exige uma segunda rodada.

Obrigado por vir até aqui!

linkedin.com/in/kadumacedo

Mais projetos

Mell.ro: do cadastro ao contrato assinado

UX/UI Design & Pesquisa

The Ripen

Brand & Visual Design