Pantalla: Confirmacion de Suscripcion¶
Identificador: SCR-PAY-005 Nombre: Confirmacion de Suscripcion Modulo: MTS-PAY-001 - Pagos y Suscripciones Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight)
1. Informacion General¶
| Atributo | Valor |
|---|---|
| Tipo | Confirmacion/Exito |
| Acceso | Post-compra exitosa en Store |
| Roles | Todos |
| Tiers | Recien suscritos |
| Prioridad | Alta |
2. Proposito¶
Celebra la suscripcion exitosa, confirma los detalles y guia al usuario a comenzar a usar las nuevas funcionalidades.
3. Wireframe - Nueva Suscripcion¶
+--------------------------------------------------+
| |
| |
| [check animado grande] |
| |
| Bienvenido a Pro! |
| |
| Tu suscripcion esta activa |
| |
+--------------------------------------------------+
| |
| RESUMEN |
| |
| Plan Pro |
| Periodo Mensual |
| Proxima renovacion 5 Ene 2026 |
| |
+--------------------------------------------------+
| LO QUE PUEDES HACER AHORA |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [pill-icon] Agregar medicamentos | |
| | Ya no hay limite de 3 | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [people-icon] Invitar cuidadores | |
| | Hasta 5 personas | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [cloud-icon] Activar sincronizacion | |
| | Respalda tus datos | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| |
| Te enviamos un email de confirmacion a |
| maria@email.com |
| |
| [Comenzar a usar Pro] |
| |
+--------------------------------------------------+
4. Wireframe - Trial Iniciado¶
+--------------------------------------------------+
| |
| |
| [gift/trial icon] |
| |
| Tu prueba gratuita comenzo! |
| |
| Disfruta de Pro por 7 dias |
| |
+--------------------------------------------------+
| |
| DETALLES DE LA PRUEBA |
| |
| Plan Pro |
| Duracion 7 dias |
| Termina el 12 Dic 2025 |
| Primer cobro 12 Dic 2025 |
| Monto $9.99 USD |
| |
| +--------------------------------------------+ |
| | [i] Recibiras un recordatorio 3 dias | |
| | antes de que termine tu prueba | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| |
| [Explorar funciones Pro] |
| |
| [Configurar recordatorio de cancelacion] |
| |
+--------------------------------------------------+
5. Wireframe - Upgrade¶
+--------------------------------------------------+
| |
| |
| [upgrade/level-up icon] |
| |
| Bienvenido a Perfect! |
| |
| Tu actualizacion esta activa |
| |
+--------------------------------------------------+
| |
| CAMBIOS EN TU CUENTA |
| |
| [up arrow] Cuidadores: 5 -> 10 |
| [up arrow] SMS: 3/mes -> Ilimitados |
| [new] MFA obligatorio activado |
| [new] Recovery Key disponible |
| [new] Exportar FHIR habilitado |
| [new] Soporte prioritario |
| |
+--------------------------------------------------+
| |
| [Configurar Recovery Key] |
| |
| Este es un paso importante para |
| proteger tu cuenta. |
| |
| [Configurar ahora] [Despues] |
| |
+--------------------------------------------------+
6. Elementos de UI¶
6.1. Componentes¶
| ID | Componente | Tipo | Requerido |
|---|---|---|---|
| success_animation | Lottie/Animated Icon | Custom | Si |
| title | Hero Title | Text | Si |
| subtitle | Subtitle | Text | Si |
| summary_card | Summary Card | Custom | Si |
| features_list | Action Cards | Custom | Si |
| email_notice | Info Text | - | Si |
| cta_primary | Primary Button | CMP-BTN-001 | Si |
| cta_secondary | Text Button | CMP-BTN-003 | Condicional |
6.2. Animacion de Exito¶
Secuencia:
1. Circulo crece desde centro (200ms)
2. Check aparece con bounce (300ms)
3. Confetti leve (500ms) - opcional, respeta reduce motion
4. Total: ~1s
6.3. Feature Action Card¶
+----------------------------------------------+
| [icon] Titulo de accion |
| Descripcion breve |
+----------------------------------------------+
- Tap: Navega a la funcionalidad
- Icon: Color primary
- Titulo: 16sp medium
- Descripcion: 14sp, neutral.600
7. Estados¶
7.1. Variantes de Pantalla¶
| Escenario | Titulo | Features | CTA |
|---|---|---|---|
| Nueva suscripcion | "Bienvenido a [Plan]!" | Nuevas features | "Comenzar" |
| Trial iniciado | "Tu prueba comenzo!" | Features + recordatorio | "Explorar" |
| Upgrade | "Bienvenido a [Plan]!" | Features adicionales | "Configurar [feature]" |
7.2. Post-Upgrade Perfect¶
Para upgrade a Perfect, destacar configurar Recovery Key:
- Es un paso de seguridad importante
- CTA primario: "Configurar Recovery Key"
- CTA secundario: "Despues"
8. Interacciones¶
8.1. Navegacion Post-Confirmacion¶
| CTA | Destino |
|---|---|
| Comenzar a usar | Home con features desbloqueadas |
| Agregar medicamentos | SCR-MED-003 |
| Invitar cuidadores | SCR-USR-005 |
| Configurar sync | Settings sync |
| Configurar Recovery Key | MTS-AUTH-001 Recovery |
| Despues | Home |
8.2. Prevenir Navegacion Atras¶
Esta pantalla no debe permitir volver al checkout:
- Back button: Ir a Home
- Gesture back: Ir a Home
9. Email de Confirmacion¶
Se envia automaticamente al completar:
Asunto: Tu suscripcion a MedTime [Plan] esta activa
Contenido:
- Confirmacion del plan
- Fecha de renovacion
- Precio
- Link a gestionar suscripcion
- Link a soporte
10. Accesibilidad¶
10.1. Screen Reader¶
| Elemento | Label | Hint |
|---|---|---|
| animation | "Compra exitosa" | - |
| title | "[Titulo completo]" | - |
| feature_card | "[Titulo]: [descripcion]" | "Toca para ir a [feature]" |
| trial_notice | "Tu prueba termina el [fecha]" | - |
10.2. Reduce Motion¶
Si prefers-reduced-motion:
- Sin animacion de check
- Sin confetti
- Check estatico aparece inmediatamente
11. Eventos de Analytics¶
| Evento | Trigger | Parametros |
|---|---|---|
| subscription_confirmed | Mostrar pantalla | plan, period, is_trial, is_upgrade |
| feature_card_tapped | Tap en feature | feature_name |
| recovery_key_setup_started | Tap configurar (Perfect) | - |
| recovery_key_setup_skipped | Tap despues | - |
| confirmation_completed | Tap CTA principal | time_on_screen |
12. Casos de Prueba¶
| ID | Caso | Resultado Esperado |
|---|---|---|
| TC-001 | Nueva suscripcion Pro | Titulo "Bienvenido a Pro!" |
| TC-002 | Trial iniciado | Muestra fecha fin trial |
| TC-003 | Upgrade a Perfect | Muestra Recovery Key CTA |
| TC-004 | Animacion con reduce motion | Sin animacion |
| TC-005 | Tap feature card | Navega a feature |
| TC-006 | Back gesture | Va a Home |
13. Referencias¶
Documento generado por MobileUxUiDrone (Eight of Eight)