Agendar una llamada

Agendar una llamada

Cargando la agenda
← Todos los proyectos

SettingPsi

Salud · Diseño de Producto · Diseño UX/UI · Design System
SettingPsi

Resumen

Una psicóloga con consulta propia hace dos trabajos. Uno es la sesión. El otro es todo lo que la rodea. Este sistema hace el segundo: lleva la agenda en dos husos horarios, envía los recordatorios de sesión y de pago, guarda la historia y las escalas de cada paciente y cierra el cobro del mes, todo en un solo lugar.

Diseñé el producto, del mapa de funciones a las pantallas en el ordenador y en el móvil, y desarrollé el sistema que hay detrás.

La usuaria

Marina es una psicóloga que atiende en línea, desde España, a pacientes que en su mayoría están en Brasil. Su día es una sesión tras otra. Entre dos sesiones tiene pocos minutos.

Lo que tiene que hacer en esos minutos:

  • Confirmar las sesiones de mañana, cada una en el huso del paciente.
  • Escribir la nota de la sesión que acaba de terminar, antes de que empiece la siguiente.
  • Recordar quién no ha pagado y escribirle sin sonar como un cobrador.
  • Mantener la historia clínica en privado, porque guarda el dato más sensible que tiene una persona.

El problema

Una consulta como la suya funciona con cuatro herramientas que no se hablan entre sí: una agenda, un servicio de historias clínicas, una hoja de pagos y una app de mensajes. Cada una guarda una parte del cuadro, y ella arma el día a mano.

La salida habitual es contratar: una secretaria para la agenda y los recordatorios, un contable para el mes. En una consulta de una sola persona, ese coste llega antes que el ingreso que lo pagaría. La otra salida es un servicio de historias clínicas con cuota mensual, que resuelve la historia y deja el resto donde estaba.

El objetivo era un sistema cerrado que hiciera el trabajo de la secretaria y de la hoja de cálculo, lo bastante rápido para usarlo entre dos sesiones.

Mapa del producto

Tres grupos, con el nombre de lo que ella está haciendo en ese momento.

DayTodayWork queueNotebookReminders
CarePatientsScheduleForms
PracticeRhythmBillingAccess log

Today es la primera pantalla porque responde a la pregunta con la que ella abre el sistema: qué viene ahora y qué me está esperando.

Del dolor a la función

DolorFunción
Dos husos en cada citaCada sesión aparece en el reloj del paciente y en el suyo, y la agenda respeta su límite diario
Las notas se acumulanUna cola de trabajo lista lo que está esperando: la nota por escribir, el recordatorio por enviar, la sesión por confirmar
Cobrar es incómodo y fácil de olvidarEl resumen del mes se vuelve un mensaje listo para WhatsApp o e-mail, con el enlace de pago. Ella lo lee y lo envía
Un paciente con un paquete de sesiones recibe dos cobrosLa sesión dentro de un paquete usa un cupo ya pagado y no genera un cobro propio
La pantalla puede estar compartida en una sesión en líneaUn modo Discreto para la pantalla compartida, y el dinero queda oculto hasta que ella pide verlo
Las escalas de evaluación llevan tiempo de corregirLa app corrige la escala. El rango solo aparece en una escala verificada con su publicación original
La historia clínica es el dato más sensible que existeLa base de datos está cifrada con una contraseña maestra, y el sistema guarda un registro de acceso

Decisiones de diseño

  • El color significa estado. La interfaz es negro sobre blanco. El verde marca lo hecho, el amarillo lo que espera y el rojo lo atrasado, y el ojo encuentra el problema sin leer.
  • Líneas en lugar de tarjetas. Las áreas comparten bordes de 1px en una sola retícula. Una pantalla densa queda en calma porque nada flota y nada proyecta sombra.
  • Dos relojes, siempre. La hora del paciente va primero y la suya queda justo debajo. El formulario de la agenda responde antes de que ella pregunte: las 15:00 del paciente son las 20:00 para ella, y cabe antes del límite.
  • Privado por defecto. El dinero aparece como puntos hasta que ella lo pide. Ocultar es el estado inicial, porque olvidarse de ocultar es el error que cuesta caro.
  • Números grandes, etiquetas pequeñas. La franja de resumen son cuatro números, cada uno con una etiqueta en mayúsculas pequeñas.
  • El móvil hace el mismo trabajo. Cada pantalla existe en 375px con las mismas funciones, porque los minutos entre sesiones muchas veces ocurren lejos del escritorio.

Design System

  • Tres colores de estado: verde para hecho, amarillo para lo que espera, rojo para atrasado.
  • Dos familias tipográficas: Inter Tight para lectura e IBM Plex Mono para etiquetas, horas e importes.
  • Dos formatos de botón y uno de campo, cada uno como componente, con sus estados.
  • Contraste medido en cada par de texto: blanco sobre teal 5,5:1, negro sobre blanco 19,8:1, texto secundario 7,8:1.

Flujos

Tres flujos, cada uno una cosa que Marina hace entre dos sesiones. Están enlazados en el prototipo de Figma, en el ordenador y en el móvil.

  1. Agendar una sesión. Paciente, fecha y la hora del paciente. El sistema muestra su propia hora y si cabe.
  2. Enviar un recordatorio de pago. La pantalla de cobros muestra quién debe. El mensaje ya está escrito, ella lo lee y lo envía por WhatsApp o e-mail.
  3. Escribir la nota. La cola de trabajo abre la historia clínica del paciente en la sesión que acaba de terminar.

Desarrollo

  • Hecho con la ayuda de Claude Code. Diseño y código salieron de la misma persona.
  • Las reglas que tocan dinero y fechas están probadas. 1.191 comprobaciones automáticas pasaron el 26 de septiembre de 2026, entre ellas las 64 que cubren las sesiones dentro de un paquete.

Resultado

  • Un sistema en lugar de un servicio de pago de historias clínicas y de herramientas separadas. Agenda, historias clínicas, cobros, recordatorios y escalas viven juntos.
Guía de Estilo

Colores y Botones

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

Un solo lugar para la consulta

EjemploNombreFuenteTamañoAltura de líneaEspaciado
29%DisplayInter Tight ExtraBold72px0.9-4%
HoyH2Inter Tight ExtraBold28px1.1-2%
Cada sesión aparece en dos relojesCuerpoInter Tight Regular16px1.50
SESSIONS TODAYEtiquetaIBM Plex Mono Medium12px1.310%
Dashboard, Today screen, with made-up patients
Móvil
Diseñado en Figma Figma
Hecho con JavaScript JavaScript
Diseño y código de joaomob
Créditos
  • Diseño de producto y desarrollo por João Marcos