Agendar uma conversa

Agendar uma conversa

Carregando a agenda
← Todos os projetos

SettingPsi

Saúde · Design de Produto · Design UX/UI · Design System
SettingPsi

Visão geral

Uma psicóloga com consultório próprio faz dois trabalhos. Um é a sessão. O outro é tudo o que fica em volta dela. Este sistema faz o segundo: mantém a agenda em dois fusos, envia os lembretes de sessão e de pagamento, guarda o prontuário e as escalas de cada paciente e fecha a cobrança do mês, tudo num lugar só.

Eu desenhei o produto, do mapa de funções às telas no computador e no celular, e desenvolvi o sistema por trás dele.

A usuária

Marina é uma psicóloga que atende online, da Espanha, pacientes que estão em sua maioria no Brasil. O dia dela é uma sessão atrás da outra. Entre duas sessões, ela tem poucos minutos.

O que ela tem de fazer nesses minutos:

  • Confirmar as sessões de amanhã, cada uma no fuso do paciente.
  • Escrever a evolução da sessão que acabou, antes de a próxima começar.
  • Lembrar quem não pagou e escrever para a pessoa sem soar como cobrador.
  • Manter o prontuário em sigilo, porque ele guarda o dado mais sensível que uma pessoa tem.

O problema

Um consultório como o dela funciona com quatro ferramentas que não conversam entre si: uma agenda, um serviço de prontuário, uma planilha de pagamentos e um app de mensagens. Cada uma guarda uma parte do quadro, e ela monta o dia à mão.

A saída comum é contratar: uma secretária para a agenda e os lembretes, um contador para o mês. Num consultório de uma pessoa só, esse custo chega antes da renda que pagaria por ele. A outra saída é um serviço de prontuário com mensalidade, que resolve o prontuário e deixa o resto onde estava.

O objetivo era um sistema fechado que fizesse o trabalho da secretária e da planilha, rápido o bastante para usar entre duas sessões.

Mapa do produto

Três grupos, com o nome do que ela está fazendo naquele momento.

DayTodayWork queueNotebookReminders
CarePatientsScheduleForms
PracticeRhythmBillingAccess log

Today é a primeira tela porque responde à pergunta com que ela abre o sistema: o que vem agora e o que está me esperando.

Da dor à função

DorFunção
Dois fusos em todo agendamentoCada sessão aparece no relógio do paciente e no dela, e a agenda respeita o limite diário dela
As evoluções se acumulamUma fila de trabalho lista o que está esperando: a evolução a escrever, o lembrete a enviar, a sessão a confirmar
Cobrar é desconfortável e fácil de esquecerO resumo do mês vira um recado pronto para WhatsApp ou e-mail, com o link de pagamento. Ela lê e envia
Paciente com pacote de sessões é cobrado duas vezesA sessão dentro de um pacote usa uma vaga já paga e não gera cobrança própria
A tela pode estar compartilhada numa sessão onlineUm modo Discreto para a tela compartilhada, e o dinheiro fica escondido até ela pedir para ver
Escalas de avaliação tomam tempo para corrigirO app corrige a escala. A faixa só aparece em escala conferida com a publicação original
O prontuário é o dado mais sensível que existeO banco é cifrado com uma senha-mestra, e o sistema guarda um registro de acesso

Decisões de design

  • Cor significa estado. A interface é preto no branco. O verde marca o que está feito, o amarelo o que espera e o vermelho o que está atrasado, e o olho acha o problema sem ler.
  • Linhas no lugar de cartões. As áreas dividem bordas de 1px numa grade só. Uma tela densa fica calma porque nada flutua e nada faz sombra.
  • Dois relógios, sempre. O horário do paciente vem primeiro e o dela fica logo embaixo. O formulário da agenda responde antes de ela perguntar: 15:00 para o paciente são 20:00 para ela, e cabe antes do limite.
  • Privado por padrão. O dinheiro aparece como pontos até ela pedir. Esconder é o estado inicial, porque esquecer de esconder é o erro que custa caro.
  • Números grandes, rótulos pequenos. A faixa de resumo são quatro números, cada um com um rótulo em maiúsculas pequenas.
  • O celular faz o mesmo trabalho. Toda tela existe em 375px com as mesmas funções, porque os minutos entre as sessões muitas vezes acontecem longe da mesa.

Design System

  • Três cores de estado: verde para feito, amarelo para o que espera, vermelho para atrasado.
  • Duas famílias de fonte: Inter Tight para leitura e IBM Plex Mono para rótulos, horários e valores.
  • Dois formatos de botão e um de campo, cada um como componente, com seus estados.
  • Contraste medido em cada par de texto: branco sobre teal 5,5:1, preto sobre branco 19,8:1, texto secundário 7,8:1.

Fluxos

Três fluxos, cada um uma coisa que a Marina faz entre duas sessões. Eles estão ligados no protótipo do Figma, no computador e no celular.

  1. Agendar uma sessão. Paciente, data e o horário do paciente. O sistema mostra o horário dela e se cabe.
  2. Enviar um lembrete de pagamento. A tela de cobrança mostra quem está devendo. O recado já está escrito, ela lê e envia por WhatsApp ou e-mail.
  3. Escrever a evolução. A fila de trabalho abre o prontuário do paciente na sessão que acabou.

Desenvolvimento

  • Feito com a ajuda do Claude Code. Design e código vieram da mesma pessoa.
  • As regras que mexem com dinheiro e datas são testadas. 1.191 conferências automáticas passaram em 26 de setembro de 2026, entre elas as 64 que cobrem as sessões dentro de um pacote.

Resultado

  • Um sistema no lugar de um serviço pago de prontuário e de ferramentas separadas. Agenda, prontuário, cobrança, lembretes e escalas ficam juntos.
Guia de Estilo

Cores e Botões

#0A0A0A
#FFFFFF
#F5F5F5
#E5E5E5
#0F766E
#FACC15
#B91C1C
Tipografia · Inter Tight & IBM Plex Mono

Um lugar só para o consultório

ExemploNomeFonteTamanhoAltura da linhaEspaçamento
29%DisplayInter Tight ExtraBold72px0.9-4%
HojeH2Inter Tight ExtraBold28px1.1-2%
Cada sessão aparece em dois relógiosCorpoInter Tight Regular16px1.50
SESSIONS TODAYRótuloIBM Plex Mono Medium12px1.310%
Dashboard, Today screen, with made-up patients
Mobile
Desenhado no Figma Figma
Feito com JavaScript JavaScript
Design e código de joaomob
Créditos
  • Design de produto e desenvolvimento por João Marcos