Pantalla: Detalle Plan Pro
Identificador: SCR-PAY-002
Nombre: Detalle Plan Pro
Modulo: MTS-PAY-001 - Pagos y Suscripciones
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
| Atributo |
Valor |
| Tipo |
Detalle de producto |
| Acceso |
SCR-PAY-001 > Ver detalles Pro |
| Roles |
Todos (excepto Pro/Perfect activos) |
| Tiers |
Free principalmente |
| Prioridad |
Alta |
2. Proposito
Presenta las caracteristicas detalladas del plan Pro con explicaciones claras de cada beneficio, permitiendo al usuario entender el valor antes de suscribirse.
3. Wireframe
+--------------------------------------------------+
| [<] Plan Pro |
+--------------------------------------------------+
| |
| [Pro icon/illustration] |
| |
| PRO |
| El mas popular |
| |
| $9.99/mes |
| o $99.99/ano (ahorra 17%) |
| |
+--------------------------------------------------+
| POR QUE ELEGIR PRO |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [pill-icon] Medicamentos ilimitados | |
| | | |
| | Agrega todos tus medicamentos sin limite. | |
| | En Free solo puedes tener 3. | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [no-ads] Sin anuncios | |
| | | |
| | Experiencia limpia sin interrupciones. | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [cloud-icon] Sincronizacion segura | |
| | | |
| | Tus datos respaldados y sincronizados | |
| | en todos tus dispositivos. | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [people-icon] Hasta 5 cuidadores | |
| | | |
| | Comparte tu informacion con familiares | |
| | que pueden ayudarte. | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [history-icon] Historial completo | |
| | | |
| | Accede a todo tu historial de tomas, | |
| | no solo los ultimos 30 dias. | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [export-icon] Exportar datos | |
| | | |
| | Descarga PDFs para compartir con tu | |
| | medico o para tus registros. | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | [sms-icon] 3 SMS de alerta al mes | |
| | | |
| | Notificaciones por SMS cuando faltan | |
| | tomas importantes. | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| |
| Prueba gratis por 7 dias |
| No se te cobrara hasta que termine |
| |
| [Comenzar prueba gratuita] |
| |
| Puedes cancelar en cualquier momento |
| |
+--------------------------------------------------+
4. Elementos de UI
4.1. Componentes
| ID |
Componente |
Tipo |
Requerido |
| header |
Top App Bar |
CMP-NAV-002 |
Si |
| hero_section |
Plan Hero |
Custom |
Si |
| price_display |
Price Display |
Custom |
Si |
| feature_cards |
Feature Card List |
Custom |
Si |
| trial_banner |
Trial Info Banner |
Custom |
Condicional |
| cta_button |
Primary Button |
CMP-BTN-001 |
Si |
| cancel_note |
Footer Text |
- |
Si |
4.2. Feature Card
+----------------------------------------------+
| [icon] Titulo del beneficio |
| |
| Descripcion de 1-2 lineas explicando |
| claramente que obtiene el usuario. |
+----------------------------------------------+
Especificaciones:
- Padding: 16dp
- Icon: 24x24dp, primary color
- Titulo: 16sp medium
- Descripcion: 14sp regular, neutral.600
- Background: neutral.50
- Border radius: 8dp
- Margin vertical: 8dp
5. Estados
5.1. Segun Usuario
| Usuario |
Hero |
CTA |
| Free sin trial usado |
"Prueba gratis 7 dias" |
"Comenzar prueba gratuita" |
| Free con trial usado |
"$9.99/mes" |
"Suscribirse" |
| Perfect (downgrade) |
"$9.99/mes" |
"Cambiar a Pro" |
5.2. Segun Periodo Seleccionado
| Periodo |
Precio Mostrado |
| Mensual |
"$9.99/mes" |
| Anual |
"$99.99/ano ($8.33/mes) - Ahorra 17%" |
6. Beneficios Detallados
| Beneficio |
Icono |
Descripcion |
| Medicamentos ilimitados |
pill |
Sin limite vs 3 en Free |
| Sin anuncios |
no-ads |
Experiencia sin interrupciones |
| Sync cloud |
cloud |
Backup y multi-dispositivo |
| 5 cuidadores |
people |
Familia puede ayudar |
| Historial completo |
history |
Todo el historial vs 30 dias |
| Exportar PDF |
export |
Reportes para medico |
| 3 SMS/mes |
sms |
Alertas criticas por SMS |
7. Interacciones
7.1. Gestos
| Gesto |
Elemento |
Accion |
| Scroll |
Pantalla |
Ver todos los beneficios |
| Tap |
CTA |
Navegar a SCR-PAY-004 |
| Tap |
Back |
Volver a SCR-PAY-001 |
7.2. CTA Behavior
Al tap en CTA:
- Si trial disponible: Navegar a checkout con trial
- Si trial usado: Navegar a checkout con pago directo
- Pasar plan="pro" y period al checkout
8. Accesibilidad
8.1. Screen Reader
| Elemento |
Label |
Hint |
| hero |
"Plan Pro, [precio]" |
- |
| feature_card |
"[Titulo]: [descripcion]" |
- |
| cta_trial |
"Comenzar prueba gratuita de 7 dias" |
"No se cobra hasta terminar prueba" |
| cta_subscribe |
"Suscribirse a Pro por [precio]" |
- |
8.2. WCAG Compliance
| Criterio |
Estado |
| Contraste |
OK (4.5:1 textos) |
| Target size |
OK (CTA 48dp) |
| Focus order |
OK (secuencial) |
9. Eventos de Analytics
| Evento |
Trigger |
Parametros |
| pro_detail_viewed |
Abrir pantalla |
source |
| feature_scrolled |
Scroll a feature |
feature_name |
| trial_cta_tapped |
Tap CTA con trial |
period |
| subscribe_cta_tapped |
Tap CTA sin trial |
period |
10. Casos de Prueba
| ID |
Caso |
Resultado Esperado |
| TC-001 |
Usuario Free sin trial |
Mostrar CTA trial |
| TC-002 |
Usuario Free con trial usado |
Mostrar CTA suscribir |
| TC-003 |
Scroll completo |
Todas las features visibles |
| TC-004 |
Tap CTA |
Navegar a checkout |
11. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)