Trabalhos
local_fire_department
Ubots

A tela de conversas é o coração da plataforma. Com base técnica envelhecida e visual desalinhado com a nova marca, aproveitei o rebranding para refazer do zero — de uma vez.

Meu papel Lead Designer
Empresa Ubots · B2B SaaS
Ferramenta Figma
Tipo Redesign · Plataforma web
64% menos tickets abertos
NPS com elogios à experiência
#1 tela mais usada da plataforma
🔒

Este case foi desenvolvido na Ubots e segue diretrizes de confidencialidade. Algumas informações foram omitidas ou generalizadas para proteger dados da empresa. O processo, as decisões de design e os resultados percentuais são reais.

Dois problemas se acumulando no mesmo lugar

A tela de conversas concentrava todo o trabalho dos atendentes — é onde passam a maior parte do dia. Com o tempo, dois problemas foram se acumulando ali sem solução definitiva.

O primeiro era técnico: a base do código estava envelhecida, tornando cada nova mudança uma negociação difícil com a engenharia. Bugs apareciam com frequência e tickets se acumulavam.

O segundo era visual: o rebranding da Ubots estava em andamento — feito por mim — e essa tela ficou para trás, criando uma inconsistência evidente entre a nova identidade da empresa e o produto que os clientes usavam todo dia.

64%
de redução na abertura de tickets após o redesign
Comparativo interno pré/pós lançamento
INSIGHT DE PESQUISA

"Não dá pra resolver bugs aqui porque a estrutura não deixa. Cada correção abre outra coisa."

Engenharia, entrevista interna

construction
Dívida técnica visível
A base de código tornava manutenção difícil. Cada correção de bug criava risco de quebrar outra coisa.
palette
Visual desalinhado com a marca
O rebranding da Ubots estava acontecendo, mas a tela principal ficou para trás. A inconsistência era visível para os clientes.
confirmation_number
Tickets que não paravam
Bugs e pedidos de melhoria se acumulavam sem solução estrutural. Eram sintomas do mesmo problema de base.

Os tickets já sabiam onde doía

Não precisei de uma pesquisa do zero. Os tickets de suporte já mapeavam com precisão o que estava quebrando e o que os usuários pediam. Usei esse levantamento como base para entrevistas cirúrgicas — para validar hipóteses, não para descobrir do zero.

Levantamento de tickets

Classifiquei os tickets abertos por padrão — bugs recorrentes, pedidos de melhoria e elogios. Os padrões de reclamação apontavam para as mesmas áreas da interface repetidamente.

Entrevistas com atendentes

Entrevistei atendentes com base nas hipóteses levantadas pelos tickets. O padrão encontrado: todos tinham criado "gambiarras pessoais" para compensar o que o sistema não fazia bem.

Dois projetos que viraram um

O rebranding da Ubots e o redesign da tela de conversas eram demandas separadas. Mas eu era o designer dos dois. Em vez de entregar a nova identidade da empresa sobre uma interface antiga — o que criaria uma incoerência ainda maior — alinhamos os dois projetos num único movimento.

A nova tela de conversas seria a primeira parte do produto a chegar com a identidade nova de ponta a ponta. Isso resolveu o problema técnico, o visual e ainda criou um momento de produto coerente.

"Em vez de justificar dois projetos separados, deixei que um justificasse o outro."
Antes
  • Base técnica envelhecida com bugs frequentes
  • Visual desalinhado com o novo brand da empresa
  • Dois projetos competindo por prioridade
Depois
  • Interface nova com base técnica moderna
  • Primeiro produto com identidade nova completa
  • Um projeto que justificava os dois ao mesmo tempo

Três painéis, uma experiência só

O redesign organizou a tela em três áreas com responsabilidades claras: encontrar a conversa certa, conduzir o atendimento e ter contexto do cliente sempre à mão. Sem precisar abrir abas nem alternar telas.

format_list_bulleted
Lista com filtros inteligentes
Painel esquerdo com filtros por fila, status e canal. Atendentes encontram o que precisam sem varredura manual.
chat
Conversa estilo familiar
Painel central com experiência de chat próxima do WhatsApp — reduz curva de aprendizado e acelera o atendimento.
person
Contexto sempre visível
Painel direito com dados do cliente e ações rápidas (transferir, finalizar, escalar) sem sair da conversa.
auto_awesome
Identidade nova do início ao fim
Primeiro produto a receber o novo brand da Ubots de ponta a ponta — criando consistência entre empresa e produto.

Nova tela de conversas

Recriada com dados fictícios para fins de portfólio, seguindo as diretrizes de confidencialidade da Ubots.

app.ubots.com.br/conversas
chat_bubble
bar_chart
people
settings
Conversas
Meus atend.
Espera
Fila
Bot
Atend. Douglas M.
Maria S. Aguardando
Preciso de ajuda com minha conta
Atend. Fernanda L.
João R. 2
Não consigo acessar o sistema
Atend. Carlos P.
Ana M. Aguardando
Dúvida sobre meu plano atual
Atend. Beatriz T.
Pedro L. 09:12
Erro ao fazer login
Maria S.
WhatsApp · Atend. Douglas M.
search
more_vert
Hoje, 09h08
Olá! Preciso de ajuda com minha conta.
09:08
Douglas M.
Olá, Maria! Pode me contar o que está acontecendo?
09:09 ✓✓
Não consigo entrar desde ontem. A senha não funciona mais.
09:10
Douglas M.
Entendi. Pode me confirmar o e-mail cadastrado?
09:11 ✓✓
sentiment_satisfied
Digite uma mensagem...
mic
attach_file
send
Em espera
Transferir
Finalizar
Dados
IA
Copilot
Dados da conversa
CanalWhatsApp
FilaSuporte geral
Protocolo#000128
Início09:08
Dados do cliente
NomeMaria S.
E-mailm.silva@email.com
PlanoBásico
DesdeMar 2023
Notas privadas

Nenhuma nota ainda.

+ Adicionar nota

Do problema à entrega

1
Levantamento de tickets
Classifiquei os tickets abertos por padrão e frequência. Os problemas se concentravam em áreas previsíveis da interface.
2
Entrevistas cirúrgicas
Entrevistei atendentes com base nas hipóteses dos tickets — para validar e entender o contexto de uso, não para descobrir do zero.
3
Decisão de layout
Defini os três painéis como estrutura central — lista, conversa e contexto — e as hierarquias de informação dentro de cada um.
4
Alinhamento com engenharia
Defini junto ao time o que migrava com a nova base técnica e o que ficava. A dívida técnica era a oportunidade de fazer certo de vez.
5
Identidade aplicada
Apliquei os novos tokens de design do rebranding na interface — criando coerência entre a comunicação da empresa e o produto.
6
Rollout e acompanhamento
Acompanhei os tickets e o NPS após o lançamento para confirmar se as hipóteses batiam com o comportamento real.

O que mudou depois

Os efeitos foram mensuráveis rapidamente. A redução de tickets mostrou que os bugs estruturais desapareceram com a nova base. E o NPS respondeu — clientes que aumentaram a nota mencionaram espontaneamente a melhoria na experiência de atendimento.

64%
menos tickets abertos relacionados à tela de conversas
↑ NPS
clientes que subiram nota mencionaram a experiência de atendimento
tela do produto com identidade nova do início ao fim

O que ficou

🎯
Tickets são pesquisa pré-processada
Não precisei de descoberta do zero porque os próprios usuários já tinham documentado os problemas nos tickets. A pesquisa foi de validação, não de exploração.
🔗
Dois projetos que se justificavam mutuamente
Ser o designer do rebranding e do redesign ao mesmo tempo foi uma vantagem. Não precisei convencer ninguém sobre prioridade — os dois projetos se sustentavam juntos.
🏗️
Dívida técnica como oportunidade
A limitação da base antiga virou argumento para refazer certo. Em vez de patch sobre patch, zerou a dívida e entregou algo sustentável.
🔁
Consistência como produto
Quando marca e produto falam a mesma língua, os clientes percebem — mesmo sem saber nomear. Os comentários no NPS foram sobre a experiência, não sobre o visual.

Quer entender como penso?

Estou disponível para conversas sobre produto, design e colaboração.

Entrar em contato arrow_forward

Mais projetos