Rediseño de un producto SaaS: checklist de UI/UX en 12 puntos

La mayoría de los productos SaaS no se diseñan. Se acumulan. Se lanza una funcionalidad, luego otra, cada una hecha por una persona distinta y con un plazo distinto, hasta que el producto funciona pero parece un conjunto de herramientas sueltas.

Hace poco rediseñé más de 100 pantallas de ChromaAI, una plataforma de contenido con IA. Esta es la checklist que uso en cada rediseño de producto digital, en el mismo orden en que la aplico.

1. Audita cada pantalla y cada estado

Haz capturas de todo: cada página, pero también los estados vacíos, los errores, las cargas, los modales y los emails. Ponlas una al lado de otra. Las incoherencias que nunca verías pantalla a pantalla saltan a la vista.

2. Decide qué tiene que conseguir el rediseño

¿Más registros? ¿Menos tickets de soporte? ¿Un producto que parezca preparado para grandes empresas? Apunta dos o tres objetivos. Serán tu criterio para resolver cada disyuntiva más adelante.

3. Mapea los recorridos principales

Enumera las tres, cuatro o cinco cosas que los usuarios vienen a hacer y diseña esos recorridos primero. Todo lo demás puede seguir los patrones que marquen.

4. Una misma maquetación para todas las herramientas

Elige una estructura, por ejemplo título, entrada, ajustes y resultado, y aplícala en todas partes. Cuando todas las herramientas se organizan igual, aprender a usar una es saber usarlas todas.

5. Una navegación que siempre diga dónde estás

Una barra lateral fija para las secciones, una barra superior sencilla para las acciones de cada página y nombres claros que no cambien. El usuario nunca debería preguntarse dónde está ni cómo volver.

6. Una escala tipográfica que haga el trabajo

Cuatro o cinco tamaños, usados con coherencia, hacen más por la jerarquía que el color o las cajas. Si todo va en negrita, nada destaca.

7. Un único sistema de botones

Un estilo primario para la acción principal de cada pantalla, uno secundario y uno discreto. Mismos tamaños, mismo radio de esquina y mismos estados en todas partes.

8. Diseña todos los estados, no solo el happy path

Estados vacíos, de carga, parciales, de error y de éxito. Son las pantallas que ve el usuario cuando algo falla, y deciden si el producto transmite fiabilidad.

9. Haz que lo lento parezca rápido

En los productos de IA, generar algo lleva segundos o minutos. Muestra el progreso, deja que la gente siga trabajando, enseña vistas previas cuanto antes y guarda un historial para que ningún resultado se pierda.

10. Crea la biblioteca de componentes sobre la marcha

Tarjetas, campos, desplegables, sliders, interruptores, subida de archivos y modales. Defínelos una sola vez en Figma, con variantes para cada estado, y la siguiente funcionalidad te llevará días en lugar de semanas.

11. Accesibilidad desde el principio

Contraste de texto que cumpla WCAG AA, estados de foco visibles, todo usable con teclado y zonas táctiles lo bastante grandes para un pulgar. Cuesta menos incorporarla en el diseño que arreglarla después.

12. Incluye la web y los materiales de lanzamiento

Si el producto cambia y la web de marketing no, la primera impresión contradice la experiencia. Actualiza la web y enseña la interfaz real en tu vídeo de lanzamiento para que las expectativas encajen con lo que el usuario se encuentra.

Relanzarlo todo de golpe es arriesgado. Lanza el nuevo sistema herramienta a herramienta, empezando por el recorrido más usado, y cuenta a los usuarios qué ha cambiado y por qué. Mantén los nombres y las posiciones que ya conocen para las acciones principales, aunque todo lo que las rodea cambie.