ChromaAI: rediseño de una plataforma de contenido con IA en más de 100 pantallas

ChromaAI es una plataforma para creadores: un único lugar para generar imágenes y vídeos con IA, añadir subtítulos y voces, y convertir ideas en publicaciones listas para redes. Su misión es ambiciosa: que cualquiera pueda trabajar como un creador de contenido profesional.

Cuando el equipo contactó conmigo, la tecnología ya estaba ahí. La experiencia, no. El producto funcionaba, pero parecía un MVP funcional, y eso no hacía justicia a todo lo que era capaz de hacer. Mi trabajo fue rediseñar la experiencia completa para que el producto se viera tan bien como funcionaba.

Cada herramienta de IA se había construido por separado, y se notaba. Pasar de una a otra era como cambiar de app. En la auditoría aparecían los mismos problemas en casi todas las pantallas:

• Maquetación y ritmo vertical débiles: páginas recargadas y difíciles de escanear.
• Lógica de botones confusa y estados incoherentes.
• Diferencias visuales entre módulos que deberían parecer un solo producto.
• Navegación sin una estructura ni prioridades claras.
• Tipografía que no escalaba ni guiaba la mirada.

El resultado: el usuario tenía que reorientarse en cada pantalla, y toda la plataforma parecía dispersa y lenta, aunque no lo fuera.

Rediseñar 100 pantallas una a una habría dado 100 pantallas bonitas que seguirían sin encajar entre sí. Así que empecé por la estructura que compartirían todas las herramientas, y solo después diseñé las pantallas encima. Cuatro cambios marcaron la diferencia.

1. Una misma maquetación para todas las herramientas

Reconstruí la maquetación vertical sobre una retícula más sólida y con un recorrido de lectura claro: qué hace la herramienta, la entrada, los ajustes y el resultado. Todas siguen el mismo lenguaje, así que aprender una es saber usarlas todas.

2. Una navegación que siempre te dice dónde estás

Una barra lateral fija agrupa las herramientas donde tiene sentido, y una barra superior simplificada recoge las acciones de cada página. Los nombres de las herramientas son claros y siempre visibles.

3. Botones, estados y respuestas en los que confiar

Los botones están unificados en todo el producto: las acciones principales usan un color fuerte y tamaños uniformes. Los estados hover, los indicadores de carga y los tooltips forman parte del sistema. En un producto de IA, donde generar lleva su tiempo, un buen feedback es lo que hace que la espera se haga corta.

4. Una librería de componentes detrás de cada módulo

Del generador de imágenes a las plantillas, todos los módulos usan los mismos componentes: tarjetas, desplegables, campos, sliders, interruptores y campos para subir archivos. Ahora las herramientas nuevas se diseñan en días, sin empezar de cero.

El rediseño también incluyó la web, para que el recorrido desde la primera visita hasta la primera creación parezca un solo producto. La landing abre con la promesa, crea contenido viral en minutos, no en días, y recorre las herramientas, las opiniones de usuarios y los precios, con una llamada a la acción clara en cada paso.

Para explicar el producto rápido, hice un vídeo de lanzamiento animado. En lugar de imágenes abstractas, muestra la interfaz real y cómo se usa: un prompt o un archivo, y después cada herramienta paso a paso, generando un vídeo, añadiendo subtítulos y creando un post para redes sin saber editar.

Todas las animaciones están hechas con componentes reales de la interfaz, así el vídeo es coherente con el producto. Una iluminación suave y algo de profundidad 3D le dan acabado sin que parezca otra app. No tiene voz en off: lo cuentan las imágenes, el movimiento y los textos, así que funciona sin sonido, que es como se ven la mayoría de los vídeos en internet.

ChromaAI tiene ahora un sistema coherente y escalable en la web, el panel completo y todas sus herramientas, además de un vídeo que enseña lo que hace el producto en menos de un minuto. La interfaz es limpia, moderna y pensada para creadores, con un camino claro desde la landing hasta la primera creación.

1. Arregla el sistema antes que las pantallas. Una maquetación, una navegación y unos componentes compartidos hacen que muchas funciones parezcan un solo producto.
2. Diseña la espera. Generar con IA lleva tiempo. El progreso, las vistas previas y el historial son pantallas clave, no casos límite.
3. Enseña el producto real. Un vídeo hecho con la interfaz de verdad genera expectativas realistas y sirve también como tour del producto.