Novo layout do aplicativo Dental Office

Empresa

Dental Office

Função

Product Designer

Plataforma

App

Ano

2026

Introdução

O aplicativo Dental Office é usado todos os dias por dentistas, secretárias, administradores, professores e alunos de odontologia. Apesar de estar nas mãos de tanta gente, o layout estava ficando para trás. Era diferente da versão web, alguns caminhos eram pouco claros e funcionalidades importantes ficavam escondidas. A missão foi :

Repensar o layout para que o app ficasse mais simples, mais organizado e mais parecido com a versão web. Tudo isso ouvindo de perto quem usa o produto no dia a dia.

Contexto

A Dental Office é um software de gestão para clínicas. Junto dela existe a Dental Escola, voltada para universidades, com versão para professor e versão para aluno. Tudo isso roda no computador e também no aplicativo, em Android e iOS.

O aplicativo tinha um visual antigo, com componentes, cores e fontes muito diferentes da versão web. Usuários reclamavam de fluxos confusos, do botão de login pouco visível e de menus escondidos dentro da tela do paciente.

Aplicando o Duplo Diamante

Para conduzir o projeto, usei o framework do Duplo Diamante. Ele ajudou a separar o momento de entender o problema do momento de criar a solução, com pesquisa e testes nos pontos certos.

O problema (Discover)

A primeira etapa foi entender o tamanho real do problema. Comecei com uma pesquisa no Google Forms, divulgada no grupo de WhatsApp “Experiência do Cliente”, que tinha 497 membros. Foram 13 respostas, e elas já apontaram caminhos importantes.

Principais dados da pesquisa:

  • 76,9% dos respondentes disseram usar o app com frequência.
  • 66,7% dos que pouco usavam preferiam o sistema pelo computador.
  • A nota média de importância do app foi 8,8 de 10.
  • 76% topavam participar de uma entrevista mais aprofundada.


Em seguida, fiz 12 entrevistas em profundidade com clientes do Dental Office e do Dental Escola, com perfis variados como dentistas responsáveis, sócios, secretárias, administradores e professores.

O que apareceu nas entrevistas do Dental Office:

  • Uso concentrado em consultar pacientes e agenda.
  • Dificuldade para encontrar o botão de entrar na tela de login, que ficava abaixo do destaque do trial.
  • Desconhecimento de várias funcionalidades, porque as abas horizontais dentro da tela do paciente escondiam o conteúdo.
  • Reclamações sobre o visual antigo, sem coerência com a versão web.

O que apareceu nas entrevistas do Dental Escola:

  • Layout confuso, com itens do paciente difíceis de localizar.
  • Travamentos e lentidão em algumas telas.
  • Ponto mais crítico, o fluxo de evolução do paciente. Os alunos tinham muita dificuldade para registrar uma evolução, e isso impactava o dia a dia das universidades.

Definindo o que precisava mudar (Define)

Com a pesquisa em mãos, organizei os achados e cheguei nos próximos passos:

  1. Mapear todas as telas atuais do aplicativo.
  2. Identificar as melhorias com base nas falas dos usuários.
  3. Criar novos componentes e documentar no design system Tangram.
  4. Unificar a linguagem visual do app com a versão web, usando as mesmas cores, fontes, botões e cantos arredondados.


Outro ponto importante foi usar como apoio as boas práticas de usabilidade do Nielsen Norman Group para melhorar a experiência de ambos os aplicativos.

O escopo era grande. Duas plataformas, Android e iOS. Dois aplicativos, Dental Office e Dental Escola. E dentro do Dental Escola ainda existiam dois perfis, professor e aluno. Para dar conta de tudo isso sem perder consistência, segmentei o trabalho no Figma e fui criando os fluxos por área.

Criando a solução (Develop)

Dentro do Figma, organizei os fluxos por tela e plataforma. Algumas mudanças foram mais marcantes que outras.

  • Tela de login. Reorganizei a hierarquia visual para que o botão de entrar ficasse evidente logo de cara, sem precisar descer a página.
  • Tela do paciente. A maior virada do projeto. As abas horizontais que escondiam conteúdo deram lugar a uma navegação em quadrantes. Em uma única tela, o usuário vê detalhes, fichas, planos de tratamento, evolução, periograma, imagens e documentos, todos lado a lado.
  • Atalho para evolução. Criado no Dental Escola, simplificando o caminho que antes era confuso para os alunos.
  • Linguagem unificada. O app passou a falar a mesma língua da versão web, com mesmas cores, fontes, botões e cantos arredondados.

Testes de usabilidade

Antes de mandar para o desenvolvimento, chamei as mesmas pessoas das entrevistas iniciais para testar o novo layout.

Foram 11 entrevistas moderadas com dentistas, secretárias, administradores e professores de instituições como Sant’Ana, Unifagoc, Unipar, Unesp, Coesp e Santé. Os destaques positivos apareceram com bastante consistência:

  • Navegação em grade na tela do paciente.
  • Nomes abaixo dos ícones.
  • Atalhos mais visíveis.
  • Assinatura na mesma tela da evolução.
  • Motivo visível no card do agendamento.
  • Redução de cliques.
  • Melhor acessibilidade, com mais zona de toque e menos scroll.

 Em paralelo, montei um teste A/B no Maze com dois fluxos principais.

Missao 1 — Evolucao da Paciente Ana Silva
“Como voce faria para fazer uma evolucao utilizando o nosso aplicativo?”

Resultado do fluxo de evolução

  • Taxa de sucesso. 40% na versão atual contra 100% na nova.
  • Tempo médio. 174 segundos contra 33 segundos, uma redução de cerca de 81%.
  • 100% dos participantes escolheram a nova versão.

Missão 2 — Imagens da Paciente Ana Silva

“Encontre o caminho ate a pagina com as imagens da paciente.”

Resultado do fluxo de imagens do paciente

  • Taxa de sucesso. 100% nas duas versões.
  • Tempo médio. 8 segundos contra 6 segundos, uma redução de 25%.
  • Preferência unânime pela nova versão.

Diagnostico: A interface antiga apresentava serios problemas de usabilidade na tarefa de evolucao. O alto abandono combinado com miscliques frequentes indica que os elementos de navegacao nao comunicavam adequadamente sua funcao.

Desenvolvimento e lançamento (Deliver)

Como era muita coisa para entregar, dividimos o trabalho em 19 tarefas separadas, cada uma representando um fluxo ou tela, como atualizar a toolbar, a tela de pacientes, a tela de imagens, a tela de evolução e a tela de login.

A prioridade foi começar pela base visual, com novos componentes, cores, fontes e fundos. A partir daí, o aplicativo foi atualizado de forma progressiva. A primeira grande entrega para o usuário final foi a nova página de pacientes em quadrantes, justamente o ponto que representava a mudança mais sentida no dia a dia.

Resultado

Para medir o impacto, usei o Pendo e criei um guide que aparecia na primeira vez em que o usuário acessava a nova tela do paciente. A pergunta era simples. Como você avalia a nova tela de pacientes, em uma escala de 1 a 5.

Foi utilizado o Claude conectado com o MCP do Pendo para unificar as informações e transformar os resultados em dashboards.

Além dos números, em 2026 o novo layout teve uma vitrine ainda maior. A Dental Office participou do CIOSP, um dos maiores eventos de odontologia do mundo, e o aplicativo foi exibido em telas no estande para milhares de visitantes. O design unificado, a navegação em quadrantes e a coerência com a versão web foram bastante elogiados pelos profissionais que passaram pela feira.

Nova interface

Protótipo

Aprendizados

Esse projeto reforçou três coisas que carrego para qualquer trabalho.

  • A pesquisa abre caminhos que a intuição sozinha não abre.
  • Testar antes de desenvolver poupa tempo e dinheiro.
  • Medir depois do lançamento é o que fecha o ciclo, mostrando se o trabalho fez sentido para o usuário final.

Meu papel e colaboração

Atuei como Product Designer responsável pelo projeto, desde a pesquisa até a medição pós lançamento. Algumas frentes que conduzi:

  • Pesquisa quantitativa via Google Forms.
  • Entrevistas em profundidade com clientes do Dental Office e Dental Escola.
  • Mapeamento de todas as telas atuais e redesenho dos fluxos no Figma.
  • Criação e documentação de componentes no design system Tangram.
  • Testes de usabilidade moderados e A/B no Maze.
  • Acompanhamento do desenvolvimento ao longo das 19 tarefas.
  • Criação do guide no Pendo para medir o CSAT pós lançamento.

Trabalhei próximo dos times de desenvolvimento mobile, de produto e tecnologia, das universidades parceiras e dos clientes da base do Dental Office.