Especificacion UI Consolidada - MTS-PAY-001¶

Identificador: UI-MTS-PAY-001 Modulo Funcional: MTS-PAY-001 - Pagos y Suscripciones Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Completado

1. Resumen Ejecutivo¶

1.1. Alcance¶

Este documento consolida la especificacion completa de interfaz de usuario para el modulo de Pagos y Suscripciones (MTS-PAY-001), que abarca la comparativa de planes, flujos de suscripcion via App Store/Google Play, gestion de suscripcion activa, cancelacion con retencion y reactivacion.

Nota Importante: MedTime no procesa pagos directamente. Todas las transacciones se manejan a traves de App Store (iOS) y Google Play (Android).

1.2. Metricas del Modulo¶

Metrica	Valor
Total de pantallas	8
Componentes unicos	22
User journeys documentados	2
Nivel WCAG	AA
Cobertura de accesibilidad	100%
Componentes nuevos	6

1.3. Pantallas Incluidas¶

ID	Nombre	Prioridad	Estado
SCR-PAY-001	Comparativa de Planes	Alta	Especificado
SCR-PAY-002	Detalle Plan Pro	Alta	Especificado
SCR-PAY-003	Detalle Plan Perfect	Alta	Especificado
SCR-PAY-004	Checkout	Alta	Especificado
SCR-PAY-005	Confirmacion de Suscripcion	Alta	Especificado
SCR-PAY-006	Gestion de Suscripcion	Alta	Especificado
SCR-PAY-007	Cancelacion con Retencion	Alta	Especificado
SCR-PAY-008	Reactivacion	Media	Especificado

2. User Journeys¶

2.1. Paciente Independiente (PI) - Suscribirse a Pro¶

Persona: Paciente adulto Objetivo: Obtener funcionalidades avanzadas Contexto: Usuario Free alcanza limite o quiere cuidadores

Flujo:

Ver comparativa (SCR-PAY-001)
Ver detalle Pro (SCR-PAY-002)
Checkout (SCR-PAY-004)
Completar en App Store/Google Play
Confirmacion (SCR-PAY-005)

Tiempo objetivo: < 2 minutos (excluyendo tiempo en Store)

Puntos de friction mitigados:

Comparativa clara sin jerga tecnica
Precio prominente pero no agresivo
Un solo tap para ir al Store

2.2. Usuario Pro - Upgrade a Perfect¶

Persona: Usuario Pro actual Objetivo: Mas cuidadores, seguridad avanzada Contexto: Necesita mas de 5 cuidadores

Flujo:

Gestion suscripcion (SCR-PAY-006)
Ver detalle Perfect (SCR-PAY-003)
Checkout upgrade (SCR-PAY-004)
Completar en Store
Confirmacion + configurar Recovery Key

Diferencias con nuevo usuario:

Muestra diferencial de precio
Destaca features adicionales sobre Pro

3. Arquitectura de Navegacion¶

3.1. Diagrama de Flujo General¶

flowchart TD
    ENTRY[Entry Points] --> COMPARE[SCR-PAY-001<br>Comparativa]

    COMPARE --> PRO[SCR-PAY-002<br>Detalle Pro]
    COMPARE --> PERF[SCR-PAY-003<br>Detalle Perfect]

    PRO --> CHECK[SCR-PAY-004<br>Checkout]
    PERF --> CHECK

    CHECK --> STORE[App Store/<br>Google Play]
    STORE --> CONFIRM[SCR-PAY-005<br>Confirmacion]

    CONFIRM --> MANAGE[SCR-PAY-006<br>Gestion]

    MANAGE --> CANCEL[SCR-PAY-007<br>Cancelacion]
    CANCEL --> FREE[Plan Free]
    FREE --> REACT[SCR-PAY-008<br>Reactivacion]
    REACT --> COMPARE

3.2. Entry Points¶

Entry Point	Contexto	Destino
Tab Mas > Suscripcion	Acceso directo	SCR-PAY-001 o 006
Banner Free	Usuario Free	SCR-PAY-001
Limite alcanzado	Feature bloqueada	SCR-PAY-001
Badge Pro en feature	Feature Pro/Perfect	SCR-PAY-002/003

3.3. Deep Links¶

Ruta	Destino
`medtime://subscription`	SCR-PAY-001 o 006
`medtime://subscription/plans`	SCR-PAY-001
`medtime://subscription/pro`	SCR-PAY-002
`medtime://subscription/perfect`	SCR-PAY-003
`medtime://subscription/manage`	SCR-PAY-006

4. Componentes Utilizados¶

4.1. Componentes del Design System¶

Componente	ID	Uso en Modulo
Top App Bar	CMP-NAV-002	Todas las pantallas
Primary Button	CMP-BTN-001	CTAs principales
Text Button	CMP-BTN-003	Acciones secundarias
Radio Group	CMP-INP-009	Motivos cancelacion
Segmented Control	Custom	Period toggle
Tier Comparison Card	CMP-CRD-007	SCR-PAY-001
Snackbar	CMP-FBK-001	Feedback
Dialog	CMP-FBK-002	Confirmaciones

4.2. Componentes Personalizados (Nuevos)¶

Componente	Descripcion	Pantalla(s)
PlanCard	Card de plan con features	SCR-PAY-001
PlanHero	Header de detalle de plan	SCR-PAY-002, 003
FeatureDetailCard	Feature con descripcion	SCR-PAY-002, 003
CheckoutSummary	Resumen pre-compra	SCR-PAY-004
SubscriptionStatusCard	Estado de suscripcion	SCR-PAY-006
RetentionOfferCard	Oferta de retencion	SCR-PAY-007

5. Estructura de Precios¶

5.1. Planes¶

Plan	Mensual	Anual	Ahorro
Free	$0	$0	-
Pro	$9.99	$99.99	17%
Perfect	$19.99	$199.99	17%

5.2. Trial¶

Disponible para nuevos usuarios
Duracion: 7 dias
Sin cargo hasta fin del trial
Recordatorio 3 dias antes de cobro

5.3. Presentation de Precios¶

Precio prominente pero no agresivo
Sin tacticas de presion (countdown, "ultimas horas")
"Cancelar en cualquier momento" siempre visible
Impuestos manejados por Store

6. Auditoria de Accesibilidad WCAG 2.1 AA¶

6.1. Resumen de Cumplimiento¶

Principio	Estado	Notas
Perceptible	CUMPLE	Precios claros, contrastes OK
Operable	CUMPLE	Navegacion sencilla
Comprensible	CUMPLE	Lenguaje simple, sin jerga
Robusto	CUMPLE	Semantica correcta

6.2. Checklist por Pantalla¶

Pantalla	Touch	Contraste	SR	Focus	WCAG
SCR-PAY-001	OK	OK	OK	OK	AA
SCR-PAY-002	OK	OK	OK	OK	AA
SCR-PAY-003	OK	OK	OK	OK	AA
SCR-PAY-004	OK	OK	OK	OK	AA
SCR-PAY-005	OK	OK	OK	OK	AA
SCR-PAY-006	OK	OK	OK	OK	AA
SCR-PAY-007	OK	OK	OK	OK	AA
SCR-PAY-008	OK	OK	OK	OK	AA

6.3. Consideraciones Especiales¶

6.3.1. Comparativa de Planes (SCR-PAY-001)¶

Tabla de features accesible con headers
Modo lista alternativo para screen readers
Precios con labels "por mes" / "por ano"

6.3.2. Cancelacion (SCR-PAY-007)¶

Sin tacticas de culpa o presion
Boton cancelar facil de encontrar
Lenguaje claro sobre consecuencias

6.3.3. Reactivacion (SCR-PAY-008)¶

Urgencia de datos accesible (role="alert")
Opcion de descargar datos antes de perder

7. Flujos de Store Integration¶

7.1. Secuencia de Compra¶

sequenceDiagram
    participant U as Usuario
    participant App as MedTime
    participant Store as App Store/Play
    participant Server as Backend

    U->>App: Tap Suscribirse
    App->>Store: Iniciar compra
    Store->>U: UI de pago
    U->>Store: Confirmar
    Store->>App: Callback success
    App->>Server: Validar recibo
    Server->>App: Confirmar tier
    App->>U: Pantalla exito

7.2. Estados de Suscripcion¶

Estado	Badge	Acciones
active	Verde "Activo"	Gestionar, Upgrade, Cancelar
trial	Azul "Prueba"	Countdown, Gestionar
grace_period	Amarillo "Problema"	Actualizar pago
cancelled	Gris "Cancela el X"	Reactivar
expired	Rojo "Expirado"	Reactivar

8. Retencion y Cancelacion¶

8.1. Matriz de Ofertas¶

Motivo	Oferta	Una vez
Precio alto	50% off 3 meses	Si
No uso	Pausa 1 mes	1x/6 meses
Problemas tecnicos	Soporte prioritario	Si
Otros	Sin oferta	-

8.2. Principios de Retencion¶

Etico: Sin presion ni tacticas oscuras
Transparente: Claro sobre lo que pierde
Facil salir: Boton cancelar siempre accesible
Una oportunidad: Ofertas solo una vez

9. Responsive Design¶

9.1. Adaptaciones¶

Pantalla	Mobile	Tablet
SCR-PAY-001	Cards verticales	Grid 3 columnas
SCR-PAY-002/003	Scroll vertical	Two-pane
SCR-PAY-006	Lista vertical	Side panel

10. Metricas de UX¶

10.1. KPIs del Modulo¶

Metrica	Objetivo
Conversion Free->Pro	> 5%
Conversion Pro->Perfect	> 10%
Trial to Paid	> 40%
Churn mensual	< 5%
Efectividad retencion	> 20%

10.2. Funnel de Conversion¶

View Plans (100%)
    |
Plan Detail (60%)
    |
Checkout Start (40%)
    |
Store Redirect (35%)
    |
Purchase Complete (25%)

11. Archivos del Modulo¶

11.1. Flujos¶

flows/UIF-PAY-001-pagos-suscripciones.md

11.2. Pantallas¶

screens/SCR-PAY-001-comparativa-planes.md
screens/SCR-PAY-002-detalle-plan-pro.md
screens/SCR-PAY-003-detalle-plan-perfect.md
screens/SCR-PAY-004-checkout.md
screens/SCR-PAY-005-confirmacion.md
screens/SCR-PAY-006-gestion-suscripcion.md
screens/SCR-PAY-007-cancelacion.md
screens/SCR-PAY-008-reactivacion.md

11.3. Especificacion Consolidada¶

specs/UI-MTS-PAY-001.md (este documento)

12. Dependencias con Otros Modulos¶

Modulo	Dependencia
MTS-USR-001	Tier afecta limites de cuidadores/dependientes
MTS-MED-001	Tier afecta limite de medicamentos
MTS-ALT-001	Tier afecta limite de SMS
MTS-AUTH-001	Perfect requiere MFA, Recovery Key

13. Referencias¶

13.1. Especificacion Funcional¶

MTS-PAY-001 - Pagos y Suscripciones

13.2. Design System¶

13.3. Store Documentation¶

14. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial completa - 8 pantallas

15. Aprobaciones¶

Rol	Nombre	Estado	Fecha
UX Lead	MobileUxUiDrone	Completado	2025-12-05
A11y Review	Pendiente	-	-
Product Owner	Pendiente	-	-

Documento generado por MobileUxUiDrone (Eight of Eight) "Monetizacion etica: valor claro, sin presion."