Design
P1
Flujos de Usuario
Para qué

Rutas completas del usuario a través del producto, incluyendo happy paths, error paths y priorización.

Audiencia

Diseño, ingeniería y QA.

Flow: Laboratorios & Resultados

De la Foto al Entendimiento

JTBD: “Cuando cargo mis exámenes, quiero ver que significa todo sin esperar”
Actor: Usuario con ciclo activo (cualquier fase)
Trigger: Notificación “resultados listos”, tab Progreso > Tus Exámenes, o upload manual
Priority: P0 (Critical) — Core del producto
Duration: Upload 30s + procesamiento 30min-2h + revisión 3-5 min


Happy Path: Upload y Revisión de Resultados

Flujo: Upload y revision de resultados de laboratorio


Happy Path: Comparación Entre Mediciones

Flujo: Comparacion entre mediciones


Error Paths

Path 1: Foto ilegible / formato incorrecto

Flujo de error: Foto ilegible o formato incorrecto

Path 2: Procesamiento tarda más de 4 horas

Flujo de error: Procesamiento tarda mas de 4 horas

Path 3: Valor extremo detectado (validación 3-sigma)

Flujo de error: Valor extremo detectado con validacion 3-sigma

Path 4: Sin conexión al subir

Flujo de error: Sin conexion al subir examenes


Key Moments

Moment 1: Upload — Cargar Exámenes

Propósito: Subir resultados de lab con mínima fricción


 ← Atrás                  Cargar Exámenes    
                                             
    
                                           
           (ícono documento/cámara)        
                                           
      Sube tus resultados de               
      laboratorio                          
                                           
      Foto, PDF o imagen escaneada         
                                           
    
                                             
  [ TOMAR FOTO]                           
  bg-[#0f2fc7] text-white                   
                                             
  [ SUBIR ARCHIVO]                        
  border-[#0f2fc7] text-[#0f2fc7]           
                                             
        
  Formatos: PDF, JPG, PNG                    
  Tamaño máximo: 20 MB                      
  Procesamiento: 30 min a 2 horas           
                                             
  ¿No tienes el PDF? Pídelo a tu            
  laboratorio. Generalmente lo envían        
  por email.                                 

Validaciones:

  • Formato: PDF, JPG, PNG, HEIC
  • Tamaño: max 20MB
  • Calidad: OCR pre-check (si foto muy oscura/borrosa, warning antes de enviar)

Moment 2: Procesamiento — Estado de Espera

Propósito: Mantener informado al usuario mientras OCR procesa


 ← Atrás                  Tus Exámenes       
                                             
   EN PROCESO   
    Procesando tus resultados            
                                           
    60%               
                                           
   Subido: hoy, 10:30 AM                  
   Tiempo estimado: ~45 minutos            
                                           
   Te notificaremos cuando estén listos.   
   Puedes cerrar la app.                   
    
                                             
  RESULTADOS ANTERIORES                     
        
                                             
   Enero 15, 2026  →   
   72 biomarcadores · Ciclo 1             
   68 óptimos · 3 revisar · 1 atención   
    


Moment 3: Lista de Resultados

Propósito: Ver todos los biomarcadores de una medición, filtrar y priorizar


 ← Progreso                  Tus Exámenes    
                                             
  Abril 2, 2026 · 72 biomarcadores          
                                             
  FILTROS (pills):                           
  [Todos] [Atención 1] [Revisar 3] [Óptimo]
                                             
  POR CATEGORÍA                             
        
                                             
   Sangre (12)                             
    
   Hemoglobina           14.2 g/dL       
     Óptimo                    
    
   Glucosa                126 mg/dL      
     Revisar  ↑ +8%        
    
   Colesterol LDL         245 mg/dL      
     Atención  ↑ +19%    
   RCV: Cambio real detectado             
    
                                             
   Hígado (8)                              
   Tiroides (4)                            
   Riñones (6)                             
   Inflamación (5)                         
                                             
           
  [ DESCARGAR PDF]                        
  [ COMPARAR CON ANTERIOR]               

Filtros:

  • Por estado: Todos, Atención, Revisar, Óptimo
  • Por categoría: Sangre, Higado, Tiroides, etc.
  • Por fecha: dropdown con mediciones disponibles

Indicadores visuales:

  • Barra horizontal 3 zonas (rojo | azul | verde) con marcador de valor
  • Flecha tendencia: subiendo, estable, bajando
  • Badge “RCV” cuando cambio real detectado
  • Porcentaje de cambio vs medición anterior

Interacción: Tap en cualquier biomarcador de está lista abre el Readiness Level bottom sheet con explicación educativa, barra de rango visual, y acciones sugeridas. Spec completa en dashboard addendum. Colores compartidos: #10B981 (óptimo), #3B82F6 (revisar), #F87171 (atención).


Moment 4: Detalle de Biomarcador Individual

Propósito: Entender un valor en profundidad


 ← Tus Exámenes            Colesterol LDL    
                                             
  VALOR ACTUAL                              
    
            245 mg/dL                      
            Estado: Atención               
                                           
     óptimo  revisar  !!  
    0    100    160    200    240    300    
                                 245      
                                           
    Rango óptimo: < 160 mg/dL             
    Tu valor anterior: 206 mg/dL          
    
                                             
  HARM ANCHOR                               
        
  Colesterol LDL alto aumenta el riesgo     
  cardiovascular. Valores >190 mg/dL        
  duplican el riesgo de infarto en 10 años. 
                                             
  RCV: CAMBIO REAL DETECTADO                
        
    
   El cambio de 206 → 245 (+19%)          
   supera la variación biológica normal    
   (RCV = 15% para este biomarcador).      
                                           
   Esto significa que el cambio es         
   real, no solo fluctuación natural.      
    
                                             
  TENDENCIA (últimos 6 meses)               
        
    
   260                                    
                    ·                     
   220     ·                              
        ·                                 
   180                                    
            
      Oct    Dic    Feb    Abr             
    
                                             
  QUÉ HACER                                 
        
    
   Tu plan incluye Omega-3 (1000mg/día)   
   y ejercicio cardiovascular 3x/semana   
   para ayudar a reducir el LDL.          
                                           
   [Ver mi plan →]                        
   [Preguntar al Health Coach →]          
    
                                             
  [ DESCARGAR ESTE RESULTADO]             

Objects: Biomarcador (valor, unidad, estado, tendencia, rcv_detectado, rango_minimo_optimo, rango_maximo_optimo, valores_ultimos_90_dias)


Moment 5: Explicación RCV (Reference Change Value)

Propósito: Educar al usuario sobre cambio real vs variación biológica


 ← Detalle                ¿Qué es el RCV?    
                                             
  CAMBIO REAL VS VARIACIÓN NATURAL          
        
                                             
  Tu cuerpo varía naturalmente día a día.    
  El colesterol puede subir o bajar un       
  poco sin que signifique nada.              
                                             
  El RCV (Valor de Referencia de Cambio)     
  es el umbral que nos dice: "este cambio    
  es real, no es solo variación".            
                                             
  EJEMPLO CON TUS DATOS                     
        
                                             
    
   Colesterol LDL                          
                                           
   Antes:     206 mg/dL                    
   Ahora:     245 mg/dL                    
   Cambio:    +19%                         
   RCV:       15%                          
                                           
   19% > 15% → Cambio REAL                
                                           
   Si el cambio fuera <15%, lo             
   consideraríamos variación natural.      
    
                                             
  ¿Tienes dudas? [PREGUNTAR AL HEALTH COACH]


Moment 6: Vista Comparación (Antes/Después)

Propósito: Ver evolución entre dos mediciones


 ← Tus Exámenes                  Comparación 
                                             
   Enero 15   vs   Abril 2    
   Ciclo 1             Ciclo 2          
   72 exámenes         72 exámenes      
           
                                             
  RESUMEN                                    
        
  Mejoraron: 45    Estables: 22    Peor: 5  
                                             
  CAMBIOS SIGNIFICATIVOS (RCV)              
        
                                             
    
   Colesterol LDL                          
   206 → 245 mg/dL  ↑ +19%  Peor         
                           
    
   Hemoglobina A1c                         
   6.2 → 5.6 %      ↓ -10%  Mejor        
                                   
    
   Vitamina D                              
   18 → 32 ng/mL    ↑ +78%  Mejor        
                                  
    
                                             
  SIN CAMBIO SIGNIFICATIVO                  
        
   22 biomarcadores estables (ver todos)   
                                             
  [ DESCARGAR COMPARACIÓN PDF]            


Moment 7: Ingreso Manual de Valores

Propósito: Fallback cuando OCR falla o usuario tiene datos sueltos


 ← Atrás                   Ingreso Manual    
                                             
  Ingresa los valores de tus exámenes       
  manualmente. Puedes agregar solo los       
  que tengas disponibles.                    
                                             
   [Buscar biomarcador...]                
                                             
   Sangre                                  
    
   Hemoglobina (g/dL)                      
                               
    14.2                                 
                               
    
   Glucosa (mg/dL)                         
                               
                                         
                               
    
                                             
  Fecha de la medición                       
    
   2 de abril, 2026                    
    
                                             
  [       GUARDAR RESULTADOS       ]        
  bg-[#0f2fc7] text-white                   


States

Pantalla Loading Empty Error Offline
Upload Progress bar durante envío N/A “No pudimos subir el archivo” + retry Cola local, auto-upload al reconectar
Procesamiento Progress bar estimado + porcentaje N/A “Tardando más de lo esperado” + soporte “Te notificaremos cuando estés conectado”
Lista Resultados Skeleton 6 rows con shimmer “Aún no tienes resultados. Carga tus exámenes.” + CTA “No pudimos cargar tus resultados” + retry Cache de última medición
Detalle Biomarcador Skeleton valor + gráfico N/A (siempre hay valor) “No pudimos cargar el detalle” + retry Cache del último valor
Comparación Skeleton tabla “Necesitas al menos 2 mediciones para comparar” “Error al generar comparación” No disponible offline
Ingreso Manual N/A Campos vacíos con placeholder Inline error por campo “Guardaremos cuando vuelvas a conectarte”

Objects Reference

Pantalla Objetos (architecture.md)
Upload Biomarcador (create action)
Lista Resultados Biomarcador (todos, agrupados por tipo)
Detalle Biomarcador (valor, unidad, estado, tendencia, rcv_detectado, rango_*, valores_ultimos_90_dias)
Comparación Biomarcador (compare_with_previous_cycle action), Ciclo (score_inicial, score_final)
RCV Biomarcador.rcv_detectado, Biomarcador.cambio_porcentaje_vs_anterior

Critical Metrics

Métrica Meta Impacto
Upload success rate >95% Core experience
OCR accuracy >98% valores correctos Confianza
Processing time <2h (95th percentile) Satisfacción
Timeout rate (>4h) <1% Soporte
3-sigma confirmation rate >90% confirman correcto Data quality
Results viewed per upload >10 biomarcadores Engagement
PDF download rate >20% Valor percibido
Comparison usage >30% (ciclo 2+) Retención

Implementation Notes

  • OCR pipeline: Foto/PDF > pre-processing (contraste, crop) > OCR engine > validación > flag extremos > store
  • Progress bar: Estimación basada en promedio histórico, no real-time (evitar “stuck at 99%”)
  • Barra de rangos: 3 zonas fijas (óptimo verde, revisar azul, atención rojo) con marcador de valor como pin
  • RCV badge: Solo mostrar cuando rcv_detectado = true, con tooltip educativo
  • Skeleton loading: 300ms shimmer en lista y detalle
  • FadeInUp: 260ms por card en lista, 200ms por sección en detalle
  • PDF generation: Server-side, link de descarga válido por 24h
  • Offline: Cache última medición completa para consulta sin red
  • Copy: Español colombiano (“Tus exámenes” no “Biomarcadores”, “Qué hacer” no “Recomendaciones”)

Existing Prototypes

Archivo Ruta
Laboratorios Hub apps/prototypes/src/pages/paciente/laboratorios/index.astro
Resultados apps/prototypes/src/pages/paciente/resultados/index.astro

Próximo: familia — Family Management Flow