Qué hace
- Ruta completa: de la bienvenida a la encuesta, con OTP, selfie, INE, minijuego, datos, domicilio en mapa, oferta, agenda y día de pago.
- Guarda cada paso en el teléfono (IndexedDB, con copia en localStorage). Al reabrir retoma en el último checkpoint —domicilio, oferta o agenda— y muestra el folio.
- Esperas reales: 20 s (selfie y RENAPO), 45 s (INE), 40 s (evaluación) y 18 s (agenda). El modo demo las acelera ×10.
- Cámara, ubicación y mapa reales (OpenStreetMap). En un equipo sin cámara ofrece una captura simulada.
- Instalable y sin red: manifest, íconos y service worker. Sin señal avisa y no pierde lo capturado.
- Probada: pruebas de la máquina de estados que pasan por los 75 nodos, y pruebas e2e con un préstamo completo, cerrar y retomar, un rechazo y la pérdida de señal.
Cómo probarla
- El código OTP llega como notificación arriba de la pantalla: tócala y se llena solo.
- Código postal 03100 (también 06700, 14000, 44100) llena colonia, municipio y estado.
- En el mapa, toca dentro del círculo para mover el pin. Fuera de la zona el círculo se pone rojo y no deja confirmar.
- Cinco toques en el logo abren el panel de escenarios: rechazos, bloqueos, errores de servicio, velocidad y «empezar de cero».
- Recarga a la mitad del flujo para ver cómo retoma.
Estado por pantalla
Hecha: igual al Figma y funcionando. Con diferencias: funciona, pero algo cambia contra el Figma; la nota dice qué. Cada estación enlaza a su ficha de la ruta.
Onboarding
| Estación | Estado | Notas |
|---|---|---|
| 1. Bienvenida 1/5 | Hecha | Carrusel de 5 tarjetas con scroll-snap y puntos |
| 2. Bienvenida 2/5 | Hecha | — |
| 3. Bienvenida 3/5 | Hecha | — |
| 4. Bienvenida 4/5 | Hecha | — |
| 5. Bienvenida 5/5 | Hecha | — |
Producto
| Estación | Estado | Notas |
|---|---|---|
| 6. Elige cómo usarás tu préstamo | Hecha | — |
| 7. Categoría seleccionada | Hecha | — |
Simulador
| Estación | Estado | Notas |
|---|---|---|
| 8. ¿Cuánto dinero necesitas? | Hecha | Pago semanal calibrado: $22,000 a 100 semanas = $525 |
| 9. Simulación lista | Con diferencias | Plazos 128…4 del Figma (el flujo.json decía «128 a 25») |
Datos de contacto
| Estación | Estado | Notas |
|---|---|---|
| 10. ¡Vamos por tu préstamo! | Hecha | — |
| 11. Nombre capturado | Hecha | Los datos de María solo aparecen como placeholder |
| 12. Celular capturado | Hecha | Mensajes de error del Figma |
| 13. Formulario completo | Hecha | — |
Verificación OTP
| Estación | Estado | Notas |
|---|---|---|
| 14. Verifica tu número | Con diferencias | 6 dígitos (catálogo pendiente). El SMS llega como notificación simulada y se autocompleta |
| 15. Captura parcial | Con diferencias | Igual que 14 |
| 16. Código completo | Con diferencias | «Código expirado» no está en el Figma |
| 17. Validando código | Hecha | Alterna SMS y WhatsApp |
| 18. Número verificado | Hecha | Aquí nace el folio |
Asesor
| Estación | Estado | Notas |
|---|---|---|
| 19. ¿Te está ayudando un asesor? | Hecha | — |
| 20. Número de empleado | Hecha | — |
| 21. Número capturado | Hecha | — |
Selfie
| Estación | Estado | Notas |
|---|---|---|
| 22. ¡Empezamos con tu selfie! | Hecha | — |
| 23. Permiso de cámara | Hecha | Pide la cámara real; sin cámara ofrece la captura simulada |
| 24. Permiso de ubicación | Hecha | Geolocalización real |
| 25. Cargando cámara | Hecha | — |
| 26. ¡Prepárate para la foto! | Hecha | — |
| 27. Encuadre | Con diferencias | Se conecta con «Acércate» (catálogo pendiente: en el prototipo no avanzaba) |
| 28. Acércate | Hecha | — |
| 29. No te muevas | Hecha | Aquí se toma la foto |
| 30. Procesando | Hecha | — |
| 31. ¡Listo! | Hecha | — |
| 32. Validando tu foto | Hecha | Espera de 20 s |
| 33. ¡Qué gran foto! | Hecha | — |
INE (INCODE 2.0)
| Estación | Estado | Notas |
|---|---|---|
| 34. Ten tu INE a la mano | Hecha | — |
| 35. Permiso de ubicación (PWA) | Hecha | — |
| 36. INCODE: ubicación | Hecha | Diálogo simulado de Safari |
| 37. INCODE: cámara | Hecha | — |
| 38. Tutorial: frente | Hecha | — |
| 39. Captura del frente | Hecha | Cámara trasera real o captura simulada |
| 40. Procesando frente | Hecha | — |
| 41. Reverso | Hecha | — |
| 42. Cierre | Hecha | — |
Minijuego de espera
| Estación | Estado | Notas |
|---|---|---|
| 43. ¿Qué tanto sabes de finanzas? | Hecha | La validación de la INE (45 s) corre de fondo |
| 44. Trivia | Hecha | — |
| 45. Trivia respondida | Con diferencias | Se corrige la errata «improvistos» → «imprevistos» |
| 46. ¡Tu INE se validó con éxito! | Hecha | — |
Datos personales
| Estación | Estado | Notas |
|---|---|---|
| 47. María, confirma tus datos | Con diferencias | Etiquetas en #686f72 en vez de #d0d1d0, que no pasa AA (1.5:1). Arranca en edición porque el OCR simulado solo propone el nombre |
| 48. Datos completos | Con diferencias | «Segundo apellido (opcional)» y máscara DD/MM/AAAA son nuestras; error «Verifica este dato» del Figma |
| 49. Verificando tus datos | Hecha | 20 s contra RENAPO simulado |
| 50. Vamos a verificar tu domicilio | Hecha | Checkpoint «domicilio» |
Domicilio
| Estación | Estado | Notas |
|---|---|---|
| 51. Confirma tu dirección | Con diferencias | Errata corregida a «¿Vives en la misma…?» (catálogo pendiente). El contador del CP es /5, no /25. Bajo el CP se agregan municipio y estado |
| 52. Dirección capturada | Con diferencias | Si el CP no está en la muestra simulada, la colonia se escribe en lugar de elegirse |
| 53. Más referencias | Con diferencias | Botón «No aplica» por calle (el Figma solo lo pide en texto) |
| 54. Referencias capturadas | Hecha | — |
| 55. Ubica tu domicilio | Con diferencias | Las ayudas se cierran solas o al tocar. El pin se mueve tocando el mapa o arrastrándolo; el mapa no se desliza bajo un pin fijo |
| 56. Zoom en el mapa | Con diferencias | Igual que 55; el ícono de la mano es un carácter, no la ilustración |
| 57. Pin colocado | Hecha | Leaflet/OSM. Geocerca de 400 m (3 km si el CP no está en la muestra). Fuera de ella: círculo rojo, mensaje y «Confirmar» apagado |
| 58. ¿Este es tu domicilio? | Con diferencias | Foto fija de referencia; en producción es la vista de calle de la dirección |
Evaluación
| Estación | Estado | Notas |
|---|---|---|
| 59. ¡Vamos por tu préstamo! | Hecha | Cuatro mensajes en 40 s |
| 60. ¡Tu oferta está casi lista! | Con diferencias | Barra de avance de las demás esperas, no el riel con brillo del Figma |
| 61. Millones como tú ya usan Banco Azteca | Con diferencias | Igual que 60 |
| 62. ¡Tenemos el resultado! | Con diferencias | Igual que 60 |
Oferta
| Estación | Estado | Notas |
|---|---|---|
| 63. Te podemos prestar | Hecha | Checkpoint «oferta». Variantes por familia con su ilustración (25124:203948, 204227, 204486). Las tarjetas «O llévate» se pueden elegir |
Agendamiento
| Estación | Estado | Notas |
|---|---|---|
| 64. Agenda una visita | Hecha | Checkpoint «agenda» |
| 65. Tu visita: día | Hecha | Siete días a partir de mañana con disponibilidad simulada |
| 66. Tu visita: hora | Hecha | — |
| 67. Hora elegida | Hecha | — |
Día de pago y contrato
| Estación | Estado | Notas |
|---|---|---|
| 68. Elige tu día de pago | Con diferencias | «Domingo» queda a la izquierda, no centrado |
| 69. Día elegido | Con diferencias | El enlace «Contrato de préstamo» abre un resumen nuestro; el texto legal es de Jurídico |
| 70. Agendando tu visita | Hecha | 18 s. Si el horario se ocupó, regresa a elegir con aviso |
| 71. Tu asesor te visitará | Hecha | «Agregar a mi calendario» descarga un .ics generado en el teléfono |
Cierre y encuesta
| Estación | Estado | Notas |
|---|---|---|
| 72. Completaste tu solicitud | Hecha | — |
| 73. Encuesta de satisfacción | Con diferencias | Emojis Unicode en vez de las imágenes del Figma |
| 74. Encuesta respondida | Con diferencias | Igual que 73 |
| 75. Gracias (final) | Hecha | Con aviso «¡Gracias por tu opinión!» |
Ramales
Fuera de la ruta, cada uno con su pantalla y su salida. Se recorren desde el panel de escenarios.
- Bloqueo OTP
- Cámara negada
- Busca tu sucursal, con detalle y fin
- Bloqueo por intentos o listas
- Rechazos con contador y fonética
- «Agradecemos tu confianza» (7723:327378)
- Los 12 errores de servicio del catálogo
Decisiones tomadas
Flujo y regresos
- Orden de arranque como el prototipo: Bienvenida → Categoría → Simulador → Contacto → OTP. Lo eligió Alexis.
- Contrato: se acepta en «Día de pago», con enlace para leerlo. Lo eligió Alexis.
- «Problemas con el correo» regresa a *datos de contacto*. El tablero decía «Flujo de dirección», pero ahí no se captura correo.
- «Fuera de México» regresa a *dirección*. El tablero no lo indicaba.
- «Sesión expirada» regresa al último checkpoint, o a *contacto* si no hay ninguno.
- «Error de OTP» usa la ilustración y el texto «¡Algo salió mal!».
- Rechazo: «De acuerdo» borra la solicitud y vuelve a la bienvenida.
- Folio: nace al verificar el celular, con formato
SU-AAMMDD-XXXXXXy sin caracteres ambiguos. - Al reabrir la app:
- Antes de domicilio, se retoma en la pantalla donde estaba. Si estaba en una espera, se va a su punto de reanudación.
- Después de un checkpoint, se retoma en ese checkpoint.
- Después de la visita confirmada, se queda donde estaba.
Datos e identidad
- El OCR simulado no inventa identidad: propone solo el nombre capturado y la persona completa el resto. Con INCODE real llegan todos los campos.
- Geocerca:
- 400 m alrededor del centro de un CP conocido.
- 3 km cuando el CP no está en la muestra; en ese caso el centro es la ubicación del teléfono si cae en el mismo estado, y si no, la capital del estado.
- Oferta distinta a lo pedido:
- Se usan las variantes por familia del Figma.
- Arriba se agrega «Por ahora no podemos prestarte para {lo pedido}, pero tenemos esto para ti:». Es copy nuestro y está pendiente de validar con Negocio.
- «Recuerda que tienes disponible» muestra las otras familias de la oferta, como en el Figma. Si la persona aceptó una familia, esa va primero.
- Sin cámara (escritorio, o permiso «no disponible»), la selfie y la INE usan una captura simulada que dice que es simulada. Si la persona niega el permiso, va al ramal de cámara negada.
Accesibilidad y copy
- Contraste AA: etiquetas de solo lectura en #686f72.
- Erratas corregidas: «¿Vives es en…» → «¿Vives en…»; «improvistos» → «imprevistos».
- Cámara negada en la selfie: no tiene pantalla en el Figma, así que el copy es nuestro.
Técnicas
- Satoshi se empaqueta local (no está en Google Fonts).
- Olivia abre una hoja de ayuda con el objetivo de la etapa y el folio.
- Service worker:
- Se registra fuera de
localhost(en local, con?sw=1). - Guarda la app y sus archivos.
- No guarda los mosaicos del mapa.
- Se registra fuera de
npm run checkcompila en.next-checkpara no romper unnpm run devencendido.- Respaldo en localStorage: siempre lleva una copia de la solicitud, sin fotos. Solo se lee si IndexedDB no está o viene vacío, por ejemplo cuando el navegador desaloja datos.
- Escenarios por URL (
?velocidad=rapida&camara=simulada&ubicacion=simulada…) para demos y pruebas. Se agregóubicacion: simulada(Del Valle, CDMX).
Por decidir
- Copy de «oferta distinta» (decisión 12): validar con Negocio.
- Contrato: texto legal real y si se firma en la visita o antes. Hoy es un resumen.
- Fachada: fuente real de la foto (Street View u otra) y qué pasa tras «No es mi fachada» más de una vez. Hoy regresa al mapa sin límite.
- Copy propio que confirmar con UX Writing:
- Cámara negada en la selfie.
- «Código expirado».
- Avisos de horario ocupado y de pin fuera de la zona.
- OTP de 6 dígitos: confirmar contra el proveedor real de SMS.
- Radio de la geocerca (400 m / 3 km): confirmar con Riesgos.
- Ilustraciones de emojis de la encuesta y de la mano en las ayudas del mapa: exportarlas del Figma si se quiere fidelidad total.
Fuente: data/app.json (copia en docs/ou2-pwa-estado-pantallas_2026-10-21-v1.md).