Flujo de Navegacion - Onboarding¶

Identificador: UIF-ONB-001 Modulo: MTS-ONB-001 - Onboarding Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight)

1. Resumen del Flujo¶

Este documento especifica el flujo de navegacion completo para el modulo de Onboarding, adaptado a los 4 roles de MedTime (PI, CR, CS, PD) y los 3 tiers (Free, Pro, Perfect).

REGLAS CRITICAS: - PI y CR seleccionan tier durante onboarding - CS siempre es Free (no ve pantalla de tier) - PD no tiene onboarding (su perfil lo crea el CR)

1.1. Pantallas del Modulo¶

ID	Nombre	Proposito	Prioridad
SCR-ONB-001	Bienvenida	Primera pantalla post-auth, propuesta de valor	Critica
SCR-ONB-002	Seleccion de Rol	Usuario elige PI o CR	Critica
SCR-ONB-003	Datos Personales	Nombre, fecha nacimiento (opcional)	Alta
SCR-ONB-004	Informacion Medica	Tipo sangre, alergias, condiciones	Media
SCR-ONB-005	Primer Medicamento	Wizard rapido para primer med	Media
SCR-ONB-006	Configuracion Notificaciones	Permisos y preferencias de alertas	Alta
SCR-ONB-007	Agregar Cuidadores	Invitar CS (Pro/Perfect)	Media
SCR-ONB-008	Tour Funcionalidades	Tour guiado interactivo	Baja

2. Diagrama de Flujo Principal¶

flowchart TD
    subgraph Entry["Entrada"]
        AUTH[Post Auth exitoso]
        INVITE[Invitacion CS]
    end

    subgraph CoreFlow["Flujo Core - Obligatorio"]
        WELCOME[SCR-ONB-001<br/>Bienvenida]
        ROLE[SCR-ONB-002<br/>Seleccion Rol]
        TIER[Seleccion Tier<br/>incluido en ROLE]
        PERSONAL[SCR-ONB-003<br/>Datos Personales]
        NOTIF[SCR-ONB-006<br/>Notificaciones]
    end

    subgraph OptionalFlow["Flujo Opcional - Skippable"]
        MEDICAL[SCR-ONB-004<br/>Info Medica]
        FIRSTMED[SCR-ONB-005<br/>Primer Medicamento]
        CAREGIVERS[SCR-ONB-007<br/>Agregar Cuidadores]
        TOUR[SCR-ONB-008<br/>Tour]
    end

    subgraph CSFlow["Flujo CS - Simplificado"]
        CS_ACCEPT[Aceptar Invitacion]
        CS_PERSONAL[Datos Basicos]
        CS_TOUR[Tour CS corto]
    end

    subgraph CRFlow["Flujo CR - Adicional"]
        TUTELAGE[Declaracion Tutela]
        ADD_PD[Agregar Dependiente]
    end

    subgraph Exit["Salida"]
        DASHBOARD[Dashboard]
    end

    %% Entry
    AUTH --> WELCOME
    INVITE --> CS_ACCEPT

    %% PI Flow
    WELCOME --> ROLE
    ROLE -->|PI seleccionado| TIER
    TIER --> PERSONAL

    PERSONAL --> NOTIF
    NOTIF --> MEDICAL
    MEDICAL -->|Completar| FIRSTMED
    MEDICAL -->|Saltar| FIRSTMED

    FIRSTMED -->|Completar| CAREGIVERS_CHECK
    FIRSTMED -->|Saltar| TOUR

    CAREGIVERS_CHECK{Tier Pro/Perfect?}
    CAREGIVERS_CHECK -->|Si| CAREGIVERS
    CAREGIVERS_CHECK -->|No| TOUR

    CAREGIVERS --> TOUR
    TOUR --> DASHBOARD

    %% CR Flow
    ROLE -->|CR seleccionado| TIER
    TIER -->|CR| PERSONAL
    PERSONAL -->|CR| TUTELAGE
    TUTELAGE --> ADD_PD
    ADD_PD --> NOTIF

    %% CS Flow
    CS_ACCEPT --> CS_PERSONAL
    CS_PERSONAL --> CS_TOUR
    CS_TOUR --> DASHBOARD

    %% Skip paths
    TOUR -->|Saltar| DASHBOARD

    %% Styling
    classDef core fill:#E8F5E9,stroke:#388E3C
    classDef optional fill:#FFF3E0,stroke:#F57C00
    classDef cs fill:#E3F2FD,stroke:#1976D2
    classDef cr fill:#FCE4EC,stroke:#C2185B

    class WELCOME,ROLE,TIER,PERSONAL,NOTIF core
    class MEDICAL,FIRSTMED,CAREGIVERS,TOUR optional
    class CS_ACCEPT,CS_PERSONAL,CS_TOUR cs
    class TUTELAGE,ADD_PD cr

3. User Journey: Paciente Independiente (PI) - Onboarding Completo¶

Persona: Maria, 45 anos, quiere gestionar su diabetes con MedTime.

journey
    title Maria completa onboarding como PI
    section Bienvenida
      Ve pantalla bienvenida: 5: Maria
      Entiende propuesta de valor: 5: Maria
    section Configuracion Base
      Selecciona "Soy Paciente": 5: Maria
      Elige tier Free: 4: Maria
      Ingresa nombre: 5: Maria
      Autoriza notificaciones: 5: Maria
    section Personalizacion
      Agrega tipo de sangre: 4: Maria
      Registra alergia a penicilina: 5: Maria
    section Primer Medicamento
      Decide agregar Metformina: 5: Maria
      Configura dosis y horario: 4: Maria
    section Finalizacion
      Ve tour de 5 pantallas: 4: Maria
      Llega al dashboard: 5: Maria

3.1. Pasos Detallados - PI¶

Paso	Pantalla	Accion	Obligatorio	Notas UX
1	SCR-ONB-001	Ver bienvenida	Si	Propuesta de valor clara
2	SCR-ONB-001	Tap "Comenzar"	Si	CTA prominente
3	SCR-ONB-002	Seleccionar "Soy Paciente"	Si	Cards con iconos
4	SCR-ONB-002	Seleccionar tier (Free/Pro/Perfect)	Si	Comparativa visual
5	SCR-ONB-003	Ingresar nombre	Si	Pre-llenado de OAuth
6	SCR-ONB-006	Autorizar notificaciones	Si	Explicar importancia
7	SCR-ONB-004	Agregar info medica	No	Skippable
8	SCR-ONB-005	Agregar primer medicamento	No	Wizard simplificado
9	SCR-ONB-007	Invitar cuidadores	No	Solo Pro/Perfect
10	SCR-ONB-008	Completar tour	No	5 pantallas interactivas
11	Dashboard	Ver pantalla principal	-	Onboarding completo

3.2. Tiempo Estimado - PI¶

Completitud	Tiempo
Solo obligatorio	2-3 min
Con info medica	3-4 min
Con primer medicamento	5-6 min
Completo con tour	6-8 min

4. User Journey: Cuidador Responsable (CR) - Onboarding con Dependiente¶

Persona: Carlos, 38 anos, cuida a su madre de 72 anos.

journey
    title Carlos configura cuenta como CR
    section Bienvenida
      Ve pantalla bienvenida: 5: Carlos
      Tap Comenzar: 5: Carlos
    section Seleccion
      Selecciona "Soy Cuidador Responsable": 5: Carlos
      Elige tier Pro: 5: Carlos
    section Datos Personales
      Ingresa nombre: 5: Carlos
      Confirma email: 4: Carlos
    section Tutela
      Lee declaracion de tutela: 4: Carlos
      Acepta responsabilidad: 5: Carlos
    section Dependiente
      Ingresa nombre de madre: 5: Carlos
      Selecciona relacion "Madre": 5: Carlos
      Ingresa fecha nacimiento: 4: Carlos
    section Configuracion
      Autoriza notificaciones: 5: Carlos
      Completa tour CR: 4: Carlos

4.1. Pasos Adicionales CR¶

Paso	Pantalla	Accion	Notas
Extra 1	SCR-ONB-002	Seleccionar "Soy Cuidador Responsable"	Card con icono familia
Extra 2	Declaracion Tutela	Leer y aceptar declaracion	Modal con checkbox
Extra 3	Agregar Dependiente	Ingresar datos del PD	Nombre, relacion, fecha nac
Extra 4	SCR-ONB-008	Tour especifico para CR	5 pantallas diferentes

4.2. Limites por Tier CR¶

Tier	Dependientes	Cuidadores por Dependiente
Free	1	0
Pro	5	3
Perfect	10	5

5. User Journey: Cuidador Solidario (CS) - Onboarding Simplificado¶

Persona: Ana, 30 anos, es amiga de Maria y acepto ser su cuidadora solidaria.

journey
    title Ana acepta ser cuidadora solidaria
    section Invitacion
      Recibe link por email: 5: Ana
      Abre app con invitacion: 5: Ana
    section Aceptacion
      Ve detalles de invitacion: 5: Ana
      Ve permisos ofrecidos: 4: Ana
      Acepta terminos CS: 5: Ana
    section Configuracion Rapida
      Ingresa nombre: 5: Ana
      Crea PIN: 5: Ana
    section Tour Rapido
      Ve 3 pantallas de tour CS: 4: Ana
      Llega al dashboard CS: 5: Ana

5.1. Flujo CS Simplificado¶

Paso	Pantalla	Accion	Notas
1	Deep link	Abrir invitacion	Token en URL
2	Modal invitacion	Ver nombre del PI	"Maria te invito"
3	Modal invitacion	Ver permisos	Lista de checkmarks
4	Modal invitacion	Tap "Aceptar"	Boton prominente
5	SCR-ONB-003	Ingresar nombre	Simplificado
6	PIN setup	Crear PIN 4-6 digitos	CS siempre Free
7	Tour CS	3 pantallas rapidas	Especifico para rol CS
8	Dashboard CS	Ver vista de cuidador	Permisos limitados

5.2. Diferencias CS¶

NO ve pantalla de seleccion de tier
NO tiene opcion de invitar cuidadores
NO puede agregar medicamentos del PI
SI puede ver medicamentos (si permiso)
SI recibe alertas (si permiso)

6. Pantalla de Seleccion de Tier¶

6.1. Comparativa Visual¶

+-----------------------------------------------+
|            ELIGE TU PLAN                       |
+-----------------------------------------------+
|                                               |
| +-------------+  +-------------+  +-----------+
| |    FREE     |  |     PRO     |  |  PERFECT  |
| |             |  |             |  |           |
| |  $0/siempre |  |  $4.99/mes  |  | $9.99/mes |
| |             |  |             |  |           |
| | [x] Local   |  | [x] FREE +  |  | [x] PRO + |
| | [x] Offline |  | [x] Cloud   |  | [x] MFA   |
| | [x] Alertas |  | [x] OCR     |  | [x] Recov |
| | [x] 3 meds  |  | [x] Ilimit. |  | [x] Prio. |
| |             |  | [x] 1 CS    |  | [x] 3 CS  |
| |             |  |             |  |           |
| | [Elegir]    |  | [Elegir]    |  | [Elegir]  |
| +-------------+  +-------------+  +-----------+
|                                               |
|   Puedes cambiar de plan en cualquier momento |
+-----------------------------------------------+

6.2. Comportamiento Post-Seleccion¶

Tier Seleccionado	Siguiente Paso
Free	SCR-ONB-003 (crear PIN local)
Pro	OAuth si no completo + SCR-ONB-003
Perfect	OAuth + MFA setup + SCR-ONB-003

7. Transiciones y Animaciones¶

7.1. Transiciones Entre Pantallas¶

De	A	Tipo	Duracion	Ease
Welcome	Role	Slide left	300ms	ease-out
Role	Tier	Crossfade	200ms	ease-in-out
Any	Next step	Slide left	300ms	ease-out
Any	Skip	Slide left	250ms	ease-out
Tour slide	Next slide	Slide left	250ms	ease-out

7.2. Progress Indicator¶

INDICADOR DE PROGRESO:

Paso 1/8   =====-----------   12%
Paso 4/8   ==========------   50%
Paso 8/8   ================  100%

- Barra horizontal en top
- Numero de paso + total
- Color: primary
- Height: 4dp
- Animacion: fill suave

7.3. Skip Animation¶

AL SALTAR UN PASO:

1. Boton "Saltar" fade out
2. Pantalla slide left (rapido)
3. Siguiente pantalla slide in
4. Progress bar update
5. Haptic feedback sutil

8. Estados de Pantalla¶

8.1. SCR-ONB-001 - Bienvenida¶

Estado	Condicion	Visualizacion
Default	Pantalla cargada	Ilustracion + titulo + CTA
From Auth	Usuario recien autenticado	Nombre del usuario incluido

8.2. SCR-ONB-002 - Seleccion de Rol¶

Estado	Condicion	Visualizacion
Default	Ninguna seleccion	2 cards (PI, CR) sin seleccion
PI Selected	Tap en PI	Card PI highlighted, tier options
CR Selected	Tap en CR	Card CR highlighted, tier options
Tier Selected	Tier elegido	Boton "Continuar" habilitado

8.3. SCR-ONB-006 - Notificaciones¶

Estado	Condicion	Visualizacion
Pending	Permiso no solicitado	Explicacion + boton "Permitir"
Requesting	Prompt del sistema	Modal nativo
Granted	Permiso concedido	Checkmark + opciones de config
Denied	Permiso denegado	Mensaje + link a Settings

9. Persistencia de Estado¶

9.1. Modelo de Datos Onboarding¶

interface OnboardingState {
  current_step: number;
  total_steps: number;
  role_selected: 'PI' | 'CR' | 'CS' | null;
  tier_selected: 'free' | 'pro' | 'perfect' | null;
  completed_steps: string[];
  skipped_steps: string[];
  started_at: Date;
  completed_at: Date | null;

  // Datos recolectados
  user_name: string | null;
  birth_date: Date | null;
  blood_type: string | null;
  allergies: string[];
  conditions: string[];

  // CR specific
  tutelage_accepted: boolean;
  dependents: DependentInfo[];

  // CS specific
  invitation_token: string | null;
  pi_id: string | null;
}

9.2. Recuperacion de Estado¶

Estado guardado en local storage
Al cerrar app, se retoma donde quedo
Solo pasos obligatorios bloquean progreso
Pasos skipped se pueden completar despues

10. Validaciones¶

10.1. Validaciones por Pantalla¶

Pantalla	Campo	Validacion
SCR-ONB-002	Rol	Requerido
SCR-ONB-002	Tier	Requerido
SCR-ONB-003	Nombre	Min 2 caracteres
SCR-ONB-003	Email	Formato valido (si editable)
Declaracion Tutela	Checkbox	Requerido para CR
Agregar PD	Nombre	Requerido
Agregar PD	Relacion	Requerido
SCR-ONB-006	Notificaciones	Solicitar permiso

10.2. Mensajes de Error¶

Error	Mensaje	Accion
Nombre vacio	"Ingresa tu nombre para continuar"	Focus en campo
Nombre muy corto	"El nombre debe tener al menos 2 caracteres"	Focus en campo
Tutela no aceptada	"Debes aceptar la declaracion de tutela"	Scroll a checkbox
PD sin nombre	"Ingresa el nombre del dependiente"	Focus en campo

11. Deep Links¶

11.1. Estructura de Deep Links¶

Deep Link	Destino	Parametros
`medtime://onboarding`	SCR-ONB-001	-
`medtime://onboarding/step/{n}`	Paso especifico	step_number
`medtime://invite/{token}`	Flujo CS	invitation_token

11.2. Invitacion CS¶

LINK DE INVITACION:

medtime://invite/abc123xyz

Comportamiento:
1. Si app instalada: Abrir con token
2. Si no instalada: Store con referrer
3. Post-install: Retomar con token

Token expira en 7 dias

12. Metricas de UX¶

12.1. KPIs del Flujo¶

Metrica	Objetivo	Medicion
Tiempo onboarding completo	< 5 min	analytics
Tasa abandono step 1	< 5%	funnel
Tasa abandono total	< 20%	funnel
Steps skipped promedio	< 2	analytics
Primer medicamento agregado	> 50%	analytics
Notificaciones autorizadas	> 80%	analytics

12.2. Puntos de Medicion¶

Punto	Evento
Inicio	onboarding_started
Rol seleccionado	role_selected
Tier seleccionado	tier_selected
Paso completado	step_completed
Paso saltado	step_skipped
Notificaciones	notifications_permission
Primer med	first_medication_added
Tour completado	tour_completed
Onboarding completo	onboarding_completed
Abandono	onboarding_abandoned

13. Referencias¶

14. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial con flujos PI, CR, CS

Documento generado por MobileUxUiDrone (Eight of Eight) "El onboarding es la primera impresion. Esta especificacion asegura que sea memorable."