01 — Cómo surge el proyecto
GBCloud es la plataforma de software minero número uno de Nex4Nova, parte del grupo de empresas Geoblast, y hoy la usan cientos de usuarios. Como Product Designer, antes de proponer cualquier solución realicé una auditoría de UX de la plataforma para entender en qué estado estaba la experiencia real de quienes la usan.
02 — Problema
La auditoría dejó algo claro: la plataforma no cumplía con las heurísticas de diseño. Su navegación era rígida y eso tenía un costo directo para el negocio, porque se estaban perdiendo clientes potenciales que no lograban moverse con fluidez dentro del sistema.
Detrás de ese problema había algo más profundo: sin una base común de decisiones visuales y de interacción, cada pantalla se resolvía por separado. Eso genera inconsistencias, ralentiza al equipo y hace que cada mejora sea más cara que la anterior.
03 — Propuesta
Mi propuesta fue trabajar en un sistema de diseño que permitiera dar el salto de la plataforma. Desde el lado UX, un design system ordena la experiencia: define patrones de navegación y de interacción consistentes, reduce la carga cognitiva de quien usa la plataforma y vuelve predecible cada flujo, que es justamente lo que la auditoría mostraba que faltaba.
Desde el lado UI, entrega un lenguaje visual compartido: tipografía, color, espaciados, componentes y estados documentados en un solo lugar. Así, diseñadores y desarrolladores hablan el mismo idioma, el handoff se acelera y la plataforma puede crecer sin perder coherencia.
Tuve la oportunidad de presentar la propuesta y fue muy bien recibida.
Cómo se construye
Todos los componentes fueron creados en Figma y luego visibilizados en una web propia, pensada para facilitar la integración con el equipo de desarrollo. En lugar de entregar solo diseños, cada componente se publica con su demo en vivo y el código listo para copiar en pestañas HTML, CSS y JS, con una versión Tailwind para las aplicaciones que la usan.
La base son los tokens: todo color y medida sale de variables CSS, nunca de valores sueltos. Eso permite que cada componente funcione sin tocarlo en los tres modos de la plataforma (Light Legacy, Galaxy Blue y Nex4nova Tears), que el usuario puede cambiar en vivo dentro de la propia guía. La tipografía es una sola familia, Outfit, y los íconos salen de una única librería, Font Awesome 6 Solid, con reglas claras sobre cuándo usar cada uno.
El sistema cubre desde los fundamentos (colores, tipografía, íconos) hasta la estructura de la plataforma (header, sidebar, perfil, configuración) y los componentes de cada página: layouts, skeleton UI, botones, filtros, formularios, tablas, badges y barras de progreso. Cada componente incluye recuadros de "Sí" y "No" que explican el porqué de cada decisión, además de guías transversales de escritura, formato de datos, estados de pantalla, accesibilidad y un checklist para revisar antes de entregar cualquier pantalla.
Contexto para la IA
Hoy los equipos desarrollan apoyándose en asistentes de IA, así que pensé en ellos también. La web incluye un botón "Descargar .MD" que entrega todo el sistema de diseño en un único archivo Markdown. Los desarrolladores pueden entregárselo a su IA (Claude, ChatGPT, Copilot o Cursor) para ponerla en contexto y obtener un resumen del sistema de diseño de la plataforma, o para que genere pantallas que respeten sus reglas.
04 — Resultado
Este es un hito muy importante para GBCloud y para Nex4Nova. Con el sistema de diseño como base, la plataforma de software minero número uno de la compañía puede elevar la experiencia de cientos de usuarios y dejar atrás la rigidez de navegación que estaba frenando la llegada de nuevos clientes.