Empresa:
Buk
Buk Design System
ROL: UX/UI DESIGNER
HERRAMIENTAS: Figma, jira, notion, miro
A medida que las organizaciones crecen y desarrollan múltiples productos la consistencia, la eficiencia y la escalabilidad son clave para lograr experiencias digitales fluidas.
Buk había crecido considerablemente desde sus inicios y sumado nuevos productos, lo que generó una brecha en estética, usabilidad y coherencia de la experiencia entre las distintas soluciones.
🎯 El reto
Considerando estos factores se definieron los siguientes objetivos:
Refresh visual de la plataforma: La plataforma utilizaba la plantilla AdminLTE, que era muy estándar en comparación con otros productos del mercado, poco personalizable y no permitía ofrecer una experiencia óptima.
Estandarizar la experiencia entre módulos: Al no existir una norma, cada Product Owner, Business Analyst y desarrollador aplicaba los componentes de manera intuitiva, lo que generaba falta de coherencia en la experiencia dentro de la plataforma.
Mejorar la experiencia del usuario (UX): Al homologar y normar los componentes, los usuarios no se encontrarían con distintas experiencias para realizar la misma acción.
Crear un repositorio accesible a todos los equipos: Este incluiría documentación de componentes, playground, código y reglas de uso, con directrices también para perfiles no desarrolladores.
Escalabilidad: Garantizar que el design system sea flexible y adaptable, permitiendo su crecimiento y personalización a medida que se incorporan nuevos módulos, funcionalidades y equipos, sin comprometer la coherencia y consistencia de la experiencia.
🕵🏻♀️ Research
Se mapearon todos los elementos de la plataforma, documentando en qué pantallas se aplicaban y detectando problemas de uso.
Analizamos distintos design systems consolidados, cuyas interacciones ya son universalmente reconocidas. Entre ellos se incluyen Material, Atlassian, Apple, Uber, Shopify Polaris y Salesforce. Los usuarios tienden a responder mejor a componentes y patrones familiares de otros SaaS, lo que reduce la curva de aprendizaje.
Como referencia principal se utilizó Material Design, especialmente para la definición de tokens, breakpoints, colores, íconos, tipografía y border radius.
Un sistema de diseño exitoso requiere la participación de todas las partes involucradas. Trabajamos estrechamente con Product Owners y desarrolladores de cada módulo para identificar necesidades, problemas y oportunidades, asegurando que el sistema satisfaga los requerimientos de toda la organización y fomente la colaboración entre equipos.
Realizamos investigación con usuarios reales, administradores de la plataforma, de empresas de diferentes rubros y tamaños. Los participantes incluían encargados de RRHH, remuneraciones, asistentes y otros perfiles administrativos, lo que permitió comprender sus necesidades, dificultades y flujos de trabajo.
✨ Insights
Inconsistencias entre módulos: Los usuarios encuentran diferencias en la apariencia, interacciones y comportamientos de los mismos componentes según el módulo que utilizan.
Necesidad de personalización e identidad corporativa: Los usuarios administradores de cada empresa requerían que la plataforma reflejase su marca y estilo de comunicación, tanto visualmente como en los textos y mensajes que los colaboradores recibían. Esto les permitiría fortalecer la identidad corporativa generando mayor sentido de pertenencia y reconocimiento de la marca en cada interacción.
Lenguaje robótico e información confusa o incompleta: En algunos casos, la plataforma no era clara en su lenguaje y comunicación, como en alertas dentro del sistema o instrucciones para realizar tareas. Además, los correos enviados a colaboradores a veces carecían de información clave, lo que generaba confusión y consultas adicionales.
Dificultad para aprender la plataforma: Los nuevos usuarios tardan en familiarizarse con algunos flujos y patrones inconsistentes.
Componentes redundantes o poco claros: Algunos elementos no son intuitivos o duplican funcionalidades, generando confusión.
Problemas de accesibilidad: Colores, tipografía o tamaño de elementos dificultaban la lectura y el uso de la plataforma para ciertos perfiles.
Necesidades específicas según rol: Encargados de RRHH, remuneraciones, asistentes y administradores requieren flujos y permisos adaptados a sus responsabilidades.
Falta de documentación: La ausencia de un repositorio centralizado provocaba que los equipos internos aplicaran los componentes de manera inconsistente. Esto generaba errores, duplicación de esfuerzos y dificultades para mantener coherencia entre los distintos módulos de la plataforma.
📝 Definiciones
Se definió la visión y misión del negocio, para asegurar que los principios estratégicos y culturales de la organización se reflejaran en cada componente y en la experiencia. Esto permitiría que el sistema no solo fuera funcional, sino también coherente con la identidad y propósito de la compañía.
Se realizó un proceso de investigación con usuarios finales para comprender sus necesidades, roles y comportamientos en la plataforma. A partir de los hallazgos, se definieron los user personas, representando perfiles clave como encargados de RRHH, responsables de remuneraciones, asistentes y administradores.
A partir de todo lo anterior, se rediseñaron los componentes existentes, se reemplazaron aquellos que no funcionaban y se crearon nuevos.
Iniciamos con la creación de un sistema de diseño básico, que incorporara los componentes y directrices esenciales.
Se definió la anatomía y el comportamiento de cada componente, estableciendo reglas claras de uso para asegurar su correcta aplicación en distintos contextos.
Se desarrolló una documentación extensa junto con un repositorio en línea, que incluía información completa para la implementación de los desarrolladores, casos de uso, playground, código y directrices claras y detalladas sobre la correcta aplicación de cada componente.
📈 Impacto
Se logró mantener la coherencia visual y funcional en todos los productos, estableciendo un marco unificado que garantizó un lenguaje visual común y patrones de interacción consistentes. Esto permitió crear una experiencia de usuario más fluida, predecible y confiable.
El tono comunicacional fue reformulado hacia un estilo más humano, cercano, empático y claro, lo que mejoró la comprensión de los mensajes y la percepción general de la plataforma por parte de los usuarios finales.
Mejoró la eficiencia del equipo de Producto. Antes, el equipo de Diseño dedicaba gran parte de su tiempo a resolver dudas sobre el uso e implementación de componentes. Con la creación del repositorio documentado, las consultas disminuyeron significativamente, optimizando el tiempo tanto de diseñadores como de desarrolladores.
Mejor alineación entre equipos: El design system fomentó una comunicación más efectiva entre diseñadores, desarrolladores y Product Owners, asegurando que todos trabajaran bajo los mismos principios, guías y estándares.
Con esta implementación, logramos la escalabilidad que la plataforma necesitaba, ya que su crecimiento constante exigía una base flexible y sostenible. El sistema permitió adaptar componentes y patrones a nuevos contextos, módulos y funcionalidades sin comprometer la coherencia visual ni la experiencia del usuario.
Onboarding más ágil: Los nuevos integrantes del equipo pudieron incorporarse más rápidamente, ya que el design system centralizaba la documentación, casos de uso y lineamientos, facilitando su aprendizaje y autonomía desde las primeras semanas.
Diseñamos opciones de personalización, reflejando la identidad visual y el estilo comunicacional de cada empresa cliente, reforzando su marca dentro de la plataforma y mejorando la conexión con sus colaboradores.
Por supuesto que el trabajo no finalizó con la entrega inicial del sistema de diseño. Desde entonces, el Design System se mantiene en constante evolución, incorporando mejoras continuas basadas en el feedback de los usuarios, las necesidades de los equipos internos y los datos obtenidos del uso real de la plataforma.
