Mi Duende Mágico — Preguntas de diseño para el cliente

Pregunta 1

Campo "Virtudes" en el perfil del niño

El Figma incluye una sección que no estaba en nuestros wireframes

Lo que vemos en el Figma

Figma: Personalización — formulario de perfil del hijo/a

Sección nueva

La sección "Virtudes" aparece al final del formulario, debajo de Intereses. En el Figma se ven estos valores pre-cargados:

Las 3 cosas que necesitamos confirmar antes de construir este formulario:

¿Cuántas virtudes puede elegir el padre? Intereses tiene un límite de 5 — ¿Virtudes también?
¿Es obligatorio o opcional? Si el padre no elige ninguna, ¿el cuento igual se genera?
¿Cómo se usan en el cuento? ¿La virtud seleccionada aparece en el texto, o solo guía el tono narrativo?

Texto para enviar al cliente

"Vimos la sección 'Virtudes' en el perfil del niño — genial idea. Necesitamos tres datos para construirla: (1) ¿cuántas puede elegir el padre? (2) ¿es obligatoria? (3) ¿la virtud aparece explícitamente en el texto del cuento o solo influye el tono?"

Pregunta 2

Vista del cuento personalizado (usuario con plan)

Tenemos 2 versiones sin suscripción diseñadas. La versión pagada no existe.

Lo que SÍ está diseñado — versiones sin suscripción

Cuento genérico — usuario sin suscripción

El usuario ve el cuento de muestra con el placeholder "xx" y un CTA para ir a planes.

Cuento Santa — usuario sin suscripción

Misma estructura, versión Santa. Sidebar rojo con personajes (Santa, Duendes, Renos).

vs. lo que nos falta

Lo que NO está diseñado — la versión que el padre paga para ver

🎧

Cuento personalizado

Usuario con plan activo, nombre del hijo en el título, audio personalizado con la voz de Nöelia, botones de compartir y descargar MP3.

SIN DISEÑO

Esta pantalla es la razón por la que el padre paga. Diferencias respecto a la versión sin suscripción:

Título del cuento con el nombre real del hijo ("Carta del Viejito Pascuero para Sofía")
Audio player etiquetado como "Personalizado para Sofía" (no "Genérica")
Sin paywall inline, sin CTA "Ver planes"
Botones adicionales: compartir (WhatsApp/email), descargar MP3, eliminar cuento
Barra de progreso de escucha guardada entre sesiones

Texto para enviar al cliente

"En el Figma tenemos el cuento en versión de muestra (sin personalizar). Nos falta ver cómo se ve ese mismo cuento cuando el padre YA pagó y escucha el audio con el nombre de su hijo. ¿Pueden enviarnos ese diseño? Es la pantalla principal del producto."

Pregunta 3

Diseños mobile

Los 22 frames del Figma son todos desktop (~1440px). El producto se usa en celular.

El problema

22

frames en el Figma

0

frames mobile

1440px

ancho de todos los frames

El producto es un audiocuento para la hora de dormir. El padre tipicamente está sentado al lado de la cama del hijo, con el celular. Usar la app en desktop es la excepción, no la regla.

Nav roja con dropdown de "Mi cuenta"

no funciona con touch

El nav dropdown actual no es touch-friendly

Pantallas que más importan diseñar en mobile:

Library / Cuentos — grid de cards tiene que reorganizarse en 1 columna
Story detail / audio player — la principal pantalla de uso, en el celular
Formulario de personalización — los chips de Apariencia/Intereses/Virtudes deben ser seleccionables con el pulgar
Nav — el dropdown de "Mi cuenta" necesita una alternativa (hamburger, bottom bar, etc.)

Podemos derivar el mobile del desktop si el cliente nos autoriza. No necesariamente tienen que diseñarlo ellos.

Texto para enviar al cliente

"Los diseños son todos desktop. El producto se usa principalmente en celular (audiocuento hora de dormir). ¿Tienen diseños mobile, o los derivamos nosotros del desktop? Si los derivamos nosotros, ¿pueden validar el resultado antes de que implementemos?"

Pregunta 4

Pantalla de espera mientras se genera el cuento

El momento más importante del producto no tiene diseño.

Cuando el padre hace clic en "Generar mi cuento", el sistema tarda entre 30 y 90 segundos en crear el audio personalizado. Durante ese tiempo, ¿qué ve el padre?

⏳

Pantalla de espera

El cuento con el nombre de Sofía se está creando. Sin diseño, el padre ve un spinner genérico — y probablemente piense que algo falló.

SIN DISEÑO

Esta pantalla necesita:

Texto que explique que el duende está creando el cuento para "[Nombre]"
Barra de progreso o animación que transmita que algo está pasando
Tiempo estimado de espera (30-90 segundos)
Calidez visual — es el momento de máxima anticipación del padre

Si el cliente no tiene diseño, lo podemos proponer nosotros con /design-shotgun.

Texto para enviar al cliente

"Cuando el padre hace clic en 'Generar mi cuento', el sistema tarda 30-90 segundos. ¿Tienen diseño para esa pantalla de espera? Si no, la proponemos nosotros."

Pregunta 5

Página de entrada para el QR de la caja Copec (/santa)

El QR de la caja física necesita una pantalla de bienvenida propia — no tenemos ese diseño.

Lo que SÍ tenemos — el cuento de Santa ya está diseñado

Figma: Ejemplo cuento santa — la página del cuento en sí (con audio player y CTA de personalización)

Esta pantalla es el cuento ya abierto. Tiene el texto, el audio player, y el CTA "¿Y si la carta estuviera dirigida a tu hijo/a? Ver planes."

vs. lo que nos falta

Lo que NO tenemos — la pantalla donde llega el QR

📦

Página /santa

El padre escanea el QR de la caja y llega aquí antes de ver el cuento. Es la primera impresión del producto.

SIN DISEÑO

El flujo completo es:

QR en caja Copec → escanea el padre
/santa (falta diseño) → página de bienvenida con hero, copy de campaña, y CTAs
Ejemplo cuento santa (diseñado) → el cuento en detalle
Personalizar → signup + paywall

Esta página tiene que capturar la atención del padre en 3 segundos. Es la puerta de entrada de la campaña Copec.

Referencia visual: usar el mismo shell del cuento de Santa (sidebar rojo + contenido crema) pero como landing, no como cuento.

Texto para enviar al cliente

"El QR de la caja Copec lleva a /santa — necesitamos diseñar esa pantalla de bienvenida. En el Figma tenemos el cuento de Santa en detalle, pero no la página donde aterriza el padre al escanear el QR. ¿Pueden diseñarla? La referencia visual es el mismo shell del cuento (sidebar rojo + contenido crema), pero como landing: hero, texto de campaña, y dos CTAs: 'Escuchar carta de muestra gratis' y 'Personalizar para mi hijo/a'."