Equis: la experiencia de abrazar al sistema
Un sistema de diseño es una caja de componentes, código, guías de estilo y documentación pensada para crear productos escalables y consistentes. Algo así como una caja de Legos.
Los sistemas de diseño nos permiten pensar en soluciones versátiles que pueden ser usadas en reiteradas ocasiones y de manera consistente a lo largo de todo el producto. No se trata de ver un problema de forma aislada, sino de ver la totalidad y pensar en su escalabilidad, es decir, cómo va a crecer cada partecita que forma nuestro sistema.
¿Por qué es importante construir un sistema de diseño?
- Porque nos aporta consistencia y esa consistencia favorece a la experiencia.
- Porque nos aporta eficiencia y rapidez a la hora de crear nuevos flujos.
- Porque ayuda a los diseñadores de producto a focalizarse en crear soluciones innovadoras y experiencias WOW.
- Porque nos organiza y nos mantiene alineados.
- Porque le aporta fuerza y diferenciación a nuestra marca.
Por todo esto, es que decidimos construir nuestro propio sistema de diseño al que bautizamos Equis y acá les contamos nuestras experiencias.
Cómo nos aventuramos al sistema 🚵
Equis encontró las bases para convertirse en nuestro nuevo sistema de diseño mientras repensábamos la Home.
El objetivo era migrar todos los flujos de la app al “Nuevo Guideline”, con la colaboración del equipo de Desarrollo.
Entendimos que ese cambio no iba a suceder de un día para el otro, el proceso debía ser iterativo e incremental. Por eso, creamos una library restyling, donde solo cambiamos colores, tipografías (estilo y tamaños) e ilustraciones, para empezar. Con el tiempo, esa librería dejó de tener, solamente, cambios de colores, tipografías e ilustraciones y pasó a nutrirse de componentes escalables, que construyen un sistema sólido.
¿Vale la pena dedicarle tanto esfuerzo a la creación de un sistema de diseño?
¡Claro que sí! Es una inversión de tiempo inicial que se recupera muy rápido cuando los equipos diseñan nuevos flujos con ayuda del sistema, porque ganan velocidad y consistencia. Algo así, como cuando te comprás una olla Essen.
Los sistemas de diseño tienen que ver con la alineación. Desde el principio, hay que alinear al equipo en torno a la importancia del sistema de diseño. Y esto, no solo es importante para los diseñadores, sino también para los devs y para todos los stakeholders.
Por suerte, en Naranja X, tenemos muy presente que el diseño es una parte fundamental para construir productos que las personas quieran usar. De todas formas, sentíamos que era necesario definir un propósito para Equis.
Definiendo el propósito de nuestro sistema 🎯
Para que el sistema de diseño funcione, es fundamental que tengamos presente por qué le estamos dedicando tanto tiempo y esfuerzo al proyecto. Por eso, delineamos el propósito de Equis, respondiendo a 4 preguntas:
¿Qué queremos lograr con Equis?
Buscamos mantener la consistencia a lo largo de la app y ofrecer una experiencia amigable, simple y humana.
¿Por qué es importante?
Creemos que esto es importante para aliviar acciones típicamente estresantes relacionadas al manejo del dinero. Si las personas que usan Naranja X se encuentran con inconsistencias, lenguaje técnico y distante, perderían la confianza en nuestro producto.
¿Cómo lo vamos a lograr?
Disponibilizado una librería de UI acompañada de documentación tanto de diseño como de contenidos, estableciendo un lenguaje visual claro y consistente, incluyendo animaciones e interacciones.
¿A quién está dirigido?
A los diseñadores y desarrolladores de la app para que puedan centrarse en crear el mejor producto logrando una identidad que nos diferencie de la competencia.
Propósito + principios de diseño
Cuando diseñamos productos digitales, tomamos muchas decisiones y a veces de manera muy rápida.
Y, a medida que los equipos crecen, la capacidad de tomar decisiones alineadas se vuelve más difícil. Para esto, tenemos que tener pautas claras, y ahí, los protagonistas son los principios de diseño.
Un sistema de diseño que tiene un propósito y principios de diseño sólidos, incluso con pocos componentes, tendrá más consistencia que un sistema con cientos de componentes pero sin un propósito y principios compartidos.
Ahora que vimos cómo definimos el propósito de nuestro sistema ya estamos listos para ver cómo lo hicimos crecer.
Haciendo escalar a Equis 🧗
Equis, no se nutre sólo por los componentes que establece el equipo, si no también por las contribuciones que hacen los diseñadores de cada vertical. Y eso, es lo que nos permitió, en 4 meses hacer crecer y escalar rápidamente nuestro sistema.
En números, nuestra primera versión de librería tenía 40 estilos y 179 componentes, hoy contamos con 86 estilos y 423 componentes. Es decir, en este tiempo crecimos un 115% a nivel estilos y un 149% en componentes. Si bien, como ya dijimos, en un sistema de diseño más no siempre es más, en este caso, ese incremento nos hizo robustecer a Equis para poder reutilizar cada vez más elementos y así poder diseñar nuevas funcionalidades (de calidad) cada vez más rápido.
¿Cómo logramos crecer de manera ordenada?
Uno de los grandes desafíos que tuvimos durante estos meses fue seguir diseñando y entregando nuevas funcionalidades y flujos, mientras construíamos el sistema.
Por eso, crecer de manera ordenada, no fue nada fácil, tuvimos muchas idas y vueltas, hasta que diseñamos un proceso para que cada diseñador pueda proponer componentes para Equis y para que el equipo pueda hacer seguimiento de la calidad y la coherencia para que el sistema escale sin perder consistencia.
De esta forma, todos podían avanzar con las entregas sin quedar bloqueados por la falta de componentes.
¿Cómo funciona el proceso?
Cuando los diseñadores de cada vertical empiezan a pensar un nuevo flujo, es posible que se encuentren con un componente o patrón de UX que no está definido en Equis. Cuando eso pasa, ponemos en marcha el operativo “Draft”.
El operativo Draft, se ve mas o menos así:
Cuando no tenemos ningún componente que cubra la necesidad del flujo que se está armando, cada diseñador evalúa si hay componentes que pueden crecer para cubrirla o hay que hacer uno nuevo desde cero.
En el momento en que se arman los mínimos y máximos del componente, Equis lo lleva a un plano agnóstico y evalúa la escalabilidad más allá del uso puntual que está proponiendo el diseñador en su flujo.
¿Qué sería hacer crecer la escalabilidad de un componente?
Hacemos crecer un componente, cuando ya tenemos uno armado y funcionando en Equis que podría aplicar para el caso que estoy necesitando, pero que necesita una pequeña modificación.
Por ejemplo, cuando empezamos a armar el sistema, contábamos con 3 badges que usábamos en las card de Home para identificar promociones, cosas nuevas y compra y venta de dólares. Un tiempo después, tuvimos la necesidad de usar ese mismo tipo de badges, para representar estados dentro de cards. Entonces, revisamos los componentes e hicimos los ajustes necesarios. Ahora, se ven así:
¿Y para armar un componente nuevo? ¿Por dónde empiezo?
Armar un componente nuevo, puede resultar complicado, incluso, puede llevar varias iteraciones y sesiones de trabajo hasta dar con una solución robusta y escalable.
Por ejemplo, la lista que les dejamos acá abajo, empezó con una necesidad del equipo de comercios y terminó atravesando a todas las verticales y esto trajo en conjunto una serie de ajustes, iteraciones y discusiones (en el buen sentido).
Desde Equis, establecimos algunos lineamientos y herramientas que pueden ayudar en esta parte del proceso. ¿Los vemos?
Cosas que tenemos en cuenta para diseñar un nuevo componente.
Primero establecimos ¿qué define a un buen componente para nosotros?, y llegamos a estas conclusiones:
- Tener un propósito: Tiene que resolver un problema específico, cuando armamos un componente, lo hacemos pensando en su propósito, no en cómo se ve.
- Ser reutilizable: Deben aplicarse en múltiples casos de uso. El objetivo de Equis es reducir los componentes que funcionan para 1 caso de uso en particular.
- Ser flexibles: Tienen que funcionar en contextos diferentes. Si son demasiado rígidos, otros designers van a tener que crear sus propios componentes y el resultado, va a ser un sistema inflado.
Para entender si un componente cumple con estas premisas, usamos esta tablita:
La tabla, es una herramienta más para pensar si lo que estoy haciendo podría resolverse con otro componente o realmente vamos a necesitar incluir algo nuevo. Pero atenti con esto, tampoco somos fundamentalistas de los pasos, si nos sirve lo usamos y si no, lo discutimos en una sesión de trabajo.
¿Cómo son nuestras sesiones de trabajo?
Cuando empezamos, establecimos reuniones diarias de 1 hora, con el equipo embajador de Equis, para pensar puramente en el sistema de diseño. Estos espacios de trabajo resultaron de mucha utilidad, ya que teníamos muchas cosas que migrar y decidir si se iban a seguir utilizando o no.
Además, en estas reuniones también validamos componentes que se estén trabajando en draft: cuando los diseñadores tienen listo el componente que quieren proponer, los invitamos para ponerlo en jaque. Lo ideal, es que todos los interesados en el componente estén invitados a esta reunión, para no tener idas y vueltas más adelante.
Como todo en nuestro trabajo es iterativo e incremental, estamos mejorando el proceso a medida que nos vamos topando con diferentes problemas.
La parte más aburrida, pero igual de importante: la documentación
Usamos Frontify para documentar el trabajo que hacemos en Equis. Después de revisar y probar varias herramientas, optamos por esta que es muy funcional e intuitiva. Si están evaluando opciones, ¡se la recomendamos!
Los primeros tres meses en los que estuvimos trabajando con Equis fueron mucho de crear y disponibilizar componentes porque nos corrían los tiempos.
Hoy, con el sistema más robusto y maduro, ya tenemos armado un MVP de documentación con los comportamientos de cada componente. Pasamos de tener un sistema que iba detrás de las necesidades de los diseñadores a tener un sistema que comienza a anticiparlas.
Y aunque sabemos que puede ser un trabajo aburrido, es importante dejarlo escrito y ordenado ya que cualquiera puede tomar el componente sin la necesidad de preguntar o consultar a otra persona.
Pero, un gran trabajo no es nada si no logramos comunicarlo al equipo
La comunicación con el equipo es fundamental para mantener un sistema de diseño útil y actualizado, por eso, contamos con varias vías de comunicación:
Changelog
Además de las sesiones de trabajo diarias, también tenemos una reunión semanal con todo el equipo para hablar sobre las cosas que estuvimos trabajando la semana anterior.
Diseñamos una tablita (si, amamos las tablitas), para que quede asentado cada cambio que se hace en la librería.
También, aprovechamos estas reuniones para mostrar nuevos componentes en vivo que ya se empiezan a utilizar en flujos. Esto está bueno porque todos pueden tener noción de por qué y para qué se incorporó y cómo poder llevarlo a algo en lo que esté trabajando.
Minuta express de Equis
A veces, una semana es mucho tiempo para esperar a la actualización del design system, por eso, también tenemos una minuta express por slack donde comunicamos las cosas que se estuvieron hablando en cada work session.
La minuta, se ve mas o menos así:
La unión hace la fuerza, hablá con tu dev de confianza 🤝
Un sistema de diseño no sería lo mismo, ni tendría sentido, sin el trabajo de los desarrolladores. Siempre tienen que ser parte del proceso para poder construir, mantener y escalar los componentes. Una buena comunicación entre los equipos de diseño y desarrollo, refleja en la calidad del producto y en la eficiencia del trabajo.
Si bien, todavía, Equis no tiene su propio equipo de devs destinado el 100% al sistema de diseño, armamos un equipo de referentes para estar en contacto, poder validar nuevos componentes y conocer el status de cada cosa que vayamos sumando.
¿Cómo nos coordinamos Desarrollo? ¡Fácil! Con más herramientas de comunicación
- Armamos un grupo de slack con los referentes de Android, iOS y el equipo de diseño de Equis. Ahí es donde resolvemos dudas diarias que van surgiendo y nos hacemos consultas todo el tiempo.
- Hicimos una planilla (¿Otra vez planillas? Siiii) para llevar un status más preciso de los componentes que hay que sumar, quién va a ser el encargado en cada sistema operativo (iOS y Android) y si se encontró con algún problema en la implementación.
- También sumamos reuniones mensuales para hablar sobre dudas que puedan surgir tanto del lado de diseño como de desarrollo en los diferentes elementos, componentes o pantallas de librería.
Qué aprendimos durante el proceso 🤓
- Tener un equipo destinado 100% a Equis y, además, establecer un proceso de colaboración, nos permitió escalar y tener un sistema robusto en 4 meses.
- Tener una visión agnóstica y enfocada en la escalabilidad del sistema nos permitió reducir la cantidad de elementos y componentes de un solo uso y evitar tener un sistema inflado.
- Equis nos permitió diseñar y crear nuevas funcionalidades de forma más rápida y con mayor consistencia.
- Es importante que todos los equipos tengan presente que un proceso de diseño es iterativo e incremental. Siempre tenemos que ser flexibles a los cambios.
Así que, no duden, destinen tiempo y esfuerzo a su sistema de diseño. ¡Siempre vale la pena!
