Bambú: flexibilidad, cohesión y eficiencia
Construir un design system y vivir para contarlo
Seguir diseñando y entregando nuevas funcionalidades y flujos mientras se construye un design system es todo un desafío. En esta nota, quiero compartir la experiencia de la creación de “Bambú” y reflexionar acerca de:
- ¿Cuál es el objetivo de contar con un design system y qué beneficios tiene?
- ¿A quién está dirigido y por qué es considerado una “fuente de la verdad”?
- ¿Cuál es la diferencia con un UI kit?
- ¿Cuál fue nuestro enfoque para llevarlo adelante, y cómo lo hicimos crecer junto al equipo?
- ¿Cómo transitamos la elección de su nombre y cómo desarrollamos su isologotipo?
Para empezar, ¿qué es un design system?
Un design system (sistema de diseño) es una guía, un conjunto de patrones, reglas y prácticas de uso que está dirigido, en principio, a equipos de diseño y desarrollo, pero que también atraviesa áreas como marketing, ventas, comunicación y contenido.
Es tangible e intangible.
- Tangible, porque contiene las herramientas que usamos para poder producir los productos (librería de patrones -UI kit- con instrucciones para entender cómo se utilizan los componentes y cómo poner en juego los elementos de la interfaz, más líneas de código que acompañan y representan a cada componente).
- Intangible, porque también incluye valores, principios, propósitos, objetivos y filosofía de la empresa (guía de estilos, imagen de marca, manual de estilo y tono de voz).
Es un proceso iterativo e incremental, y una herramienta de definición de lenguaje y de diálogo entre diseño y programación.
Se lo considera una “fuente de la verdad”, porque es una documentación construida colectivamente por el equipo, con “verdades” que deben cumplirse en cuanto a lo tangible e intangible, pero a la vez flexible y abierto al cambio (nada está tallado en piedra).
Ahora sí, ¿cuál es el objetivo y qué beneficios trae contar con un design system?
Su objetivo es documentar y estandarizar información: patrones, reglas, prácticas de uso, lenguaje, valores, principios, propósitos, objetivos y filosofía de la empresa.
Un design system garantiza a las empresas la consistencia de la marca, ya que los flujos y los proyectos pueden ser actualizados con una velocidad increíble. ¿Por qué? Porque se enfoca en la teoría del diseño atómico (átomos, moléculas, organismos, templates).
Con este enfoque, comenzamos a trabajar partiendo de “átomos”: piezas individuales que juntas forman “moléculas”, que al combinarse forman “organismos”. Estos organismos, a su vez, contribuyen en la creación de “templates”, que luego vemos resueltos como páginas webs.
Además, un sistema de diseño sirve como herramienta educativa y referencia para quienes diseñan, quienes colaboran con el contenido y otros departamentos que se incorporan o ya son parte del equipo, gracias a las pautas de uso y guías de estilo explícitamente escritas.
¿Cuándo es importante plantar la semilla?
Un design system tiene valor y es de gran impacto cuando estamos trabajando en una app, servicio o sistema grande, donde somos muchas las personas que formamos parte del proceso de creación. Al contar con una documentación estandarizada, todas las personas involucradas pueden entender y saber cómo se utiliza un elemento, cómo se implementa, y en qué casos y escenarios se puede emplear. Es decir: no hay dudas a la hora de diseñar y programar.
¿A quién está dirigido y cuál es la diferencia con un UI kit?
Un design system abarca mucho más que un UI kit: va más allá de un conjunto de componentes, y por ende, más allá del departamento de diseño. Puede atravesar marketing, ventas, comunicación, contenido, desarrollo, y siempre está sujeto y dispuesto a cambios (evoluciona constantemente).
Un UI kit es una parte pequeña dentro del DS. Se centra en brindar al equipo de diseño las plantillas visuales necesarias para crear nuevas páginas o vistas. Es la parte visual de la marca: los elementos, la tipografía, iconografía, las formas, los colores. En cambio, un DS se nutre de esa biblioteca existente (UI kit), pero es mucho más avanzado y completo: crea una biblioteca central en la que tanto las personas que diseñan como las que desarrollan pueden trabajar de forma conjunta, lo que favorece un desarrollo más fluido, de mejor calidad y mucho más consistente.
Si se desea crear prototipos internos o diseños puramente visuales, un UI kit es una opción ideal. Sin embargo, si se busca algo que funcione a mayor escala (como dijimos, en equipo donde participan muchas personas), y que lo haga tanto para quienes diseñan como para quienes desarrollan, un DS resulta imprescindible.
Un poco de contexto: ¿por qué surge Bambú?
Como mencioné anteriormente, entender las necesidades que tiene una organización, evaluar ventajas y desventajas, es esencial para decidir si realmente es importante contar con un sistema de diseño.
En nuestro proyecto junto a IUDÚ trabajamos con un UI kit bastante desarrollado. Pero a medida que crecía el equipo, la cantidad de flujos y funcionalidades, teníamos la necesidad de dejar constancia de las decisiones que tomábamos como Designers para generar consistencia en toda la app, sumado a que el resto del equipo (desarrollo, marketing, ventas, comunicación), también debía entender nuestras decisiones de forma clara y simple.
El desafío, como equipo de diseño, fue generar templates que sirvieran de base para una o más vistas, cards que funcionaran con y sin ciertos elementos… En fin, el objetivo era hacer que nuestro producto escalara de la mejor forma posible, y que todas las personas que formábamos parte del proyecto estuviéramos al tanto de todo (cambios en componentes, templates, colores, fondos, iconografía, etc.).
¿Cuál es el mejor enfoque para llevar adelante un caso práctico como éste?
Hay tres enfoques para llevar adelante un design system:
- Adoptar un sistema de diseño existente.
- Adaptar un sistema de diseño existente.
- Crear un sistema de diseño propio o personalizado.
Hay pros y contras para cada uno, pero en términos generales, cuanto más personalizado sea el design system, más tiempo (y por ende, dinero) llevará implementarlo. Por lo tanto, usar uno existente es el enfoque menos costoso y requiere menos tiempo para implementarlo. Sin embargo, se necesitará más tiempo para reemplazar o actualizar elementos de la interfaz y acordar un estándar.
En el caso de IUDÚ, consideramos que invertir en un sistema de diseño personalizado y crearlo desde un comienzo valdría la pena, ya que la organización contaba con necesidades particulares que los design systems de código abierto no podían satisfacer. Lo importante como equipo fue entender qué necesidades tenía la organización, evaluar ventajas y desventajas, y así decidir el enfoque para llevarlo adelante.
Enfoque personalizado
Como mencioné al comienzo del artículo, fue un desafío seguir diseñando y entregando nuevas funcionalidades y flujos mientras construíamos Bambú. Al ser un proceso iterativo e incremental, un design system es tan eficaz como el equipo que lo gestione. Requiere de un mantenimiento y una supervisión continua para garantizar que no se vuelva obsoleto.
En nuestra experiencia de trabajo, fue clave mantener una comunicación fluida en el equipo, participar con ideas y sugerencias, y generar espacios para trabajar sobre el sistema de diseño: hacer huecos en la agenda y generar dinámicas de, al menos, 1 hora semanal para dedicarle a Bambú.
Gracias a estas prácticas, logramos un gran entendimiento y resultados en poco tiempo, incorporando además el uso de herramientas colaborativas como Miro (que fue de gran ayuda para las reuniones semanales que propusimos y tuvimos con Front-End Devs) y Slack ( creamos un canal especial para aclarar dudas, resolver situaciones bloqueantes y mantener el desarrollo de los prototipos alineados).
Se sabe que, para llevar adelante un sistema de diseño, el tamaño de un equipo puede variar, dado que es posible que haya diferentes niveles de personalización. Pero como mínimo, el equipo debe incluir un perfil de diseño de interacción (UX), uno de diseño visual (UI), y uno desarrollo (Front-End Dev), cada uno destinado a ayudar a escribir pautas de diseño de interacción, crear ejemplos visuales y proporcionar fragmentos de código y especificaciones de implementación para los diferentes elementos. Idealmente, el equipo también debe incluir un perfil de investigación, uno de arquitectura y una persona dedicada a la generación de contenido, si es que estos roles existen en la organización.
En nuestro caso, contamos con un equipo bastante completo: un Head de UX, 5 UXers, una UI Designer, 7 Front-End Devs y 3 escritoras de contenido. En conjunto, llevamos adelante un benchmark para dar a conocer al resto del equipo (marketing, ventas y comunicación) la importancia de contar con un design system, un naming y un isologotipo que lo represente. Para esto, seguimos un patrón de investigación, presentación, conversación, escucha, propuesta y votación grupal.
Brandear un design system: ¿es necesario?
El branding es la forma de diferenciar y visibilizar la propuesta de valor que tenemos frente a productos o servicios similares en el mercado. El naming es el primer paso para dotar de significado a una marca: la hace más atractiva y, sobre todo, más reconocible. El diseño de logotipo, isotipo, isologo o isologotipo, es la primera presentación gráfica de una empresa ante sus clientes y, sin dudas, debe ser buena.
Si bien el objetivo de IUDÚ, era contar con un sistema de diseño cerrado (sólo tendríamos acceso quienes trabajamos en ello), brandearlo le otorgaría importancia dentro de la organización y ayudaría a darle la entidad que se merece.
A continuación, les comparto nuestra experiencia de proceso y elección de naming, isotipo e isologotipo, fundamentales a la hora de construir la identidad de la marca y transmitir sus valores. ¿Por qué? Porque de ellos depende que recuerden, identifiquen y diferencien a Bambú de otros design systems.
Paso 1: naming
Para entender de manera conceptual la decisión de la elección del naming, realicé un benchmark que volqué en una mesa de trabajo, analizando otros sistemas de diseño existentes. A partir de eso, generé conclusiones, propuestas y una votación.
Conclusiones:
Hay namings que están relacionados directamente con la marca y hacen alusión a ella de alguna manera, como Equis (Naranja X) y Flame (Santander). Hay otros que hacen alusión a características del design system, por su relación con la consistencia, lo modular, lo unificado y escalable, como por ejemplo Carbon (IBM), Brick (Galicia), Andes (Mercado Libre) y Lighting (Salesforce). Por último, algunos se relacionan explícitamente con el significado de una palabra, como Fare (Ualá), que significa “hacer” en italiano y se relaciona con los verbos: conseguir, crear, fabricar, realizar.
Propuestas:
Luego de la investigación de namings existentes surgieron muchas ideas, y entre las que estuvieron en la recta final les puedo mencionar: “You Do”, “Uva”, “Forma”, “Iglú”, “Bambú”. Cada naming estaba acompañado de su significado, origen o razón de la propuesta.
En base a esto, generé una votación utilizando la plataforma Miro (herramienta colaborativa), para la decisión de la elección del naming final.
Votación:
La votación constaba de 3 instancias: la fase de descarte, la de votación de namings candidatos y la votación definitiva. Fue dinámico y llegamos a un acuerdo. El naming del design system de IUDÚ es “Bambú”, que hace alusión a las características de flexibilidad, cohesión y eficiencia.
El Bambú (planta), tiene troncos fuertes y tradicionalmente se ha usado en la construcción de casas de ciertos países o comunidades, por ser un material disponible en su área, resistente y duradero. Así que relacionamos Bambú con construcción y esto, sumado a sus características, inmediatamente nos llevó a decidir que sería el naming elegido para nuestro sistema de diseño. ¿Un plus? Tiene la misma sonoridad que IUDÚ.
Paso 2: ¿logotipo, isotipo, isologo o isologotipo?
En base a la decisión del naming “Bambú”, generé una actividad para decidir el isologotipo del mismo. Analicé lo que necesitábamos y seguí el mismo proceso que hicimos para la votación del naming: inicié con un benchmark donde entendíamos en profundidad el significado de logotipo, isotipo, isologo, isologotipo.
Debíamos encontrar armonía y relación entre el naming elegido y lo que IUDÚ representa como marca. La idea de incorporar a IUDI, nuestro journey companion, en este nuevo reto fue clave en la decisión. Estábamos creando vida, estábamos creando a Bambú.
Al momento de analizar las propuestas en equipo, usamos Miro nuevamente como herramienta colaborativa. Hicimos un descarte de propuestas candidatas, y surgieron nuevas propuestas para seguir trabajando.
En un nuevo encuentro, presenté mis propuestas y finalmente, llegamos a un acuerdo: ¡tenemos isotipo e isologotipo de Bambú!
Paso 3: crecimiento y desarrollo
Encontrarnos semanalmente con el equipo y Front-End Devs para entender el comportamiento de templates y componentes específicos, fue uno de los tantos desafíos que tuvimos para llevar a cabo las dinámicas de avance en el armado de un sistema de diseño.
Estas librerías vivas, que se encuentran en constante iteración, ahorran tiempo a quienes diseñan, ya que cuentan con un glosario de elementos que ayudan a crear una interfaz de forma consistente y dinámica.
Reflexión final
En Flux IT trabajamos de manera colaborativa con el equipo de IUDÚ, lo que me permitió conocer a un grupo de personas talentosas y dispuestas a llevar adelante todo tipo de desafío. La buena comunicación nos aportó grandes resultados, y es por eso que me gustaría agradecer especialmente a Fernando Mac Dougall por haber liderado este proyecto y a todas las personas que hicieron posible el nacimiento de Bambú: Nicolás Di Ciaccio, Fernando Rago, Emilia Suárez Azar, Mariela Peralta, Paulina Trubbo, Sonely Urdaneta García, Martín Salatta y Juan Zalazar.
Construir un design system no es una tarea fácil, pero sí posible si se trabaja en equipo. Vivir para contarlo es una oportunidad para poder transmitir conocimientos y compartir opiniones. Ustedes, ¿tuvieron la oportunidad de ser parte de uno? ¿piensan que podrían proponerlo y llevarlo a cabo?
Quienes hayan llegado hasta acá y tengan ganas, les propongo intercambiar experiencias y así seguir generando comunidad. Pueden dejar sus comentarios👇 o escribirme por LinkedIn. ¡Gracias!
