Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Vista General Familia

Familia -> Landing (Post-MVP)

Propósito: Mostrar lista de familiares vinculados con su Health Score individual
JTBD: “Quiero ver de un vistazo como están mis familiares”
Ruta: /paciente/familia
Módulo: PAM-10 (Post-MVP)


Features

# Feature Descripción Prioridad
1 Lista de familiares Cards con nombre, parentesco, Health Score, última actividad P0
2 Health Score por familiar Score 0-100 con color de estado P0
3 Botón agregar CTA para invitar nuevo familiar P0
4 Alertas familiares Badge si un familiar tiene alertas pendientes P1

States

Sin Familia

  • Trigger: No hay familiares vinculados
  • Copy: “Cuida la salud de los tuyos”
  • Subtitulo: “Invita a un familiar para ver sus datos de salud junto a los tuyos.”
  • CTA: [Agregar familiar]

Lista Cargada

  • Visual: Cards por familiar con avatar, nombre, parentesco, score
  • Ejemplo:
    • Carlos Garcia (Esposo) - Health Score 72/100 - Última actividad: Hoy
    • Lucía Garcia (Hija) - Health Score 88/100 - Última actividad: Ayer
  • CTA global: [Agregar familiar]

Cargando

  • Visual: Skeleton shimmer en 2 cards de familiar
  • Copy: “Cargando tu familia…”

Datos Mostrados

Dato Objeto Propiedad Ejemplo
Nombre Familiar nombre Carlos Garcia
Parentesco Familiar parentesco Esposo
Health Score Familiar health_score 72/100
Última actividad Familiar ultima_actividad Hoy
Alertas pendientes Familiar alertas_nuevas 2

Acciones

Acción Tipo Resultado
Tap familiar Navegación Abre dashboard del dependiente
Tap “Agregar familiar” Primaria Abre formulario de invitación
Tap badge alertas Navegación Abre alertas del familiar

  • Origen: Tab Familia en navegación principal
  • Destino tap familiar: Dashboard Dependiente (/paciente/familia/:id)
  • Destino agregar: Agregar Familiar (/paciente/familia/agregar)
  • Back: Dashboard