Roberto
Patrón
Patrón
Cerrar
Menú
UX/UI designer
Desarrollador no-code
Productor audiovisual
Diseñando y desarrollando experiencias de usuario end to end para generar impacto social.
Contacto
patron_rob@hotmail.com
Aumentando la eficiencia del desarrollo de producto en 59% con un sistema de diseño escalable
Design system
UI Design
UX Design
Figma
Nuestro sistema de diseño presentaba varios problemas que surgieron al escalar el producto digital en el que estábamos trabajando. Entre ellos:
En la escala de color que utilizábamos anteriormente, se detectaron problemas relacionados con un uso no semántico del color. Es decir, existían distintos estilos que aplicaban color, pero no había documentación que indicara en qué casos debía usarse un color u otro.
Además, la falta de una definición clara de los colores primario, secundario y terciario dificultaba la elección entre ellos. A esto se sumaba que las gamas de color disponibles no eran lo suficientemente amplias para cubrir todos los casos de uso. Por ejemplo, faltaba un tono de gris con menor luminosidad para textos secundarios o aclaraciones, así como un verde amarillento adecuado para alertas y otro tono que pudiera utilizarse en otros contextos específicos.
Como mejora, implementamos una nueva escala de color en la que todos los colores cumplen con un ratio de contraste mínimo de AA, según los estándares de la WCAG. Además, se creó una colección de variables que organizan los colores según su luminosidad. Por ejemplo, dentro de la escala de grises, el tono más claro se nombró semánticamente como GREY/20.
Adicionalmente, cada color se vinculó a un uso semántico específico, haciendo referencia a un token primitivo asociado a su valor HEX. Esto permitió definir con mayor claridad en qué casos debe utilizarse cada color, asegurando coherencia y accesibilidad en el sistema.
Al igual que con el sistema de color, también identificamos la falta de proporcionalidad y consistencia en los diferentes tamaños de fuente. Además, no existía una documentación clara sobre el uso semántico de las distintas variaciones tipográficas en cuanto a pesos, tamaños, kerning, espaciado entre líneas y otros parámetros.
Para lograr una mayor consistencia en la aplicación de la tipografía dentro del sistema, creamos una escala basada en una proporción de 1.309, utilizando 16px como valor base. Esto nos permitió mantener una jerarquía visual clara y coherente en todas las representaciones del sistema.
Quisimos dar un paso más allá y abandonamos el antiguo sistema basado en estilos para definir tipografías y colores. En su lugar, implementamos un sistema más flexible y escalable, que nos permitió asignar un uso semántico a cada decisión de diseño mediante el uso de variables.
Un aspecto clave a resolver en nuestro sistema de diseño es garantizar que cada componente sea accesible. Para lograr accesibilidad visual, tomamos como referencia los estándares de la WCAG.
Al evaluar el botón primario, un componente presente en más de 30 pantallas de nuestro sistema, detectamos que no cumplía con el requisito mínimo de contraste para un CTA, como se muestra a continuación:
Una vez identificados los problemas de accesibilidad y usabilidad en el botón primario—un elemento clave en cualquier interfaz, ya que guía al usuario sobre la acción a realizar—implementamos las nuevas variables de diseño.
Estas variables no solo garantizan que el botón cumpla con los requisitos mínimos de contraste visual, sino que también establecen un uso semántico para el color de fondo en los CTA, asignándolo como background-button-primary.
A continuación, se muestran los cambios aplicados:
Se trabajó en la refactorización de varios componentes, ya que algunos presentaban problemas de accesibilidad, como se evidenció en el caso del botón.
A continuación, se muestra un ejemplo de los diferentes estados y tipos generados para cubrir la mayoría de los casos de uso. En algunas excepciones, no se añadieron los mismos tipos y estados, ya que no eran necesarios para ese componente en particular.
En la siguiente muestra de los estados y tipos del botón dentro de nuestro sistema de diseño, se pueden identificar problemas de accesibilidad visual en ciertos estados, debido a un contraste insuficiente para cumplir con el mínimo AA establecido en las WCAG:
En contraste con el botón anterior, creamos diferentes estados para el componente, asegurándonos de que cada uno cumpliera con el contraste mínimo AA según el estándar WCAG, mejorando así la accesibilidad visual.
A continuación, se muestran los cambios aplicados:
Además de la refactorización del sistema de diseño, realizamos encuentros 1:1 con los desarrolladores del equipo para fomentar una comunicación más cercana entre diseño y desarrollo. Durante estas sesiones, los guiamos a través del diseño y exploramos las posibilidades que ofrece el Dev Mode de Figma.
El objetivo de estas acciones fue incrementar la adopción del sistema de diseño, no solo dentro del equipo de diseño, sino también entre los desarrolladores, asegurando que pudieran aprovecharlo de manera efectiva en su flujo de trabajo.
Además de la refactorización del sistema de diseño, organizamos encuentros 1:1 con los desarrolladores del equipo para fomentar una comunicación más fluida entre diseño y desarrollo. Durante estas sesiones, guiamos a los desarrolladores a través de los diseños y las capacidades del Dev Mode de Figma, lo que les permitió comprender mejor cómo utilizar las herramientas y componentes disponibles.
El objetivo de estas acciones fue incrementar la adopción del sistema de diseño, asegurando que no solo el equipo de diseño, sino también el equipo de desarrollo, pudiera aprovechar y utilizar eficazmente el sistema en su flujo de trabajo diario.
Para garantizar una administración ordenada del sistema de diseño, establecimos procedimientos de mantenimiento y solicitudes para modificarlo. Se designó un responsable único, encargado de recibir y evaluar las solicitudes del equipo de diseño y desarrollo, relacionadas con la creación o modificación de componentes en el sistema de diseño.
Para adoptar o actualizar un componente, definimos una serie de criterios que deben evaluarse tanto en su aceptación como en la priorización de la actualización o incorporación de nuevos componentes en el sistema de diseño. Estos son:
Además de mejorar la adopción del sistema de diseño dentro del equipo de producto, uno de los objetivos principales de un sistema de diseño es optimizar la eficiencia del equipo al agilizar los tiempos de desarrollo. Utilizando la calculadora de knapsack y las siguientes variables:
El resultado fue un ahorro potencial de $56,000 anuales.
Si traducimos este impacto a la eficiencia en la implementación de un nuevo componente, tomando en cuenta:
Esto nos llevó a los siguientes resultados:
Este ahorro de tiempo impacta directamente en la velocidad de entrega y la optimización de recursos dentro del equipo.
Crear una solución digital que democratice el acceso al bienestar físico y mental.
Rediseñando la experiencia de usuario de un flujo de registro de eventos.
