Generador web con IA de qdq usando tres datos, presentado en el MWC 2024
Impacto: MWC 2024, vendido a partners
Stack
- Figma
- Miro
- OpenAI/ChatGPT
- eformless
- GA4
Resumen del proyecto
Los autónomos y pequeños negocios sin presencia digital se enfrentan a un problema simple: crear una web es lento, caro y requiere conocimientos técnicos que no tienen. Esta herramienta con IA genera un sitio completo (copy, imágenes y estructura) a partir de solo tres datos. Un producto real en producción, presentado en el Mobile World Congress 2024.
Reto
Crear una web requiere tiempo, dinero y habilidades técnicas que la mayoría de autónomos no tiene. Las herramientas existentes son demasiado complejas o requieren una configuración manual extensa. El objetivo era reducir este proceso a minutos: tres campos de entrada, una web lista para publicar.
Mi rol · Product Design UX/UI · Definición de funcionalidades, diseño de interfaz, tests de usabilidad internos, en colaboración con el equipo de desarrollo.
Objetivos
Objetivos de negocio
- Aumentar las tasas de activación del producto.
- Reducir el tiempo del embudo de generación.
- Escalar el producto como modelo white-label para terceros.
- Modelo freemium: prueba gratuita, publicación desde 5-6€/mes.
Objetivos de usuario
- Generar una web sin conocimientos técnicos.
- Obtener un resultado limpio y adaptado al negocio en minutos.
- Editar el resultado fácilmente sin ayuda externa.
- Mantener una presencia digital activa sin invertir mucho tiempo ni dinero.
1. Exploración y contexto
- Dirigido a autónomos y pequeños negocios sin presencia digital ni conocimientos técnicos.
- Se analizaron herramientas no-code y generadores web para identificar oportunidades de simplificación.
- Coordinación con desarrollo para asegurar que la IA (ChatGPT) devolviera resultados estructurados y coherentes con el diseño.
- Se definieron categorías de negocio, tipos de imagen y estructuras de copy por plantilla.
2. Diseño del flujo y decisiones iniciales
El mayor reto fue coordinarse con desarrollo para que la IA devolviera resultados coherentes según las definiciones de diseño.
Trabajamos plantilla a plantilla para dar una base sólida que permitiera a la IA generar contenido en cada sección.
Se definieron con precisión las categorías de negocio, rangos de color por sector y tipos de imagen para que el resultado generado fuera siempre relevante.
Los usuarios podían regenerar el resultado hasta dos veces o editar el contenido directamente si no quedaban satisfechos.
| Problema identificado | Decisión de diseño | Impacto esperado |
|---|---|---|
| Alta tasa de abandono en la primera pantalla (detectada vía analítica) | Se eliminó la pantalla de introducción: flujo reducido de 3 a 2 pasos | Mejora directa en la tasa de finalización del embudo |
| Los usuarios no sabían editar su web a través del CMS (Duda) | Se integró una guía de edición en el flujo de activación | Reducción de la fricción post-generación y de las llamadas a soporte |
| Ruptura en el flujo: había que publicar antes de poder editar, sin indicarlo | Se añadió un botón visible de "Publicar" en la parte superior | Flujo lineal sin abandono de pantallas |
| El producto era difícil de vender como algo independiente | Se creó un componente de marca dinámico adaptable por partner | Escalabilidad: comercializado con partners como CE Consulting y AECEM |
3. Iteraciones clave
- Basada en analítica: Se eliminó la pantalla de bienvenida tras detectar una tasa de rebote muy alta, simplificando el flujo a solo 2 pantallas.
- Basada en usabilidad: Se añadió un manual de edición integrado en el flujo al detectar que los usuarios tenían dificultades con el CMS (Duda) tras la generación.
- Optimización de flujo: Se señalizó claramente la acción de "Publicar" para evitar el cuello de botella anterior, donde los usuarios se quedaban bloqueados antes de poder editar.
4. Escalabilidad
El bloque de marca lateral se diseñó como un componente dinámico, permitiendo a los partners cambiar colores, imágenes y logos sin un rediseño completo.
Comercializado con éxito con partners como CE Consulting y AECEM.
a) Entregables clave
Presentado en el MWC 2024 ante cientos de asistentes que completaron el flujo en directo, el producto demostró que solo tres datos bastan para generar una web lista para publicar. El embudo de conversión se redujo de 3 a 2 pantallas gracias al análisis de datos reales, y la fricción post-generación se resolvió mediante un flujo guiado integrado. El componente de marca dinámico permitió escalar el producto entre partners como CE Consulting y AECEM.
b) Aprendizajes de diseño
Diseñar un producto basado en IA obliga a pensar en las restricciones del resultado, no solo en las entradas del usuario. La decisión más crítica no fue sobre la interfaz, sino sobre la coordinación: definir con precisión las categorías de negocio, paletas de color y tipos de imagen para que la IA generara un resultado coherente con el sistema de diseño. Lo que parecía un problema de desarrollo era en realidad un reto de diseño de sistema. También confirmó que la analítica no es negociable: una pantalla de bienvenida con alta tasa de rebote fue la señal exacta que desbloqueó la mejora más importante del embudo.
c) Próximos pasos
- Realizar tests de usabilidad formales con autónomos reales para identificar puntos de fricción que la analítica cuantitativa no detecta.
- Explorar personalización progresiva: permitir a los usuarios ajustar paletas de color, tipografía y tono de copy sin salir del flujo de generación.
- Desarrollar un panel de métricas post-publicación para que los usuarios puedan seguir el rendimiento de su web directamente en la plataforma.
Resultado
Presentado en el MWC 2024: los asistentes completaron el flujo en directo y valoraron la rapidez de los resultados. Embudo reducido de 3 a 2 pantallas gracias al análisis de datos. Resuelta la principal fricción post-generación mediante una guía integrada. Producto escalable comercializado activamente con partners.
