Dashboard – Narrativa de Diseño
El momento de la verdad: ver tu salud por primera vez
La Historia
María termino el onboarding. Agendo su cita. Fue al laboratorio a las 7 AM en ayunas en Clínica ADEN Medellín. Espero 2 días. Recibio una notificación: “Tus resultados están listos.” Abrió la app con Face ID. Y ahora, por primera vez, ve su salud.
Este es el momento que determina si ADEN se convierte en un hábito diario o se elimina. Todo lo anterior – el auth, el onboarding, la espera, los exámenes – fue construcción. Aquí es donde la promesa se materializa o se rompe.
Lo que María ve: un número grande. 78. En fondo azul profundo (#0f2fc7) con un glow radial que hace que el número parezca iluminado desde adentro. Al lado, una línea que sube suavemente de izquierda a derecha – su sparkline de los últimos 30 días. Debajo del sparkline: “+10 vs hace 30 días.” Y debajo de eso, en tipografia secundaria: “34 años” – su edad biológica, 2.4 años menos que su edad cronológica.
María no sabe que 19 algoritmos procesaron 30+ biomarcadores en menos de 5 milisegundos para producir ese 78. No sabe que la Capa 1 (deterministica) genero alertas y colisiones, que la Capa 2 (longitudinal) cálculo la tendencia del sparkline, y que la Capa 3 (IA) sintetizó todo en ~4 segundos. Solo sabe una cosa: 78 se siente bien. Y el “+10” le dice que va mejorando.
Eso es suficiente. Eso es todo. Un número, una dirección, una emoción.
Principio de Diseño: Un Número, Una Acción, Una Emoción
La investigación es inequivoca: el patrón dominante en apps de salud es un score compuesto único. Un review academico de 2025 (DeGruyter) identifico 14 composite health scores en 10 empresas de wearables. Todos 0-100. Todos como hero del dashboard.
El patrón funciona porque responde a la pregunta más primitiva que tiene un usuario de salud: “Como estoy?” No “Cual es mi HRV?” ni “Que dice mi perfil lipídico?” sino “Estoy bien o no?” Un número responde eso. Cien métricas no.
Pero un número solo no es suficiente. El número necesita contexto emocional (la emoción) y contexto accionable (la acción). ADEN conecta los tres:
- El número (78): Responde “Como estoy?”
- La acción (Plan del dia): Responde “Que hago hoy?”
- La emoción (framing positivo + sparkline ascendente): Responde “Debo preocuparme?”
Cada elemento del dashboard soporta uno de estos tres pilares. El hero card es el número. El plan del dia es la acción. El sparkline y el delta son la emoción. Todo lo demas – próxima cita, adherencia semanal, edad biológica, accesos rápidos – es soporte. Si María solo mira el hero card por 3 segundos y cierra la app, ya obtuvo lo esencial.
El Hero Split-Screen
La decisión de usar un split-screen en lugar de una card plana o un bento grid estándar es la decisión de diseño más importante del dashboard.
El lado izquierdo (40% del ancho, bg-[#0f2fc7]) contiene el score: un número en tipografia ~120pt con radial glow. Es un objeto visual que demanda atención. No compite con nada. No comparte espacio con texto explicativo ni badges ni iconos. Es un número, un color, y un glow. Punto.
El lado derecho (60% del ancho, bg-[#0A0F1E]) contiene el sparkline: una línea de tendencia de 30 días en #3B82F6 con un glow dot en el punto actual, y debajo, la edad biológica y el delta. Este lado es racional donde el izquierdo es emocional. El sparkline responde “estoy mejorando?” sin que María tenga que preguntar.
La tendencia en dashboards de salud válida esta estructura: los rediseños recientes condensan la información en un modelo de “página de noticias” – el insight más relevante arriba, prominente, con todo lo demas detrás de taps. La investigación de patrones de lectura (F y Z) confirma que la métrica más crítica debe ir arriba-izquierda. El score en el lado izquierdo del split-screen es lo primero que el ojo encuentra.
La alternativa descartada fue un bento grid plano donde el score seria una card más entre 6-8 cards iguales. El problema: en un grid plano, el score compite visualmente con la próxima cita, la adherencia, y los accesos rápidos. Todo tiene el mismo peso. Nada destaca. El dashboard se convierte en lo que la investigación llama “data dumping” – el anti-patrón documentado en las primeras versiones de múltiples plataformas de salud.
El split-screen resuelve esto. El hero card ocupa col-span-6 con min-height 280px. Es imposible ignorarlo. Es lo primero y lo más grande. Todo lo demas fluye debajo, con tamanos y pesos que reflejan su importancia relativa.
Decisiones Clave
| Decisión | Por Qué | Dato | Alternativa Descartada |
|---|---|---|---|
| Split-screen hero (score + sparkline) en lugar de bento grid plano | Jerarquía visual clara: el score domina, el sparkline da contexto temporal. Elimina data dumping | Review académico 2025: 14 scores compuestos en 10 empresas, todos como elemento dominante. La tendencia en dashboards de salud prioriza “One Big Thing” arriba | Bento grid donde el score es una card más – todo compite, nada domina. Anti-patrón documentado (data dumping) |
| Glow radial en el score | El glow crea un efecto de “objeto luminoso” que atrae el ojo involuntariamente. No es decorativo – es funcional. El score es lo único iluminado en la pantalla | Patrones de lectura F/Z: métrica crítica arriba-izquierda. El glow refuerza la primacia del score | Score en tipografia plana sin efecto – se mimetiza con el resto del texto. Pierde jerarquía |
| Sparkline de 30 días como default (no 7 ni 90) | 30 días es suficiente para mostrar tendencia sin abrumar. 7 días tiene demasiado ruido. 90 días aplana mejoras recientes | Las plataformas de rendimiento y salud muestran tendencias de 7-30 días en home. La vista de 90 días existe detrás de un tap | 7 días: demasiado volatil, una mala noche distorsiona todo. 90 días: aplana el progreso reciente y desmotiva |
| Plan del dia como checklist interactivo (no solo lectura) | Marcar items completados (vitaminas, ejercicio) sin salir del dashboard reduce friction de 3 taps a 1. El dashboard se convierte en herramienta, no solo en reporte | La investigación demuestra que el feedback loop inmediato genera engagement diario. El checklist crea un loop similar: acción --> marca --> satisfacción | Plan como lista de lectura – el usuario lee, cierra la app, y olvida. No hay feedback loop. No hay interacción |
| Próxima cita prominente en dashboard | Reducir no-shows. Si María ve “Laboratorio Control – 15 Ene, 8:00 AM” cada vez que abre la app, es menos probable que olvide | La preparación (ayuno 12h) visible reduce llamadas a soporte y citas fallidas. En Colombia, no-shows en laboratorio son comunes por falta de preparación | Cita solo visible en sección de Citas – el usuario tiene que navegar activamente para recordar. La mayoría no lo hace |
| Edad biológica como métrica secundaria (no hero) | Motivacional pero no accionable inmediatamente. “34 años, 2.4 años más joven” es un dato que genera satisfacción pero no requiere acción | La edad biológica es una métrica clave en plataformas de salud preventiva. Pero es secundaria al score compuesto porque depende de biomarcadores que no cambian diariamente | Edad biológica como hero – no cambia con suficiente frecuencia para justificar la posición dominante. El Health Score cambia semanalmente |
| Header sticky con saludo time-aware | “Buenos días, María” es la primera señal de personalización. No es “Dashboard” ni “Inicio” – es el nombre de la persona | Copy-guidelines ADEN: “Informal sobre formal. ADEN habla como amigo informado, no como institución.” La hora del dia cambia el saludo | Header con nombre de la app – impersonal. Header sin saludo – pierde la oportunidad de calidez |
| Alertas banner solo si hay alertas no leidas | Evitar ruido visual. Si no hay alertas, el espacio no existe (no hay card vacia). Si hay, el banner es prominente pero no alarmista | Anti-nocebo: alertas usan azul (#0f2fc7), no rojo. “Hay un cambio. Veamos que podemos hacer” – no “ALERTA: resultado anormal” | Alertas siempre visibles (con “0 alertas” cuando no hay) – comunica que el sistema busca problemas, no que cuida |
| Accesos rápidos como fila de iconos al fondo | Progressive disclosure: Mi Plan, Progreso, Exámenes, Trayectoria, Ajustes son accesibles pero no distraen del hero | La tendencia en dashboards de salud es condensar la navegación (de 5 tabs a 3). Progressive disclosure es el patrón validado para dashboards densos | Tab bar con 5+ items – fragmenta la atención. Navigation drawer – esconde demasiado |
Time-Aware Dashboard
La tendencia en dashboards de salud (2025) cambio fundamentalmente con una idea simple: el “One Big Thing” cambia durante el dia. Mañana, surfacea métricas de sueño. Tarde, surfacea actividad. Noche, prepara para descanso. El dashboard no es estatico – es un organismo que respira al ritmo del usuario.
ADEN adopta este patrón. El dashboard de María no muestra lo mismo a las 7 AM que a las 9 PM:
Mañana (6-11 AM): El Plan del dia es prominente. Los suplementos del desayuno están arriba. El recordatorio de toma matutina es visible. El score es el hero, pero la acción inmediata es “Toma 2000 IU de Vitamina D con tu desayuno.”
Tarde (12-5 PM): El progreso del dia domina. “2 de 4 completados.” La próxima acción (ejercicio, hidratación) reemplaza la lista de la mañana. El score sigue en el hero, pero el mensaje cambia a “Vas bien hoy.”
Noche (6-11 PM): Las recomendaciones de sueño aparecen. “Tu hora ideal de dormir: 10:30 PM.” El plan del dia muestra un resumen: “3 de 4 completados hoy.” El tono del copy baja la intensidad.
Esto no es personalización superficial. Es la diferencia entre un dashboard que el usuario abre una vez al dia (o nunca) y uno que abre 3-4 veces porque siempre hay algo nuevo y relevante. La investigación de engagement demuestra que el feedback loop inmediato (por ejemplo, un score 2 horas después de cada comida) genera engagement diario. El time-aware dashboard crea múltiples momentos de engagement a lo largo del dia sin requerir que María registre comidas.
El Plan del Dia como Checklist Interactivo
La mayoría de las health apps presentan el plan del dia como una lista de lectura: “Hoy debes tomar Vitamina D, hacer 30 min de ejercicio, beber 2L de agua.” El usuario lee, asiente, y cierra la app. No hay feedback loop. No hay interacción. No hay satisfacción de completitud.
ADEN hace cada item del plan tappable. María ve 4 items en su plan del dia. Toca “Vitamina D – 2000 IU con desayuno” y el checkbox se marca. El contador cambia de “0 de 4” a “1 de 4.” No necesita abrir una sección aparte, no necesita navegar a un formulario de check-in, no necesita confirmar en un modal.
Un tap. Check. Satisfacción.
Esto está conectado al sistema de adherencia: cada tap alimenta el porcentaje semanal (87% en nuestro ejemplo), la racha de días consecutivos, y las tendencias longitudinales de la Capa 2 del engine. Un tap de María en “Vitamina D” es un data point que el engine usa para correlacionar adherencia con cambios en biomarcadores a lo largo de 90 días.
La investigación en plataformas metabolicas demuestra que el feedback loop de 2 horas (come algo, registralo, y en 2 horas ve como tu glucosa respondio) genera engagement diario. Nuestro checklist crea un feedback loop más corto: marca algo, ve el contador cambiar, siente progreso inmediato. No tenemos el immediacy de un CGM (no podemos mostrar glucosa en tiempo real), pero tenemos el immediacy de la completitud.
Anti-Nocebo: Como Presentar un Score de 62
Un score de 62/100 podría sentirse como fracaso. En un examen escolar, 62 es reprobado. En una resena de producto, 6.2/10 es mediocre. El usuario trae estas asociaciones numericas a su Health Score.
El protocolo anti-nocebo de ADEN, validado con 297 interpretaciones independientes, dicta como se presenta cada rango:
62 = “Bueno. Hay oportunidades de mejora.” No “Atención recomendada.” No “Por debajo del promedio.” No “62/100” con barra roja a medio llenar.
La decisión tiene tres componentes:
1. Framing verbal positivo. Las copy-guidelines son explicitias: “Construir desde la abundancia, la posibilidad y el progreso. Nunca desde el problema, la carencia o el miedo.” Un score de 62 no es un problema – es un punto de partida con espacio de mejora. El copy orienta hacia la acción (“oportunidades de mejora” implica que hay cosas concretas qué hacer), no hacia la preocupación.
2. Color constante. El score siempre es azul (#0f2fc7). Nunca rojo, nunca amarillo, nunca gris. Las prohibiciones del design system son explicitas: “NO yellow/amber colors. Usar azul para estados de revisar.” Esta decisión elimina la asociación semaforo (verde-bueno, amarillo-medio, rojo-malo) que genera ansiedad innecesaria. Un 62 en azul se siente diferente a un 62 en amarillo.
3. Acción inmediata. Debajo del score siempre hay un “qué hacer”. El plan del dia no es un accesorio del dashboard – es la respuesta a la pregunta que un score de 62 genera: “Y ahora que?” La proximidad visual entre el score y el plan del dia comunica: “tu número no es un veredicto, es un punto de partida.”
Algunas plataformas de salud preventiva usan tres zonas (rojo/amarillo/verde) para biomarcadores individuales, y eso funciona para datos clínicos granulares. Pero para un score compuesto – un número que resume tu salud entera – las zonas de color generan más ansiedad que claridad. Las plataformas de rendimiento deportivo han sido criticadas por exactamente esto: lenguaje de coaching descrito como “robotico y científico” y strain targets sin días de descanso que crean “presion insostenible.”
ADEN nunca hace sentir al usuario que está fallando. Un 62 es bueno. Un 78 es muy bueno. Un 91 es excelente. La escala emocional solo sube. El engine puede detectar riesgos (ese es su trabajo, y lo hace con 94% de precisión detectiva), pero la presentación de esos riesgos al usuario siempre pasa por el filtro anti-nocebo: empatico, accionable, y orientado a lo que el usuario puede controlar.
Conexión con el Engine
El dashboard es la cara del engine. Cada pixel es la salida de un sistema de tres capas que procesa 1,620 cruces clínicos por paciente.
El Hero Card (Health Score): Lo que María ve como “78” es el output de 19 algoritmos procesando 30+ biomarcadores. PhenoAge calcula su edad biológica. Globorisk-LAC calcula su riesgo cardiovascular con umbrales calibrados para población latina (no europea). Framingham, MESA Risk Score, y 15 algoritmos más generan sub-scores que se componen en el número final. Todo en menos de 5 milisegundos.
A diferencia de la mayoría de plataformas de wearables – que no revelan sus formulas – ADEN explica que pesa y cuánto. El score es transparente. Si María toca el número, ve el breakdown en 6 dominios. Si toca un dominio, ve los biomarcadores que lo alimentan. Si toca un biomarcador, ve su valor, su rango óptimo personalizado (no poblacional), y la tendencia. Progressive disclosure desde el número hasta el dato crudo.
El Sparkline: Muestra la salida de la Capa 2 (longitudinal). No es solo “puntos en una línea” – es la velocidad de cambio entre visitas, una de las 5 capacidades exclusivas de ADEN que ningun competidor ofrece. El sparkline ascendente de María no solo dice “+10” – el engine sabe que la velocidad de mejora es consistente, que la trayectoria proyecta a 84 en 60 días, y que los cambios son reales (Relevant Change Value) y no variación normal.
El Banner de Alertas: Muestra la salida de la Capa 1 (deterministica). Las 76 reglas clínicas (25 críticas, 39 warning, 12 informativas) generan alertas que llegan al banner. Pero el banner no dice “ALERTA: CYP2D6 intermediate metabolizer detectado.” Dice “Hay un cambio en como tu cuerpo procesa ciertos medicamentos. Veamos que podemos ajustar.” El engine detecta con precisión clínica (94%). La UI traduce con empatia humana.
El Plan del Dia: Conectado a las 458 recomendaciones de confirmación que el engine genera (96% cobertura de pacientes). Cada item del plan tiene origen algoritmico: la dosis de Vitamina D viene de la interacción VKORC1 + calcidiol + exposición solar. Los 30 minutos de caminata vienen del déficit cardiovascular calculado por Globorisk-LAC. Nada es genérico.
La propiedad más importante del engine en el contexto del dashboard: funciona sin IA. Si la Capa 3 falla (Claude Opus se cae, la IA genera incoherencia), la Capa 1 y 2 siguen operando. El score se calcula. Las alertas se disparan. El plan se genera. El dashboard nunca está vacío por una falla de IA. Las matemáticas protegen; la IA enriquece. El usuario nunca sabe la diferencia.
Principio de Referencia: Curaduria Clínica vs. Personalización del Usuario
Las plataformas de salud generalistas usan “Favoritos” – métricas que el usuario elige fijar. Esto le da al usuario control sobre que ve primero. Es elegante para plataformas horizontales que cubren sueño, actividad, nutrición, ciclo menstrual, frecuencia cardiaca, y decenas de métricas mas. Dejar que el usuario elija que importa es la única forma de manejar esa amplitud.
ADEN no da esa elección en v1. Y eso es deliberado.
El engine sabe que métricas importan. Los 19 algoritmos ya calcularon que es relevante para María. Si su perfil PGx muestra CYP2C19 poor metabolizer y toma clopidogrel, esa colision es más importante que su conteo de pasos. Si su HbA1c tiene tendencia ascendente, eso domina sobre su registro de sueño. El dashboard no es un lienzo en blanco – es una radiografia priorizada por el engine.
Dar al usuario la elección de “que métrica importa” en un producto clínico es peligroso. María podría fijar “pasos diarios” y no ver la alerta de colision gen-fármaco porque la desplaza fuera de vista. En wellness, eso es aceptable (es su fitness tracker, su elección). En salud preventiva con implicaciones clínicas, no lo es.
Pero adoptamos el principio de “Highlights” – insights algoritmicamente surfaceados que cambian diariamente. La versión ADEN: el time-aware dashboard. Lo que María ve a las 7 AM es diferente de lo que ve a las 9 PM. No porque ella eligio – porque el sistema sabe que es relevante ahora. Es la filosofía de surfacing inteligente ejecutada con la autoridad clínica que un producto de salud preventiva requiere.
Las plataformas generalistas pueden ser democraticas con las métricas porque el costo de ignorar un dato de actividad es bajo (no contaste pasos, no pasa nada). ADEN no puede ser democratico porque el costo de ignorar una alerta del engine puede ser una colision gen-fármaco no detectada, un biomarcador en deterioro silencioso, o 6.8 meses de lead time de detección temprana desperdiciados.
El dashboard no es del usuario. Es para el usuario. Esa distinción importa.