SETTE Tecnologia: Service Desk
Service Desk SaaS: portal do colaborador para abrir chamados e agendar atendimento, central da equipe de TI com fila, SLA e agenda, e app mobile, do UX ao back-end
- Meu papel
- Designer UX/UI · Desenvolvedor Full Stack
SETTE TecnologiaContexto
A SETTE Tecnologia precisava organizar o suporte de TI que presta aos colaboradores. Criei o Service Desk do zero como produto SaaS: desenhei a experiência no Figma e desenvolvi o sistema inteiro, do banco de dados às telas da web e do celular.
Desafio
Os pedidos de suporte chegavam por e-mail, mensagem e no corredor, sem protocolo, sem prazo e sem dono. Quem pedia ajuda não sabia quando seria atendido; a equipe de TI não via a fila inteira, não sabia quais prazos estavam para estourar nem quem estava sobrecarregado. O sistema precisava servir dois públicos com necessidades opostas, o colaborador que quer resolver rápido e a equipe que precisa de controle, e nascer pronto para atender várias empresas com os dados separados.
Portal do colaborador
O lado de quem pede ajuda: abrir um chamado, marcar um horário e saber em que pé está, sem precisar perguntar para ninguém.
- 01 / 07
Visão geral
A primeira tela responde "como estão meus pedidos?": chamados abertos, em atendimento, aguardando a resposta do colaborador e resolvidos no mês, os chamados recentes com status colorido, o próximo atendimento agendado e atalhos para os problemas mais comuns.
- 02 / 07
Agendar atendimento
Três passos num só lugar: o tipo de suporte em cards (hardware, software, rede e acesso, e-mail), a descrição e os anexos, e ao lado o calendário que só mostra os horários livres de quem atende aquela categoria, com o técnico responsável, a duração estimada e a escolha entre videochamada ou presencial.
- 03 / 07
Agendamento confirmado
O protocolo, a data, o tipo de atendimento e a técnica responsável num resumo só, com o aviso de que a confirmação chega por e-mail e de onde acompanhar o chamado.
- 04 / 07
Meus chamados
Todos os pedidos com busca por protocolo ou assunto, filtro por status e contadores no topo. Cada linha mostra categoria, data de abertura, status e prioridade, e o "aguardando você" em âmbar deixa claro quando a bola está com o colaborador.
- 05 / 07
Detalhe do chamado
A descrição e os anexos, a linha do tempo do atendimento (criado, triagem, em análise), quem é o responsável e quando vem a próxima atualização, e o campo para conversar com a equipe sem sair do chamado.
- 06 / 07
Base de conhecimento
Antes de abrir um chamado, a resposta pode já existir: busca por assunto, sistema ou mensagem de erro, artigos por categoria e os mais acessados com o tempo de leitura. A busca entende o sentido da frase, não só as palavras exatas.
- 07 / 07
Notificações
Cada mudança no chamado vira um aviso: atualização da equipe, triagem, agendamento confirmado, conclusão e pedido de mais informações. Ao lado, o colaborador escolhe o que quer receber.
Central da equipe de TI
O lado de quem atende: a mesma base de dados, outra pergunta. Em vez de "como está meu pedido?", "o que precisa de mim agora?".
- 01 / 02
Visão geral da operação
Chamados abertos, em atendimento, SLA em risco e agendados do dia no topo. A fila mostra solicitante, prioridade, responsável e o tempo que falta para o SLA estourar, em vermelho quando aperta. Ao lado, a agenda de hoje e a carga de cada técnico, para redistribuir antes de alguém ficar sobrecarregado.
- 02 / 02
Agenda da equipe
A semana inteira numa grade de horários, com cada técnico numa cor e o assunto em cada bloco. No topo, os atendimentos de hoje, a equipe disponível e o que aguarda confirmação; na grade, o conflito de horário aparece em vermelho antes de virar problema.
No celular
Para quem está longe da mesa: abrir um chamado em dois toques, ver o andamento dos pedidos e os próximos atendimentos agendados.
Arquitetura
Uma arquitetura SaaS pensada para crescer: várias empresas no mesmo sistema com os dados isolados no banco, prazos que não podem depender de alguém olhar a tela e o mesmo back-end servindo a web e o app.
Regras que o produto garante
As regras importantes ficam no back-end e no banco, não só na interface:
Em números
Um produto com dois lados e o mesmo sistema visual na web e no celular.
10
telas desktop em alta fidelidade
3
passos para agendar um atendimento
4
perfis de acesso com permissões próprias
Sistema Visual
Um visual de ferramenta de trabalho: menu lateral azul-marinho, fundo cinza-azulado e cards brancos, o azul só para a ação principal e uma cor para cada status, para o chamado ser lido de longe.
Paleta
Azul Ação
#335CF5
Botões, links e item ativo
Marinho
#131F38
Menu lateral
Roxo Atendimento
#5145CD
Em atendimento e agendado
Âmbar
#B2660F
Aguardando você e prioridade média
Vermelho SLA
#BF2E38
SLA em risco e prioridade alta
Verde Resolvido
#148F61
Resolvido e prioridade baixa
Tipografia
Inter
400 / 500 / 600 / 700
Fonte única: títulos, tabelas e números
Aprendizado
O mesmo chamado precisa de duas leituras: para o colaborador, "quando vou ser atendido?"; para a equipe, "quanto tempo falta?". Desenhar os dois lados juntos e levar as regras críticas (isolamento entre empresas, SLA e conflito de agenda) para o banco de dados fez o produto ficar confiável sem depender de cuidado manual.
Outros projetos para conhecer.
SaaS · JurídicoValverde Jurídico
Sistema SaaS de gestão jurídica para escritório de advocacia: clientes, processos, agenda, portal do cliente e site institucional, do UX ao back-end
Ver projeto
SaaS · Gestão de EstoqueMimos Papelaria
Sistema SaaS de gestão de estoque para papelaria: produtos, movimentações, categorias, fornecedores e relatórios, com UI/UX, front-end em React e back-end
Ver projeto
Educação & GovernoTrilhas do Futuro
Plataforma educacional do Governo de MG
Ver projeto