Flow: Health Progress & Deep Dive
Explorar Mi Salud Sin Sentirme Abrumado
JTBD: “Cuando quiero entender mi salud a fondo, quiero explorar mis datos sin sentirme abrumado”
Actor: Paciente (post-baseline, tiene datos de al menos 1 ciclo de labs)
Trigger: Tab “Progreso” en navegación principal o card de progreso en Dashboard
Priority: P1 (High – core value proposition)
Duration: 30-180 segundos (exploración progresiva)
Navigation Map
Progressive Disclosure Strategy
La exploración de salud sigue 3 niveles de profundidad. El usuario nunca ve más de lo que necesita en cada nivel.
| Nivel | Vista | Propósito | Tiempo Esperado |
|---|---|---|---|
| L1: Resumen | Progreso Overview | “Estoy bien?” – respuesta en 5 seg | 5-15s |
| L2: Contexto | Nivel de Salud, Edad Biológica, Exámenes, Proyecciones | “Por qué?” – entender drivers | 30-60s |
| L3: Profundidad | Detalle Biomarcador, Trayectoria | “Que hago?” – acción concreta | 60-180s |
Connection: Dashboard -> Progreso
El Dashboard principal (ver dashboard) conecta con Progreso mediante:
- Hero card del Health Score --> click lleva a Progreso Overview
- Card “Edad Biológica” --> click lleva directo a Edad Biológica detalle
- Acceso rápido “Mi Progreso” --> lleva a Progreso Overview
- Card “Mejoras Recientes” --> lleva a Tus Exámenes (filtrado por mejorados)
Dashboard Progreso
Health Score click > Overview
78/100 (landing)
Edad Biol. click > Edad Biol.
42.8 años (detalle)
Screen 1: Progreso Overview
Ruta: /paciente/progreso
Propósito: Landing page del tab Progreso. Responde “estoy bien?” en 5 segundos.
Nivel: L1 (Resumen)
ASCII Wireframe
HEADER (sticky)
< Inicio Mi Progreso Ciclo 2 de 3 · 23 días restantes
HERO: NIVEL DE SALUD (col-4) EDAD BIOLOGICA
Tu nivel de salud (col-2)
85 /100 Meta: 95 41.2 años
+7 pts 45 cronologica
-3.8 años
Inicio: 68 Actual: 85 Dif: +17
/~~~~ "Eres más joven
(sparkline 7 puntos) que tu edad"
Ver detalles -> Ver detalles ->
TU PROYECCION TU ADHERENCIA MEJORAS
(col-2) (col-2) RECIENTES
(col-2)
Escenario: 83% general
BUENO +17 pts
OPT BUE REG RIE Supl: 92% Glucosa -17
Hábitos: 75% Colest. -25
A 5 años, 72% Check-ins: 80% Vit D +20
probabilidad
Ver detalle -> Ver exam. ->
Explorar ->
TUS EXAMENES (col-6, full width)
Ver todos ->
Glucosa HbA1c Vit D Colesterol
98 mg/dL 5.4 % 42 ng/mL 195 mg/dL
-17 (o) -0.8 (o) +20 (o) -25 (r)
Leyenda: (o) = óptimo (emerald dot) (r) = revisar (blue dot) (a) = atención (red dot)
Bento Grid Layout
grid-cols-6:
Hero Health Score: col-span-6 md:col-span-4, row-span-1 (bg-[#0f2fc7])
Edad Biologica: col-span-6 md:col-span-2 (bg-white)
Tu Proyección: col-span-6 md:col-span-2 (bg-white)
Tu Adherencia: col-span-6 md:col-span-2 (bg-white)
Mejoras Recientes: col-span-6 md:col-span-2 (bg-white)
Tus Exámenes: col-span-6 (bg-white, full width)
Data
| Dato | Fuente | Tipo |
|---|---|---|
| Health Score (0-100) | Engine: composite score | Usuario.health_score |
| Score sparkline | Engine: histórico | DataPoint[] últimos 7 mediciones |
| Edad biológica | Engine: PhenoAge | Usuario.biological_age |
| Biomarcadores (4 destacados) | Engine: más recientes | Biomarcador[] top 4 por cambio |
| Adherencia | Check-ins: porcentaje | Ciclo.adherencia_porcentaje |
| Escenario actual | Engine: proyección | Escenario con mayor probabilidad |
| Ciclo actual | Ciclo activo | Ciclo.numero_ciclo, Ciclo.dias_restantes |
States
Loading (primera vez):
Skeleton shimmer 500ms sobre bento grid completo.
6 bloques con border-radius: 16px, bg-neutral-200/60.
Shimmer gradiente 90deg con animación infinite.
Loading (subsecuente):
Skeleton shimmer 260ms. Cards aparecen staggered (fadeInUp 0.2s entre elementos).
Normal (con datos):
Todos los cards visibles con datos reales.
Hero card bg-[#0f2fc7] con score prominente.
Empty (sin datos – pre-baseline):
Aun no tenemos datos de tu salud
Completa tu primer ciclo de exámenes
para ver tu progreso aquí.
[AGENDAR MIS EXAMENES]
Error:
No pudimos cargar tus datos
Revisa tu conexión e intenta de nuevo.
[REINTENTAR]
Interactions
| Elemento | Acción | Destino |
|---|---|---|
| Hero Health Score card | Click/tap | /paciente/progreso/nivel-salud |
| Card Edad Biológica | Click/tap | /paciente/progreso/edad-biológica |
| Card Tu Proyección | Click/tap | /paciente/progreso/escenarios |
| Card Adherencia | Click/tap | /paciente/progreso/adherencia |
| Card Mejoras Recientes | Click/tap | /paciente/resultados |
| Tus Exámenes “Ver todos” | Click/tap | /paciente/resultados |
| Biomarcador individual | Click/tap | Bottom sheet detalle biomarcador |
| Flecha atrás | Click/tap | /paciente (Dashboard) |
Copy
| Elemento | Texto |
|---|---|
| Título página | “Mi Progreso” |
| Subtitulo | “Ciclo {n} de {total} – {días} días restantes” |
| Hero label | “Tu nivel de salud” |
| Score format | “{score} /100” |
| Meta label | “Meta” |
| Sparkline stats | “Inicio: {n} Actual: {n} Diferencia: +{n}” |
| Hero CTA | “Ver detalles” |
| Edad bio label | “Edad Biológica” |
| Edad bio positive | “Eres más joven que tu edad real” |
| Proyección label | “Tu Proyección” |
| Adherencia label | “Tu Adherencia” |
| Exámenes label | “Tus Exámenes” |
| Exámenes CTA | “Ver todos” |
Screen 2: Nivel de Salud Detalle
Ruta: /paciente/progreso/nivel-salud
Propósito: Desglose transparente del Health Score. “Que compone mi score y como evoluciona?”
Nivel: L2 (Contexto)
ASCII Wireframe
HEADER (sticky)
< Progreso Nivel de Salud
HERO SCORE
85 Bueno
/100
(ring gauge, animated)
0 Riesgo Regular Bueno [85] Óptimo 100
+7 pts vs ciclo anterior
COMO SE CALCULA
Biomarcadores 38/40 pts
Metabolismo, lipidos, vitaminas, inflamación
Tu progreso 21/25 pts
Adherencia a suplementos y hábitos
Dispositivos 17/20 pts
Sueño, actividad, HRV
Estilo de vida 9/15 pts
Nutrición, estrés, bienestar
EVOLUCION (gráfico de línea)
85
80
78
68
Inicio Ciclo 1 Mitad Cierre Ciclo 2
COMPARACION VS CICLO ANTERIOR
Ciclo 1: 78/100 Ciclo 2: 85/100 (+7)
Lo que mejoro:
+ Biomarcadores: +5 pts (glucosa y colesterol)
+ Dispositivos: +2 pts (mejor sueño)
Donde enfocarte:
~ Estilo de vida: 9/15 (nutrición puede mejorar)
[HABLAR CON HEALTH COACH] bg-[#0f2fc7]
Desglose por Dominio
El Health Score se descompone en 4 categorías ponderadas (transparencia total – diferenciador vs competencia, ver 01-dashboard-health-scores):
| Categoría | Peso | Descripción | Biomarcadores Incluidos |
|---|---|---|---|
| Biomarcadores | 40% | Resultados de laboratorio | Glucosa, HbA1c, colesterol, Vit D, trigliceridos, etc. |
| Tu progreso | 25% | Adherencia al plan | Suplementos tomados, hábitos completados |
| Dispositivos | 20% | Datos de wearables | HRV, sueño, actividad, HR reposo |
| Estilo de vida | 15% | Auto-reportado + check-ins | Nutrición, estrés, bienestar |
Cada categoría muestra: nombre, score parcial/máximo, barra de progreso, descripción corta.
Rangos del Score
| Rango | Min | Max | Color | Descripción |
|---|---|---|---|---|
| Riesgo | 0 | 40 | bg-neutral-300 |
Necesitas atención médica |
| Regular | 41 | 60 | bg-neutral-200 |
Hay espacio para mejorar |
| Bueno | 61 | 80 | bg-[#0f2fc7]/40 |
Vas por buen camino |
| Óptimo | 81 | 100 | bg-[#0f2fc7] |
Excelente estado de salud |
Data
| Dato | Fuente |
|---|---|
| Score actual (0-100) | Usuario.health_score |
| Categoría rango | Calculado del score |
| 4 categorías con peso | Engine: desglose |
| Evolución histórica | DataPoint[] por ciclo |
| Comparación ciclo anterior | Ciclo.score_inicial vs Ciclo.score_final |
States
Loading: Skeleton con ring gauge placeholder + 4 barras shimmer.
Normal: Score con ring gauge animado, categorías con barras.
Sin ciclo anterior: Sección “Comparación” muestra “Completa tu primer ciclo para ver comparaciones.”
Error: “No pudimos cargar tu nivel de salud. [REINTENTAR]”
Copy
| Elemento | Texto |
|---|---|
| Título | “Nivel de Salud” |
| Score label | “{score}/100” |
| Score rango | “Riesgo” / “Regular” / “Bueno” / “Óptimo” |
| Desglose título | “Como se calcula” |
| Evolución título | “Evolución” |
| Comparación título | “Comparación vs ciclo anterior” |
| Lo que mejoro | “Lo que mejoro:” |
| Donde enfocarte | “Donde enfocarte:” |
| CTA | “Hablar con Health Coach” |
| Delta positivo | “+{n} pts vs ciclo anterior” |
Screen 3: Edad Biológica
Ruta: /paciente/progreso/edad-biológica
Propósito: Visualizar la diferencia entre edad biológica y cronológica. Motivar con el delta.
Nivel: L2 (Contexto)
ASCII Wireframe
HEADER (sticky)
< Progreso Edad Biologica
HERO: COMPARACION DE EDADES
Edad cronologica Edad biológica
45 > 41.2
años años
(gris, grande) (línea azul) (azul, grande)
3.8 años más joven
(badge emerald, prominente)
EVOLUCION (gráfico de 2 líneas)
46 (cronologica, gris)
45
44
43
42
41 (biológica, azul)
Inicio Ciclo 1 Ciclo 2 Hoy
(área entre líneas sombreada azul claro)
QUE TE REJUVENECE (factores positivos)
Glucosa controlada -1.2 años
Vitamina D óptima -0.8 años
Ejercicio regular -0.6 años
Omega-3 óptimo -0.5 años
Inflamación baja -0.4 años
QUE TE ENVEJECE (factores negativos)
Sueño deficiente +0.5 años
Estrés elevado +0.3 años
BALANCE NETO
Factores positivos: -3.5 años
Factores negativos: +0.8 años
Balance total: -2.7 años (redondeado a -3.8 con
ajustes de PhenoAge)
"Si continúas así, en 1 año podrías llegar a 39.5"
COMO SE CALCULA
Tu edad biológica se calcula usando PhenoAge, un
modelo cientificamente validado que usa 9 biomarcadores
de tu sangre para estimar la edad real de tu cuerpo.
No es una predicción, es una foto de hoy.
Data
| Dato | Fuente |
|---|---|
| Edad cronológica | Usuario.fecha_nacimiento (calculado) |
| Edad biológica | Engine: PhenoAge sobre 9 biomarcadores |
| Delta | biológica - cronológica |
| Factores positivos | Engine: desglose por biomarcador/hábito |
| Factores negativos | Engine: desglose por biomarcador/hábito |
| Evolución | DataPoint[] por ciclo (biológica vs cronológica) |
| Proyección 1 año | Engine: extrapolación lineal |
PhenoAge Simplificado
Los 9 biomarcadores usados (modelo Levine et al.):
- Albumina
- Creatinina
- Glucosa
- Proteína C-reactiva (PCR)
- Volumen corpuscular medio (VCM)
- Conteo de linfocitos
- Fosfatasa alcalina
- Conteo de globulos blancos
- Distribución de globulos rojos (RDW)
En la UI solo mostramos el resultado y los factores que el usuario puede influenciar. El modelo científico está en la explicación colapsable.
States
Loading: Skeleton con 2 números grandes placeholder + barras shimmer.
Normal: Edades con delta prominente, gráfico de 2 líneas, factores.
Positivo (biológica < cronológica): Badge emerald “X años más joven”.
Negativo (biológica > cronológica): Badge azul ADEN “Trabajemos para mejorar esto”. Sin rojo alarmante.
Sin datos previos: Gráfico muestra solo punto “Hoy”. “Completa más ciclos para ver tu evolución.”
Error: “No pudimos calcular tu edad biológica. [REINTENTAR]”
Copy
| Elemento | Texto |
|---|---|
| Título | “Edad Biológica” |
| Label cronológica | “Edad cronológica” |
| Label biológica | “Edad biológica” |
| Delta positivo | “{n} años más joven” |
| Delta negativo | “Trabajemos juntos para mejorar esto” |
| Factores positivos | “Que te rejuvenece” |
| Factores negativos | “Que te envejece” |
| Proyección | “Si continúas así, en 1 año podrías llegar a {n}” |
| Explicación | “Tu edad biológica se calcula usando PhenoAge…” |
Screen 4: Tus Exámenes
Ruta: /paciente/resultados
Propósito: Lista completa de biomarcadores. Filtrable por estado/categoría. Punto de entrada al detalle.
Nivel: L2 (Contexto)
ASCII Wireframe
HEADER (sticky)
< Progreso Tus Exámenes
RESUMEN RAPIDO
38 óptimos 6 para revisar 1 atención
(emerald) (azul ADEN) (rojo)
FILTROS
[Todos] [Optimos] [Revisar] [Atención] Buscar...
Categoría: [Todas] [Sangre] [Higado] [Rinones] [...]
LISTA DE BIOMARCADORES
Glucosa 98 mg/dL -17
[] ~~/\ óptimo
70 98 100 125 (sparkline)
HbA1c 5.4 % -0.8
[] ~~\ óptimo
4.0 5.4 5.7 6.5 (sparkline)
Colesterol total 195 mg/dL -25
[] ~/\ revisar
100 150 200 240 (sparkline)
... (scrollable, max 45 biomarcadores)
Ultima actualización: 15 Oct 2025 · Ciclo 2
Cada Biomarcador en Lista
Cada fila muestra:
- Nombre – en español colombiano (nunca código LOINC)
- Valor actual + unidad
- Cambio vs medición anterior (con flecha)
- Estado – dot de color (emerald/azul ADEN/rojo)
- Barra horizontal de rango – 3 zonas con punto del valor actual (ver sección Visualización 3 Zonas)
- Sparkline – tendencia últimos 90 días (mini gráfico en 40x16px)
Filtros
| Filtro | Opciones | Comportamiento |
|---|---|---|
| Estado | Todos, Optimos, Revisar, Atención | Toggle buttons, solo 1 activo |
| Categoría | Todas, Sangre, Higado, Rinones, Corazón, Inflamación, Hormonal | Dropdown o chips horizontales scroll |
| Búsqueda | Texto libre | Filtra por nombre del biomarcador |
| Fecha | Ciclo 1, Ciclo 2, Todos | Dropdown |
Data
| Dato | Fuente |
|---|---|
| Lista de biomarcadores | Biomarcador[] del usuario |
| Valor, unidad, estado | Biomarcador.valor, .unidad, .estado |
| Rango óptimo/aceptable | Biomarcador.rango_minimo_optimo, etc. |
| Cambio vs anterior | Biomarcador.cambio_porcentaje_vs_anterior |
| Sparkline data | Biomarcador.valores_ultimos_90_dias |
| Conteo por estado | Calculado: count by .estado |
States
Loading: 5 filas skeleton con shimmer (barra + texto placeholder).
Normal: Lista completa con filtros activos.
Filtrado (0 resultados): “No hay biomarcadores con estado ‘{filtro}’. Eso es buena señal.”
Sin exámenes: “Aun no tienes exámenes cargados. [AGENDAR MIS EXAMENES]”
Error: “No pudimos cargar tus exámenes. [REINTENTAR]”
Interactions
| Elemento | Acción | Destino |
|---|---|---|
| Fila de biomarcador | Tap/click | Bottom sheet: Detalle Biomarcador (Screen 5) |
| Filtro estado | Toggle | Filtra lista in-place (animación fade) |
| Filtro categoría | Selección | Filtra lista in-place |
| Búsqueda | Escribir | Filtra en tiempo real (debounce 300ms) |
Copy
| Elemento | Texto |
|---|---|
| Título | “Tus Exámenes” |
| Resumen | “{n} óptimos {n} para revisar {n} atención” |
| Cambio positivo | “-{n} {unidad}” (con flecha verde si es bueno) |
| Cambio negativo | “+{n} {unidad}” (con flecha contextual) |
| Sin resultados | “No hay biomarcadores con estado ‘{filtro}’. Eso es buena señal.” |
| Fecha actualización | “Última actualización: {fecha} – Ciclo {n}” |
Screen 5: Detalle Biomarcador (Bottom Sheet)
Ruta: Bottom sheet overlay sobre Tus Exámenes o cualquier vista con biomarcador
Propósito: Deep dive en un biomarcador individual. “Que significa esto y que hago?”
Nivel: L3 (Profundidad)
Patrón: Readiness Levels (ver dashboard ADDENDUM)
ASCII Wireframe
(drag handle)
Glucosa en Ayunas
Último valor: 98 mg/dL · 15 Oct 2025
BARRA HORIZONTAL DE RANGO (3 zonas)
OPTIMO REVISAR ATENCION
[]
70 98 100 125
^
TU
Harm anchor: >125 mg/dL
(donde empieza preocupación clínica)
VERDE
OPTIMO: 70 - 100 mg/dL
Tu glucosa está dentro del rango ideal.
Tu cuerpo procesa bien el azucar.
Manten lo que haces.
AZUL
REVISAR: 100 - 125 mg/dL
Ligeramente elevado. Tu cuerpo
necesita más esfuerzo para procesar
azucar. Veamos juntos.
ROJO SUAVE
ATENCION: >125 mg/dL
Fuera del rango saludable. Tu médico
puede ayudarte con un plan para
mejorar esto.
HISTORICO (90 días)
115
110
105
100
98
95
Jul Ago Sep Oct Nov
(zona óptima sombreada en verde claro)
RCV (Cambio real vs variación)
Cambio: -17 mg/dL (-15%)
Umbral RCV: 12%
Veredicto: CAMBIO REAL
"Esta mejora es real, no variación
normal de tu cuerpo."
QUE SIGNIFICA
La glucosa es el azucar en tu sangre. Tu
cuerpo la usa como energía. Cuando está
alta por mucho tiempo, puede danar vasos
sanguineos y organos. La tuya está bien.
QUE PUEDES HACER
1. Manten tu ejercicio actual (150 min/sem)
2. Limita azucares procesados a <25g/dia
3. Sigue tomando tus suplementos
[HABLAR CON HEALTH COACH] bg-[#0f2fc7]
Visualización de 3 Zonas (Barra Horizontal)
Patrón validado por InsideTracker y research de health literacy. La barra horizontal con 3 zonas comunica estado sin requerir interpretación de números.
Estructura de la barra:
[ OPTIMO ][ REVISAR ][ ATENCION ]
emerald azul ADEN rojo suave
#10B981 #0f2fc7/40 #ef4444/40
= punto del valor actual del usuario (dot 8px, color del estado)
Reglas de la barra:
- 3 zonas, no 4 – Simplifica decisión. “Óptimo” (no hacer nada), “Revisar” (monitorear), “Atención” (actuar).
- Zonas personalizadas por edad, sexo y nivel de actividad. No rangos poblacionales genericos.
- Harm anchor – Línea punteada vertical donde empieza la preocupación clínica real. Pone en contexto que “revisar” no es “peligro”.
- Color nunca como único indicador – Siempre acompanado de texto + icono (accesibilidad).
- NO amarillo – Usar azul ADEN
#0f2fc7para “revisar” (regla del design system).
Specs de renderizado:
.range-bar {
height: 8px;
border-radius: 4px;
display: flex;
overflow: hidden;
}
.zone-optimal { background: #10B981; flex: optimal_range_width; }
.zone-review { background: rgba(15, 47, 199, 0.4); flex: review_range_width; }
.zone-attention { background: rgba(239, 68, 68, 0.4); flex: attention_range_width; }
.value-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid white;
position: absolute;
left: calculated_position;
/* color matches the zone it's in */
}
RCV (Reference Change Value)
El RCV determina si un cambio entre mediciones es clínicamente significativo o solo variación biológica normal:
| Biomarcador | RCV Típico | Ejemplo |
|---|---|---|
| Glucosa | 12% | Cambio de 115 a 98 (-15%) = REAL |
| Colesterol total | 11% | Cambio de 220 a 195 (-11%) = REAL (borderline) |
| HbA1c | 8% | Cambio de 6.2 a 5.4 (-13%) = REAL |
| Vitamina D | 25% | Cambio de 22 a 42 (+91%) = REAL |
En la UI, el RCV se presenta como:
- “Esta mejora es real” (cambio > RCV, positivo)
- “Este cambio es real y necesita atención” (cambio > RCV, negativo)
- “Este cambio está dentro de la variación normal” (cambio < RCV)
Data
| Dato | Fuente |
|---|---|
| Nombre, valor, unidad | Biomarcador.nombre, .valor, .unidad |
| Rangos 3 zonas | Biomarcador.rango_minimo_optimo, .rango_maximo_optimo, .rango_minimo_aceptable, .rango_maximo_aceptable |
| Estado | Biomarcador.estado (óptimo/revisar/atención) |
| Histórico 90 días | Biomarcador.valores_ultimos_90_dias |
| RCV | Engine: cálculo sobre cambio vs threshold |
| Explicación | Content DB: texto por tipo de biomarcador |
| Acciones | Engine: recomendaciones personalizadas |
States
Loading: Skeleton del bottom sheet con shimmer.
Normal (óptimo): Zona verde resaltada, copy positivo.
Normal (revisar): Zona azul resaltada, copy orientado a acción.
Normal (atención): Zona roja resaltada, copy urgente pero sin pánico. CTA a Health Coach prominente.
Sin histórico: Gráfico muestra solo 1 punto. “Después de tu próximo examen veremos la tendencia.”
Error: Bottom sheet muestra “No pudimos cargar el detalle. [REINTENTAR]”
Copy: “Que Significa” (Grado 5 de Lectura)
| Biomarcador | Copy |
|---|---|
| Glucosa | “La glucosa es el azucar en tu sangre. Tu cuerpo la usa como energía. Cuando está alta por mucho tiempo, puede danar vasos sanguineos y organos.” |
| HbA1c | “La HbA1c muestra tu promedio de azucar en los últimos 3 meses. Es como una foto de como tu cuerpo maneja el azucar a largo plazo.” |
| Colesterol total | “El colesterol es una grasa que tu cuerpo necesita, pero cuando hay demasiada puede acumularse en tus arterias y dificultar el flujo de sangre.” |
| Vitamina D | “La vitamina D ayuda a tus huesos, tu sistema inmune y tu estado de animo. La mayoría de las personas en Colombia no reciben suficiente del sol.” |
Interactions
| Elemento | Acción | Resultado |
|---|---|---|
| Drag handle | Arrastrar hacia abajo | Cerrar bottom sheet |
| Zona (óptimo/revisar/atención) | Tap | Resaltar zona y mostrar explicación |
| Gráfico histórico | Hover/tap punto | Tooltip con fecha + valor |
| “Hablar con Health Coach” | Tap | Abrir chat con contexto del biomarcador |
| Área fuera del sheet | Tap | Cerrar bottom sheet |
Screen 6: Proyecciones
Ruta: /paciente/progreso/escenarios
Propósito: Mostrar escenarios futuros basados en el comportamiento actual. Motivar sin asustar.
Nivel: L2 (Contexto)
ASCII Wireframe
HEADER (sticky)
< Progreso Proyecciones
TU ESCENARIO ACTUAL: BUENO (badge, 60% probabilidad)
"Si mantienes tu ritmo actual"
GRAFICO DE PROYECCION (5 años)
95 (óptimo, azul)
88 (bueno, emerald)
85 (hoy)
65 (regular, gris)
45 (riesgo, rojo punteado)
Hoy 1a 2a 3a 4a 5a
(área de confianza sombreada alrededor de cada línea)
OPTIMO BUENO REGULAR
(actual)
Score: 95 Score: 88 Score: 65
Edad: 38 Edad: 40 Edad: 48
(-7 años) (-5 años) (+3 años)
CV: <5% CV: 8% CV: 15%
Prob: 25% Prob: 60% Prob: 12%
[Como llegar [Mantener [Evitar este
aquí] ritmo] camino]
RIESGO (card minimizada, borde punteado)
Si abandonas el tratamiento: Score 45, Edad +10 años
Probabilidad: 3% [Prevenir]
QUE PUEDES MEJORAR PARA SUBIR DE ESCENARIO
1. Mejorar sueño a 7+ horas (actualmente 5.5h)
2. Aumentar ejercicio a 150 min/semana (actualmente 80)
3. Mantener cumplimiento >90%
[VER MI PLAN]
4 Escenarios
| Escenario | Score Proyectado | Edad Biológica | Probabilidad | Color | Card Style |
|---|---|---|---|---|---|
| Óptimo | 95 | 38 (-7 años) | 25% | bg-[#0f2fc7] |
Full card |
| Bueno | 88 | 40 (-5 años) | 60% | bg-emerald-50 |
Full card, highlighted |
| Regular | 65 | 48 (+3 años) | 12% | bg-neutral-100 |
Full card |
| Riesgo | 45 | 55 (+10 años) | 3% | bg-white border-dashed border-red-200 |
Minimized |
Gráfico de Proyección
El gráfico muestra 4 líneas con:
- Intervalo de confianza – área sombreada alrededor de cada línea (mas ancho a mayor distancia temporal)
- Punto “Hoy” marcado prominente
- Eje X: Hoy, 1a, 2a, 3a, 4a, 5a
- Eje Y: Health Score (0-100)
- Línea del escenario actual resaltada (mas gruesa, color solido)
- Otras líneas más tenues (opacity 0.5)
Data
| Dato | Fuente |
|---|---|
| 4 escenarios con métricas | Engine: simulación Monte Carlo simplificada |
| Proyección por escenario (10 puntos) | Engine: array de scores proyectados |
| Probabilidad por escenario | Engine: basado en adherencia actual |
| Mejoras sugeridas | Engine: gap analysis vs escenario óptimo |
| Requisitos por escenario | Engine: condiciones necesarias |
States
Loading: Skeleton con gráfico placeholder + 3 cards shimmer.
Normal: 4 escenarios, escenario actual resaltado.
Sin datos suficientes: “Necesitamos al menos 30 días de datos para generar proyecciones. Llevas {n} días.”
Error: “No pudimos calcular tus proyecciones. [REINTENTAR]”
Interactions
| Elemento | Acción | Resultado |
|---|---|---|
| Card escenario | Tap | Resaltar línea en gráfico, expandir detalles |
| Gráfico línea | Hover | Tooltip con score proyectado por año |
| “Como llegar aquí” | Tap | Scroll a mejoras sugeridas o ir a Mi Plan |
| “Evitar este camino” | Tap | Mostrar que acciones previenen este escenario |
| “Ver mi plan” | Tap | Navegar a /paciente/plan |
Copy
| Elemento | Texto |
|---|---|
| Título | “Proyecciones” |
| Escenario actual label | “Tu escenario actual: {nombre}” |
| Óptimo desc | “Si mejoras sueño y ejercicio:” |
| Bueno desc | “Si mantienes tu ritmo actual:” |
| Regular desc | “Si reduces cumplimiento:” |
| Riesgo desc | “Si abandonas el tratamiento:” |
| Mejoras título | “Que puedes mejorar para subir de escenario” |
| CTA óptimo | “Como llegar aquí” |
| CTA bueno | “Mantener ritmo” |
| CTA regular | “Evitar este camino” |
| CTA riesgo | “Prevenir” |
Screen 7: Mi Trayectoria
Ruta: /paciente/trayectoria
Propósito: Vista cronológica del viaje de salud. Cada ciclo con hitos, comparaciones y eventos.
Nivel: L2/L3 (Contexto y Profundidad)
ASCII Wireframe
HEADER
< Inicio Tu Trayectoria de Salud
Proyección a 10 años basada en tu perfil actual
HERO: ESTADO ACTUAL bg-[#0f2fc7]
Tu estado actual
72 / 100 puntos (ring gauge)
Edad biológica: 48 años | Edad cronologica: 45 años
GRAFICO PROYECCION 10 ANOS
95 (sugerido)
88 (bueno)
75 (moderado)
72 (hoy)
55 (crítico)
Hoy 1a 2a 3a 4a 5a 6a 7a 8a 10a
ESCENARIOS (4 cards)
Sugerido bg-blue Bueno bg-emerald
Score: 95 Score: 88
Edad: -8 años Edad: -4 años
Requisitos... Requisitos...
Moderado bg-neutral Crítico bg-white
Score: 75 Score: 55
Edad: 0 años Edad: +5 años
Requisitos... border-dashed-red
RECOMENDACIONES PRIORITARIAS
1. Tomar suplementos diariamente
Actual: 65% Meta: 90% Impacto: +8 puntos
2. Aumentar actividad fisica
Actual: 2 días/sem Meta: 4 días/sem Impacto: +5
TIMELINE DE CICLOS (vertical)
HOY Ciclo 2 en progreso
Score: 72/100
23 días restantes
Oct 2025 Cierre Ciclo 1
Score: 68 -> 78 (+10)
45 exámenes procesados
Glucosa normalizada, Vit D óptima
Jul 2025 Inicio Ciclo 1 (Baseline)
Score: 68
45 exámenes iniciales
Glucosa elevada, Vit D baja
Jun 2025 Registro y Onboarding
Data
| Dato | Fuente |
|---|---|
| Ciclos historicos | Ciclo[] del usuario |
| Score por ciclo (inicio/cierre) | Ciclo.score_inicial, .score_final |
| Exámenes por ciclo | Biomarcador[] snapshot dia 1 y 90 |
| Eventos (labs, consultas) | Timeline construida de Ciclo + Labs |
| Proyección 10 años | Engine: 4 escenarios con array de scores |
| Recomendaciones | Engine: gap analysis |
States
Loading: Skeleton con hero card + timeline placeholder.
Normal: Hero + gráfico + escenarios + timeline completo.
1 solo ciclo: Timeline corto (2 nodos). Gráfico tiene 2 puntos. “Tu historia apenas empieza.”
Sin ciclos: “Completa tu primer ciclo para ver tu trayectoria. [AGENDAR EXAMENES]”
Error: “No pudimos cargar tu trayectoria. [REINTENTAR]”
Timeline Events
| Tipo | Icono | Descripción |
|---|---|---|
| Inicio ciclo | Círculo azul ADEN | “Inicio Ciclo {n}” + score baseline |
| Cierre ciclo | Círculo emerald | “Cierre Ciclo {n}” + score delta |
| Lab cargado | Icono documento | “{n} exámenes procesados” + highlights |
| Consulta | Icono calendario | “Consulta con Dr. {nombre}” |
| Cambio de plan | Icono ajustes | “Plan ajustado: {razón}” |
| Alerta crítica | Círculo rojo | “Alerta: {título}” + resolución |
Interactions
| Elemento | Acción | Resultado |
|---|---|---|
| Gráfico línea | Hover | Tooltip con score por año |
| Card escenario | Tap | Resaltar línea en gráfico |
| Nodo timeline | Tap | Expandir detalle del evento |
| “Ver exámenes” en nodo | Tap | Ir a exámenes de ese ciclo |
Empty State: Nuevo Usuario (Sin Datos)
Cuando un usuario llega a Progreso pero aun no tiene datos post-baseline:
HEADER (sticky)
< Inicio Mi Progreso
(ilustración: gráfico vacio
con línea punteada subiendo)
Aquí veras tu progreso
Cuando tengamos tus primeros
exámenes, calcularemos tu nivel
de salud, edad biológica y
proyecciones personalizadas.
Mientras tanto, puedes:
[AGENDAR MIS EXAMENES] bg-[#0f2fc7]
[VER COMO FUNCIONA] text-[#0f2fc7]
Copy:
- Título: “Aquí veras tu progreso”
- Descripción: “Cuando tengamos tus primeros exámenes, calcularemos tu nivel de salud, edad biológica y proyecciones personalizadas.”
- CTA primario: “Agendar mis exámenes”
- CTA secundario: “Ver como funciona”
Interaction Patterns (Globales)
Card Hover/Tap
.progress-card {
transition: all 150ms ease-out;
border: 1px solid #e5e5e5;
border-radius: 16px;
}
.progress-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
border-color: #d4d4d4;
}
.progress-card:active {
transform: translateY(0px);
}
Sparkline Interaction
Hover sobre sparkline:
-> Tooltip con fecha + valor
-> Timeline = "Inicio" hasta "Hoy"
-> Click -> Vista detallada del biomarcador
Bottom Sheet (Detalle Biomarcador)
Apertura: slide-up 200ms ease-out
Secciones: fade-in staggered 180ms
Cierre: drag down 150ms o tap fuera
Max height: 85vh (scrollable internamente)
Page Transitions
Entrada a sub-página: fade-in 260ms + translateY(20px -> 0)
Skeleton: shimmer 260-500ms (primera carga más lento)
Cards: staggered fadeInUp 0.2s entre elementos
Key Metrics
| Métrica | Meta | Pantalla |
|---|---|---|
| Progreso Overview load time | <1.5s | Overview |
| Time to understand score | <5s | Overview |
| Click-through a Nivel de Salud | >25% | Overview -> Nivel |
| Click-through a Edad Biológica | >15% | Overview -> Edad |
| Click-through a Exámenes | >20% | Overview -> Exámenes |
| Biomarcador detail open rate | >30% | Exámenes -> Detalle |
| Health Coach activation from detalle | >10% | Detalle -> HC |
| Scroll depth en Proyecciones | >60% | Proyecciones |
| Return to Progreso (weekly) | >3x | Overview |
Implementation Notes
- Todas las cards son lazy-loaded excepto el hero Health Score (critical path)
- Sparklines usan SVG inline (no libreria pesada) – patrón del prototipo existente
- Bottom sheet usa CSS transform para animación fluida (no JS layout)
- Gráficos de línea y proyección usan Recharts o SVG inline con optimized rendering
- Responsive: 1 col (mobile), 2-3 (tablet), 6 (desktop bento grid)
- Header sticky con backdrop blur en todas las sub-páginas
- Cada card tiene error boundary independiente
- Analytics: track engagement per card, scroll depth, time on screen
- Filtros en Exámenes persisten en URL params (shareable state)
- Bottom sheet pre-carga datos del biomarcador al hover (prefetch 200ms delay)
Cross-references: Addendums de Investigación Refero
Los siguientes addendums en otros flujos afectan pantallas de Progreso:
-
Readiness Level Bottom Sheet — Cuando el usuario toca un biomarcador en Screen 4 (Tus Exámenes) o en Screen 7 (Timeline), se abre el bottom sheet educativo con barra visual 3 zonas y acciones sugeridas. Spec: dashboard addendum. Timings ya alineados con este archivo (slide-up 200ms, stagger 180ms).
-
Reporte 90 Días (Before/After Visual) — Cuando el usuario toca un nodo “Cierre Ciclo” en Screen 7 (Mi Trayectoria), se accede a la experiencia de 3 pantallas del reporte: hero comparativo (Día 1 vs Día 90), timeline de biomarcadores con dots de colores, y pantalla de decisión (Ciclo 2 / Pausar / Médico). Spec completa: ciclo-90dias addendum. Animaciones del score count-up y celebration card en interactions addendum.
-
Health Coach Keyword Chips — Cuando Screen 4 (Detalle Biomarcador) muestra CTA “Hablar con Health Coach”, las respuestas del coach usan chips semánticos interactivos. Spec: consulta-médica addendum y health-coach.
Próximo: ciclo-90dias – Lifecycle Completo del Ciclo