Creando nuestro sistema de diseño basado en Atomic Design

En el año 2019 teníamos un reto grande y era dar solución a las siguientes preguntas; ¿cómo podemos estructurar la implementación de nuestros componentes frontend de forma que puedan reutilizarse en todas las experiencias digitales?, ¿cómo unir los esfuerzos de los equipos de desarrollo y diseño, para que los componentes se vean de la forma deseada?, y ¿cómo asegurarnos de que las experiencias sean accesibles y al alcance de todos?

Bueno, le dimos respuesta a todas estas preguntas. A continuación te contamos nuestra experiencia.

Sistema de diseño, ¿es necesario?

Notamos un problema cuando comenzamos nuestro análisis; teníamos muchos equipos diferentes trabajando sobre los mismos elementos digitales. Por ejemplo; si un equipo desarrollaba un botón, en ese mismo instante; otro grupo estaba desarrollando el mismo botón en otra experiencia. Para colmo, los elementos eran validados por el personal de diseño de forma independiente. ¡No podíamos seguir así! Entonces, nos encontramos con los
sistemas de diseño.

Pero… ¿Qué es un sistema de diseño?

Es un conjunto de elementos que se pueden reutilizar en diferentes combinaciones, permitiendo implementar una interfaz digital de manera estandarizada.

Todos los días utilizamos sistemas de diseño sin darnos cuenta. Por ejemplo, imagínemos que vamos a preparar un sánduche.

Aunque empleemos el mismo pan y algunos ingredientes similares, podemos generar diversos aperitivos empleando los mismos elementos. Sin embargo, el pan no dejará de ser pan por que se use en un sánduche u otro.

La solución a nuestros problemas fue implementar un sistema de diseño para que nuestros componentes digitales fueran reutilizables y siguieran un estándar.

Atomic Design

Para implementar nuestro sistema de diseño, decidimos utilizar una metodología llamada Atomic Design. Brad Frost, su creador, explicó que debemos dividir nuestras experiencias digitales en los siguientes elementos:

Átomos

Los átomos son componentes que no pueden dividirse en elementos más pequeños. Un ejemplo son las siguientes etiquetas en HTML; <button>, <input>, <h1>, o en Flutter los elementos básicos (como el IconButton).

Moléculas

Las moléculas son unidades funcionales integradas por varios átomos, pero no llegan a tener múltiples responsabilidades. Por ejemplo; un ícono más un texto, más un botón dentro de una tarjeta; es un modal. Ya que contiene varios átomos y conserva una responsabilidad, podemos decir que es una molécula.

Organismos

Los organismos son elementos compuestos por la unión de varias moléculas y átomos, estos pueden tener diferentes responsabilidades y generar múltiples eventos. Un ejemplo serían el header, navbar, sliders, etc.

“Templates”

Los templates definen el orden, configuran la disposición de los elementos ante el usuario. Pero solo se encargan de eso, para el contenido de la experiencia tenemos otras herramientas.

Páginas

Son las diferentes pantallas expuestas al usuario final. Se construyen con los elementos anteriormente descritos.

Aún teníamos un problema, ¿cómo podíamos hacer que los colores, las sombras, animaciones, tipografías e iconografías usadas en los
átomos fueran estándar?

“Tokens”

Decidimos tener todos estos elementos en una capa que llamamos tokens. Estos son la base de los átomos.

La ventaja es que al cambiar algún color de marca, fuente, sombra o animación; podremos cambiar todos los elementos que dependan
del token modificado.

Construyendo una herramienta para todos nuestros desarrolladores

Para hacer reutilizables nuestros elementos, creamos tres librerías del sistema de diseño de Bancolombia: una agnóstica a la tecnología web, otra específica para Angular y, en el mundo mobile, otra para Flutter. ¿Quieres saber cómo hicimos estas tres implementaciones? Síguenos, prontamente estaremos publicando un artículo de cada una de ellas.

Uniendo el trabajo del equipo de diseño y el equipo de desarrollo

Al tener un sistema de diseño con una metodología clara, logramos establecer un lenguaje ubicuo entre el equipo de UX y desarrollo frontend. También logramos definir unas reglas para que el trabajo en equipo fuera coherente , establecimos varias, pero las más importantes son:

· Todos los elementos desarrollados dentro las librerías serán validados por el equipo de diseño, no se puede subir ningún componente sin su aprobación.

· La capa de Tokens será administrada únicamente por el equipo de diseño.

· Todos los desarrolladores Bancolombia construirán utilizando las librerías. De forma automática validamos esto; en caso de existir un desarrollo sin las mismas, se rechazarán los cambios.

· Todos los elementos construidos en las librerías deberán tener sus pruebas unitarias y cero días de deuda técnica.

· Todos los elementos deberán seguir los estándares de accesibilidad para que nuestros clientes con circunstancias diferenciadas puedan acceder a nuestras experiencias digitales sin ningún problema (este punto es un reto importante, por eso haremos un artículo sobre el tema).

Con esto, logramos que todas las experiencias apuntaran a un sistema de diseño que ya fue validado por el equipo de experiencia de usuario y a la vez construido con los mejores estándares Frontend.

Conclusiones

· Los sistemas de diseño permiten generar elementos estándar que apalancan la construcción de experiencias digitales.

· El Atomic Design es una metodología de trabajo que distribuye la construcción de sistemas de diseño. Empezamos desde lo más básico hasta llegar a los elementos complejos.

· Al centralizar los esfuerzos en hacer una librería del sistema de diseño, que uniera al equipo de experiencia de usuario con el de desarrollo, generamos una herramienta poderosa que permite crear experiencias con lineamientos visuales de la marca, lo que también reduce el time to market.

Próximamente publicaremos cómo construimos estas librerías. Por ahora cuéntanos qué tal te pareció el articulo, si tienes algunas dudas, escríbelas en los comentarios. Estaremos muy atentos. ¡¡Por favor regálanos +50 aplausos 👏!!