Especificacion UI Consolidada: Onboarding¶

Identificador: UI-MTS-ONB-001 Modulo Funcional: MTS-ONB-001 Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

1. Resumen Ejecutivo¶

1.1. Proposito del Modulo¶

El modulo de Onboarding guia a nuevos usuarios a traves de la configuracion inicial de MedTime, personalizando la experiencia segun su rol (PI, CR, CS) y tier seleccionado. El objetivo es lograr un "quick win" rapido mientras se recopila informacion esencial.

1.2. Alcance UI¶

Aspecto	Detalle
Pantallas	8 pantallas de onboarding
Flujos	3 flujos diferenciados por rol
Componentes unicos	12 componentes especificos
Formularios	4 formularios de captura de datos

1.3. Metricas Objetivo¶

Metrica	Objetivo
Tiempo completado	< 5 minutos (PI/CR), < 2 minutos (CS)
Tasa de abandono	< 15%
First medication added	> 70% de usuarios
Notification permission	> 80% aceptacion

2. Inventario de Pantallas¶

2.1. Lista de Pantallas¶

ID	Nombre	Tipo	Prioridad
SCR-ONB-001	Bienvenida	Full Screen	Critica
SCR-ONB-002	Seleccion de Rol	Full Screen	Critica
SCR-ONB-003	Datos Personales	Full Screen	Alta
SCR-ONB-004	Informacion Medica	Full Screen	Media
SCR-ONB-005	Primer Medicamento	Full Screen	Alta
SCR-ONB-006	Config Notificaciones	Full Screen	Alta
SCR-ONB-007	Agregar Cuidadores	Full Screen	Media
SCR-ONB-008	Tour Funcionalidades	Full Screen	Alta

2.2. Matriz de Acceso por Rol¶

Pantalla	PI	CR	CS
SCR-ONB-001	Completa	Completa	Simplificada
SCR-ONB-002	Rol + Tier	Rol + Tier + Tutela	Auto-skip (Free)
SCR-ONB-003	Solo usuario	Usuario + Dependiente	Nombre + PIN
SCR-ONB-004	Opcional	Dependiente	Auto-skip
SCR-ONB-005	Usuario	Dependiente	Auto-skip
SCR-ONB-006	Completa	Completa	Simplificada
SCR-ONB-007	Pro/Perfect	Auto-skip	Auto-skip
SCR-ONB-008	Tour 4 slides	Tour 4 slides	Tour 1 slide

3. Arquitectura de Navegacion¶

3.1. Flujo Principal (PI)¶

flowchart TD
    AUTH[Auth Completado] --> ONB001[SCR-ONB-001<br>Bienvenida]
    ONB001 --> ONB002[SCR-ONB-002<br>Seleccion Rol]
    ONB002 --> ONB003[SCR-ONB-003<br>Datos Personales]
    ONB003 --> ONB004[SCR-ONB-004<br>Info Medica]
    ONB004 --> ONB005[SCR-ONB-005<br>Primer Med]
    ONB005 --> ONB006[SCR-ONB-006<br>Notificaciones]
    ONB006 --> ONB007{Tier?}
    ONB007 -->|Free| ONB008[SCR-ONB-008<br>Tour]
    ONB007 -->|Pro/Perfect| ONB007B[SCR-ONB-007<br>Cuidadores]
    ONB007B --> ONB008
    ONB008 --> DASH[Dashboard]

3.2. Flujo CR (Cuidador Responsable)¶

flowchart TD
    AUTH[Auth Completado] --> ONB001[SCR-ONB-001]
    ONB001 --> ONB002[SCR-ONB-002<br>+ Tutela Declaration]
    ONB002 --> ONB003[SCR-ONB-003<br>Usuario + Dependiente]
    ONB003 --> ONB004[SCR-ONB-004<br>Info Dependiente]
    ONB004 --> ONB005[SCR-ONB-005<br>Med Dependiente]
    ONB005 --> ONB006[SCR-ONB-006]
    ONB006 --> ONB008[SCR-ONB-008<br>Skip ONB-007]
    ONB008 --> DASH[Dashboard]

3.3. Flujo CS (Cuidador Solidario)¶

flowchart TD
    INVITE[Acepta Invitacion] --> ONB001[SCR-ONB-001<br>Simplificada]
    ONB001 --> ONB003[SCR-ONB-003<br>Nombre + PIN]
    ONB003 --> ONB006[SCR-ONB-006<br>Simple]
    ONB006 --> ONB008[SCR-ONB-008<br>1 Slide]
    ONB008 --> DASH[Dashboard]

3.4. Mapa de Navegacion¶

graph TB
    subgraph Onboarding["Onboarding Flow"]
        ONB001[Bienvenida] --> ONB002[Rol]
        ONB002 --> ONB003[Datos]
        ONB003 --> ONB004[Medico]
        ONB004 --> ONB005[Medicamento]
        ONB005 --> ONB006[Notificaciones]
        ONB006 --> ONB007[Cuidadores]
        ONB007 --> ONB008[Tour]
    end

    subgraph Shortcuts["Skip Paths"]
        ONB004 -.->|Skip| ONB005
        ONB005 -.->|Skip| ONB006
        ONB007 -.->|Skip/N/A| ONB008
        ONB008 -.->|Skip| DASH
    end

    ONB008 --> DASH[Dashboard]

    style ONB001 fill:#E3F2FD
    style ONB002 fill:#E3F2FD
    style ONB003 fill:#E3F2FD
    style ONB008 fill:#E3F2FD
    style DASH fill:#C8E6C9

4. User Journeys¶

4.1. Journey: PI Nuevo con Tratamiento Cronico¶

journey
    title PI: Diabetico configurando MedTime
    section Bienvenida
      Ve pantalla welcome: 5: Usuario
      Lee beneficios: 4: Usuario
      Tap Comenzar: 5: Usuario
    section Configuracion
      Selecciona PI: 5: Usuario
      Elige tier Pro: 4: Usuario
      Confirma datos OAuth: 5: Usuario
      Agrega info medica: 4: Usuario
    section Quick Win
      Busca Metformina: 5: Usuario
      Configura dosis: 5: Usuario
      Ve horarios auto: 5: Usuario
    section Finalizacion
      Acepta notificaciones: 5: Usuario
      Invita esposa como CS: 4: Usuario
      Completa tour: 5: Usuario

4.2. Journey: CR Configurando para Padre Anciano¶

journey
    title CR: Hijo configurando app para padre
    section Inicio
      Ve bienvenida: 5: Usuario
      Elige Cuidador Responsable: 5: Usuario
      Acepta declaracion tutela: 4: Usuario
    section Datos
      Confirma sus datos: 5: Usuario
      Ingresa datos del padre: 5: Usuario
      Agrega info medica padre: 4: Usuario
    section Medicamentos
      Agrega medicamento padre: 5: Usuario
      Configura horarios: 5: Usuario
    section Final
      Configura notificaciones: 5: Usuario
      Completa tour: 5: Usuario

4.3. Journey: CS Aceptando Invitacion¶

journey
    title CS: Esposa aceptando invitacion
    section Llegada
      Recibe email invitacion: 5: Usuario
      Tap link invitacion: 5: Usuario
      Descarga app: 4: Usuario
    section Setup Rapido
      Ve welcome simplificado: 5: Usuario
      Ingresa nombre: 5: Usuario
      Crea PIN: 5: Usuario
    section Activacion
      Acepta notificaciones: 5: Usuario
      Ve confirmacion: 5: Usuario
      Accede a dashboard: 5: Usuario

5. Componentes UI Especificos¶

5.1. Catalogo de Componentes Onboarding¶

ID	Nombre	Uso
CMP-ONB-001	Progress Bar Step	Indicador de progreso por pasos
CMP-ONB-002	Role Selection Card	Cards para elegir PI/CR
CMP-ONB-003	Tier Comparison Cards	Comparacion Free/Pro/Perfect
CMP-ONB-004	Tutelage Declaration	Checkbox con declaracion legal
CMP-ONB-005	Medication Search Input	Busqueda con autocomplete
CMP-ONB-006	Time Pills Row	Horarios auto-calculados
CMP-ONB-007	Permission Request Card	Solicitud de permisos
CMP-ONB-008	Caregiver Invite Form	Formulario invitacion CS
CMP-ONB-009	Tour Carousel	Carrusel de slides
CMP-ONB-010	Page Dots Indicator	Indicador de pagina
CMP-ONB-011	Skip Link	Link para saltar paso
CMP-ONB-012	Celebration Animation	Animacion de completado

5.2. Progress Bar Step (CMP-ONB-001)¶

+------------------------------------------+
|  Paso {n} de 8  [===...---]   {%}        |
+------------------------------------------+

Tokens:
- Height: 56dp (incluyendo padding)
- Bar height: 4dp
- Color filled: primary
- Color empty: neutral.200
- Text: sm (14sp), neutral.700
- Percentage: sm (14sp), neutral.500

5.3. Role Selection Card (CMP-ONB-002)¶

+------------------------------------+
|  [Icon 48x48]                      |
|                                    |
|  Titulo Principal                  |
|                                    |
|  Descripcion de dos lineas que    |
|  explica el rol seleccionable.     |
|                                    |
+------------------------------------+

States:
- Default: border neutral.200
- Selected: border primary, background primary.light(10%)
- Focused: border primary, shadow

5.4. Tier Comparison Cards (CMP-ONB-003)¶

+----------+ +----------+ +----------+
|   FREE   | |   PRO    | | PERFECT  |
|          | |          | |          |
| $0       | | $4.99    | | $9.99    |
| /siempre | | /mes     | | /mes     |
|          | |          | |          |
| [x] Feat | |[x] Feat+ | |[x] All   |
| [x] Feat | |[x] Feat+ | |[x] All   |
|          | |          | |          |
|[Elegir]  | |[Elegir]  | |[Elegir]  |
+----------+ +----------+ +----------+

Layout:
- 3 cards horizontal en pantallas >= 360dp
- Stack vertical en < 360dp
- Card width: (screen - 48dp) / 3

6. Formularios y Validaciones¶

6.1. Formulario Datos Personales (SCR-ONB-003)¶

Campo	Tipo	Requerido	Validacion
name	text	Si	Min 2 chars
email	email	Read-only	From OAuth
birth_date	date	No	Age >= 13
dependent_name	text	Si (CR)	Min 2 chars
dependent_relation	select	Si (CR)	Selection required
dependent_birth_date	date	Si (CR)	Valid date
pin	pin	Si (CS)	4 digits
pin_confirm	pin	Si (CS)	Must match

6.2. Formulario Informacion Medica (SCR-ONB-004)¶

Campo	Tipo	Requerido	Validacion
blood_type	select	No	Valid option
allergies	textarea	No	Max 500 chars
conditions	checkbox[]	No	-
custom_condition	text	No	Max 100 chars

6.3. Formulario Primer Medicamento (SCR-ONB-005)¶

Campo	Tipo	Requerido	Validacion
med_name	search	Si	Min 2 chars
dose_amount	number	Si	> 0
dose_unit	select	Si	Valid option
frequency	select	Si	Valid option
reminder_times	time[]	Auto	Generated

6.4. Formulario Cuidadores (SCR-ONB-007)¶

Campo	Tipo	Requerido	Validacion
caregiver_email	email	Si	Valid email, not self
caregiver_relation	select	No	Valid option

7. Estados y Transiciones¶

7.1. Estado Global del Onboarding¶

interface OnboardingState {
  current_step: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
  role?: 'PI' | 'CR' | 'CS';
  tier?: 'free' | 'pro' | 'perfect';

  user_data: {
    name: string;
    email: string;
    birth_date?: Date;
  };

  dependent_data?: {
    name: string;
    relationship: string;
    birth_date: Date;
  };

  medical_info?: {
    blood_type?: string;
    allergies?: string[];
    conditions?: string[];
  };

  first_medication?: {
    name: string;
    dose: string;
    frequency: string;
    times: string[];
  };

  notifications: {
    permission_granted: boolean;
    preferences?: NotificationPreferences;
  };

  caregivers?: Invitation[];

  steps_skipped: number[];
  started_at: Date;
}

7.2. Transiciones de Estado¶

stateDiagram-v2
    [*] --> Welcome: Auth complete

    Welcome --> RoleSelection: Tap Comenzar

    RoleSelection --> PersonalData: Role + Tier selected
    RoleSelection --> PersonalData: Tutelage accepted (CR)

    PersonalData --> MedicalInfo: Data valid
    MedicalInfo --> FirstMed: Continue/Skip
    FirstMed --> Notifications: Continue/Skip

    Notifications --> Caregivers: Permission handled (Pro/Perfect PI)
    Notifications --> Tour: Permission handled (Free/CR/CS)

    Caregivers --> Tour: Continue/Skip
    Tour --> [*]: Complete

    note right of RoleSelection
        CR requires tutelage
        CS auto-selects Free
    end note

    note right of Caregivers
        Only PI Pro/Perfect
        CR and CS skip
    end note

8. Accesibilidad Consolidada¶

8.1. Cumplimiento WCAG 2.1 AA¶

Criterio	Implementacion
1.1.1 Non-text Content	Todas las ilustraciones tienen alt text
1.3.1 Info and Relationships	Formularios con labels asociados
1.4.3 Contrast	Ratio minimo 4.5:1 para texto
2.1.1 Keyboard	Navegacion completa sin touch
2.4.3 Focus Order	Orden logico top-to-bottom
2.4.6 Headings	Titulos descriptivos por pantalla
3.2.2 On Input	Sin cambios automaticos inesperados
3.3.1 Error Identification	Errores claramente identificados
3.3.2 Labels	Todos los campos etiquetados

8.2. Soporte Reduced Motion¶

@media (prefers-reduced-motion: reduce) {
  .onb-transition {
    transition-duration: 0.01ms !important;
  }
  .onb-animation {
    animation: none !important;
  }
  .lottie-illustration {
    /* Static frame instead of animation */
  }
}

Pantalla	Anuncio Inicial
ONB-001	"Bienvenida a MedTime. Paso 1 de 8."
ONB-002	"Seleccion de rol. Paso 2 de 8. Elige como usaras MedTime."
ONB-003	"Datos personales. Paso 3 de 8. Formulario con {n} campos."
ONB-004	"Informacion medica opcional. Paso 4 de 8."
ONB-005	"Agregar medicamento. Paso 5 de 8."
ONB-006	"Configurar notificaciones. Paso 6 de 8."
ONB-007	"Agregar cuidadores. Paso 7 de 8."
ONB-008	"Tour de funcionalidades. Paso 8 de 8. Ultimo paso."

9. Responsive Design¶

9.1. Breakpoints¶

Breakpoint	Ajustes
< 360dp	Tier cards en stack vertical
360-600dp	Layout estandar movil
> 600dp	Incrementar margins, centrar contenido

9.2. Orientacion¶

Orientacion	Comportamiento
Portrait	Layout optimizado
Landscape	Scroll habilitado, ilustraciones reducidas

10. Performance¶

10.1. Targets¶

Metrica	Objetivo
FCP	< 1.5s
TTI	< 3s
Transition duration	< 300ms
Form submission	< 500ms

10.2. Optimizaciones¶

Preload ilustraciones del siguiente paso
Lazy load de componentes no visibles
Cache de busqueda de medicamentos
Debounce en busquedas (300ms)

11. Analytics y Tracking¶

11.1. Eventos por Pantalla¶

Pantalla	Eventos Clave
ONB-001	screen_view, onboarding_started, time_on_screen
ONB-002	role_selected, tier_selected, tutelage_accepted
ONB-003	field_edited, validation_error, dependent_added
ONB-004	blood_type_selected, condition_selected, step_skipped
ONB-005	med_search, med_selected, med_added, time_adjusted
ONB-006	permission_requested, permission_granted/denied
ONB-007	invite_sent, invite_skipped
ONB-008	tour_slide_viewed, tour_completed, onboarding_completed

11.2. Funnel de Conversion¶

graph TD
    A[Auth Complete: 100%] --> B[Started ONB: 98%]
    B --> C[Role Selected: 95%]
    C --> D[Data Entered: 90%]
    D --> E[Med Added: 75%]
    E --> F[Notifications OK: 85%]
    F --> G[Completed: 80%]

    style A fill:#C8E6C9
    style G fill:#C8E6C9

12. Seguridad y Privacidad¶

12.1. Datos Sensibles Capturados¶

Dato	Clasificacion	Tratamiento
Nombre	PII	Encriptado
Email	PII	OAuth, no almacenado adicional
Fecha nacimiento	PII	Encriptado, opcional
Tipo sangre	PHI	Encriptado
Alergias	PHI	Encriptado
Condiciones	PHI	Encriptado
Medicamentos	PHI	Encriptado
PIN	Secret	Hash + salt

12.2. Consentimientos¶

Consentimiento	Pantalla	Obligatorio
Terminos de uso	Pre-auth	Si
Tutela legal	ONB-002 (CR)	Si
Notificaciones	ONB-006	No

13. Localizacion¶

13.1. Strings por Pantalla¶

Pantalla	String Keys
ONB-001	15 keys
ONB-002	25 keys
ONB-003	20 keys
ONB-004	18 keys
ONB-005	22 keys
ONB-006	28 keys
ONB-007	20 keys
ONB-008	30 keys
Total	178 keys

13.2. Idiomas Soportados¶

Espanol (es-MX) - Principal
Ingles (en-US) - Secundario
Portugues (pt-BR) - Futuro

14. Testing Checklist¶

14.1. Funcional¶

PI puede completar onboarding completo
CR puede agregar dependiente con tutela
CS tiene flujo simplificado
Todos los skips funcionan correctamente
Back navigation preserva datos
Progress bar refleja paso actual

14.2. Formularios¶

14.3. Permisos¶

Request de notificaciones
Manejo de permiso denegado
Deep link a settings funciona

14.4. Accesibilidad¶

VoiceOver/TalkBack completo
Orden de foco logico
Labels descriptivos
Reduced motion respetado

15. Referencias¶

15.1. Documentos Relacionados¶

15.2. Pantallas¶

16. Historial de Cambios¶

Version	Fecha	Autor	Cambios
1.0.0	2025-12-05	MobileUxUiDrone	Creacion inicial

Documento generado por MobileUxUiDrone (Eight of Eight)