Sistema de diseño y guía de implementación para Backoffice
Reto: Crear un sistema de diseño para el Backoffice de la empresa VirtualSoft (Colombia)
Objetivo (O): Estandarizar la interfaz del Backoffice con un sistema de diseño que mejore la consistencia visual y la eficiencia en el desarrollo de módulos.
Resultados Clave (KR): Reducir en 40% el tiempo de diseño y desarrollo de nuevas pantallas gracias a componentes reutilizables.
Disminuir en 30% los reportes de inconsistencias visuales en QA.
Lograr que el 80% del equipo adopte la librería de componentes.
Programas:
VirtualSoft es una empresa dedicada al desarrollo de productos tecnológicos para el sector de juegos de suerte y azar.
Uno de sus principales equipos operativos trabaja diariamente con una herramienta interna (Backoffice) que, hasta hace poco, no contaba con un sistema de diseño definido ni con componentes reutilizables en Figma.
Cimientos del Sistema
Comencé definiendo una identidad gráfica sólida, creando los elementos base como la paleta de colores, tipografía y otros elementos base que sirvieran como guía para escalar el diseño de forma consistente.
Atomic Design
Con esta base visual definida, implementé la metodología de Atomic Design. Empecé por los elementos más pequeños (botones, Inputs, iconografía, grillas, espaciado, divisores y capas).
*Sidebar: estado comprimido, descomprimido y despleglado.
Componentes de navegación
Progresivamente avancé hacia componentes más complejos como cards, sidebar, headers, modales, tablas de listado y banners. Este enfoque permitió establecer una estructura clara y coherente, facilitando la escalabilidad y la colaboración con el equipo de desarrollo.
Uso de Design Tokens
Implementé Design Tokens para nombrar los estilos del sistema de diseño, creando una estructura clara y escalable. Esto permitió que los componentes se adaptaran fácilmente a distintos contextos y modos (como dark/light), mejorando la eficiencia y reduciendo errores en el trabajo en equipo.
Creación de diseño
Con la librería de componentes y la guía de implementación conciliados, iniciamos la implementación del sistema en el Backoffice.
Fue un trabajo simultáneo: mientras diseñaba las interfaces de cada módulo, también alimentaba y ajustaba el sistema de diseño.
Este enfoque nos permitió mantener coherencia visual y funcional, optimizar tiempos, reducir errores y construir una base sólida y escalable para el producto.
Versión dark
