Desenvolvimento de interfaces para plataforma de atendimento omnichannel voltada para operações de contact center, com foco em usabilidade operacional, produtividade e padronização visual através de Design System.
Plataforma de Atendimento para Contact Center — Bárbara Longo
UX/UI Design · Design System · Enterprise
Plataforma de Atendimento para Contact Center
Transformando uma operação complexa em uma experiência operacional intuitiva, escalável e centrada nas pessoas que atendem.
Produto
Dialvox
Área
UX/UI · Design System
Contexto
Contact Center Omnichannel
Entregáveis
Interface · DS · Componentes
Scroll
Contexto
01
O cenário que precisava mudar
Operações de contact center vivem sob pressão constante. Agentes precisam acessar, interpretar e agir sobre informações críticas em segundos, enquanto atendem clientes que esperam respostas rápidas e precisas.
A plataforma existente havia sido construída de forma incremental ao longo dos anos — camadas de funcionalidade sobrepostas sem uma linguagem visual unificada, sem arquitetura de informação pensada para a velocidade operacional e sem qualquer sistema de design que garantisse consistência entre módulos.
“A interface não acompanhou o crescimento da plataforma. O que era simples tornou-se complexo, e o que era rápido tornou-se lento.”
O resultado era uma experiência que aumentava a carga cognitiva dos agentes, reduzia a produtividade e tornava o onboarding de novos colaboradores um processo demorado e custoso.
O desafio não era apenas estético: era necessário rethinkear completamente a arquitetura visual e informacional da plataforma, criando um Design System que permitisse escalabilidade e consistência a longo prazo.
Diagnóstico
Problemas identificados
Antes de qualquer pixel ser desenhado, foi necessário mapear com precisão os pontos de atrito que comprometiam a experiência diária dos agentes.
Inconsistência Visual
Diferentes módulos possuíam estilos distintos, criando dissonância cognitiva e dificultando a navegação intuitiva entre áreas da plataforma.
Alta Carga Cognitiva
Informações críticas da chamada estavam distribuídas de forma não hierarquizada, forçando o agente a varrer a tela para encontrar o que precisava.
Ausência de Design System
Sem biblioteca de componentes centralizada, cada nova tela era construída do zero, gerando inconsistências e aumentando o tempo de desenvolvimento.
Onboarding Lento
A curva de aprendizado era elevada. Novos agentes levavam semanas para atingir produtividade plena, gerando custo operacional significativo.
Ações Lentas e Dispersas
Transferências, pausas e anotações exigiam múltiplos cliques e mudanças de contexto, aumentando o tempo médio de atendimento.
Falta de Visibilidade
Indicadores de produtividade e status do agente não estavam visíveis em tempo real, dificultando a gestão e o automonitoramento.
Processo
Metodologia aplicada
Uma abordagem estruturada, do diagnóstico à entrega, garantindo que cada decisão de design fosse fundamentada em dados e nos objetivos do negócio.
Discovery
Research
Benchmark
Arquitetura
Wireframes
Prototipação
Testes
UI Design
Discovery & Research
Imersão no ambiente operacional, shadowing de agentes em atendimento real, entrevistas com líderes de operação e análise heurística da plataforma existente.
Arquitetura & Wireframes
Remapeamento completo da hierarquia de informação, fluxos de navegação e priorização de elementos críticos baseada em frequência de uso operacional.
Design System & UI
Construção de biblioteca de componentes modular no Figma com tokens de design, variantes de estado, documentação de uso e guidelines de implementação.
Pesquisa & Insights
O que os dados revelaram
A pesquisa com usuários e a análise da operação revelaram padrões críticos que direcionaram todas as decisões de design subsequentes.
dos agentes reportaram dificuldade
em localizar informações do cliente durante a chamada, impactando diretamente a qualidade do atendimento e a satisfação.
mais cliques para ações frequentes
em comparação com benchmarks de mercado em plataformas similares.
tempo médio de onboarding
para novos agentes atingirem produtividade operacional plena na plataforma.
Padrões de comportamento identificados
Foco primário: Dados do cliente
Primeiro ponto de atenção em toda chamada recebida.
Ações recorrentes: Pausa e Transferência
Operações realizadas dezenas de vezes por turno.
Necessidade: Status em tempo real
Visibilidade de produtividade e metas no painel.
Dor: Login demorado e confuso
Primeira fricção do dia afetando o estado mental do agente.
Solução
A resposta ao desafio
Foco na conversãoIdentidade reforçadaAcessibilidade
Tela de Login: Simplicidade que orienta
A primeira impressão define o tom do dia. O redesign da tela de login priorizou uma interface limpa, com card centralizado que elimina distrações e guia o agente diretamente ao acesso.
1
Card centralizado minimalista
Foco total na tarefa, sem elementos competindo por atenção.
2
Gradiente e imagem humanizante
Tecnologia que se conecta às pessoas, reforçando a identidade da marca.
3
Alto contraste e labels claros
Acessibilidade como padrão, não como exceção.
Foco na chamadaAções rápidasStatus em tempo real
Console do Agente: Eficiência em cada segundo
O console foi completamente repensado para colocar as informações críticas onde os olhos naturalmente vão primeiro, e as ações mais frequentes a um único clique de distância.
1
Hierarquia de informação orientada por frequência
Dados do cliente e status da chamada no topo da hierarquia visual.
2
Botões de ação posicionados estrategicamente
Pausa, Transferir e WhatsApp acessíveis sem mudança de contexto visual.
3
Dashboard de produtividade integrado
Indicadores de status e metas visíveis em tempo real no painel lateral.
Antes & Depois
A transformação em perspectiva
Arraste o divisor para comparar o antes e depois da plataforma. Cada detalhe foi repensado para reduzir fricção e aumentar a eficiência operacional.
Interface anterior
Substitua com screenshot da plataforma original
Antes
Depois
Hierarquia visual clara e orientada por prioridade operacional
Ações frequentes acessíveis com um único clique
Identidade visual consistente em todos os módulos
Status e produtividade visíveis em tempo real
Design System
A linguagem visual da plataforma
Um sistema de design robusto que garante consistência visual, acelera o desenvolvimento e permite escalar a plataforma sem perder coerência.
Paleta Cromática
Primary
#0085A9
Secondary
#FF8A00
Text / Primary
#0F172A
Text / Secondary
#64748B
Border / Divider
#E2E8F0
Surface
#F8FAFC
Success
#16A34A
Error
#DC2626
Warning
#F59E0B
Info
#2563EB
Design System do Dialvox — biblioteca de tokens, tipografia e componentes
Escala Tipográfica
Display / 48px
Plataforma
H1 / 32px
Console do Agente
H2 / 24px
Status do Atendimento
Body / 14px
Duração da chamada: 00:04:32 — Cliente: Maria Santos
Caption / 11px
Status do Agente · Online
Componentes
● Online● Em Pausa● Indisponível
Nome do Cliente
Maria Santos
Duração
00:04:32
Jornada do Usuário
Do login ao atendimento
Cada etapa da jornada foi otimizada para reduzir a fricção e manter o agente focado no que realmente importa: o cliente.
Login
Acesso rápido e seguro
Dashboard
Visão geral da operação
Chamada
Recebimento e identificação
Cliente
Dados e histórico
Atendimento
Resolução e anotações
Encerramento
Tabulação e status
Resultados
Impacto mensurável
O redesign gerou melhorias concretas nos indicadores operacionais, com impacto direto na eficiência dos agentes e na qualidade do atendimento.
Redução de cliques
Para ações frequentes como pausa, transferência e tabulação.
Melhoria operacional
Redução no onboarding
Novos agentes atingem produtividade plena em metade do tempo anterior.
Eficiência de treinamento
Consistência visual
Design System garante padronização em todos os módulos da plataforma.
Cobertura do DS
Ações em 1 clique
Operações críticas acessíveis sem mudança de contexto ou telas auxiliares.
Agilidade no atendimento
Resultados qualitativos
Aumento da satisfação dos agentes com a interface de trabalho
Redução do tempo médio de atendimento por acesso mais rápido a informações
Design System que acelera o desenvolvimento de novas features
Base escalável para expansão futura de módulos e integrações
Galeria
O projeto em detalhe
Console do Agente
Tela de Login
Design System — Cores, tipografia e componentes
Aprendizados
O que este projeto ensinou
Cada projeto é uma oportunidade de crescimento. Estes foram os aprendizados mais valiosos desta experiência.
01
Contexto operacional é insubstituível
Nenhuma pesquisa documental substitui o ato de sentar ao lado de um agente em operação real. A observação direta revelou nuances de comportamento e necessidades que jamais emergiriam em entrevistas formais.
02
Design System como produto, não entregável
Um Design System não é um artefato de entrega: é um produto vivo que precisa de governança, documentação e evolução contínua. A mentalidade de “produto” muda completamente como ele é concebido e mantido.
03
Velocidade operacional guia decisões de UX
Em interfaces enterprise de alta pressão, cada segundo conta. Aprender a priorizar hierarquias de ação por frequência e criticidade, em vez de por lógica de sistema, foi fundamental para o resultado.
04
Consistência como valor de negócio
A inconsistência visual não é apenas um problema estético — é um custo operacional real. Agentes gastam energia cognitiva adaptando-se a padrões diferentes, o que impacta diretamente a produtividade e a qualidade do atendimento.
Conclusão
Design que serve a quem serve pessoas
Este projeto reafirmou que o design de interfaces enterprise tem uma responsabilidade única: as decisões de UX impactam não apenas a experiência de uso, mas a qualidade do atendimento recebido por milhares de clientes finais. Uma interface mais eficiente significa agentes mais focados, e agentes mais focados significa clientes melhor atendidos.
