Mejorando Bnext: Design ops y un nuevo Sistema de Diseño

En colaboración con el estudio Mendesaltaren, os contamos cómo hemos planteado las operaciones en organización del equipo y el nuevo Sistema de Diseño.

La madurez y el crecimiento de Bnext ha propiciado una serie de retos en la compañía, el lanzamiento de su renovada marca y su reciente expansión a México. Y es que crear un producto como este no es tarea fácil y, con el nivel de exigencia del equipo, trabajamos al máximo para que los usuarios podáis disfrutar de la mejor experiencia posible.

Desde el equipo de Bnext, teníamos clara la necesidad de un Sistema de Diseño como herramienta fundamental, mejorar nuestra agilidad en diseño con desarrollo y el correcto escalado del producto, junto a un System Manager que estuviera a la altura para mantenerlo. Además, todo esto iba a estar propiciado por la migración de Sketch a Figma, que nos ofrecía un mejor terreno para alcanzar nuestros objetivos.

En este punto entró el equipo de Mendesaltaren, un auténtico tandem con productos digitales y sistemas de diseño. Su objetivo era ayudarnos a plantear las bases de un Sistema que estuviera a la altura y ayudar a Pablo, el nuevo System Manager, en acelerar su curva de incorporación y rendimiento, definiendo su papel de creación y mantenimiento de componentes, así como de mediador entre diseño y desarrollo.

Arrancamos el proyecto

El proyecto arranca en plena pandemia global, con una organización digna del gobierno (en lo positivo). El equipo de Mendesaltaren hizo una inmersión en el producto de Bnext, comenzando con una serie de entrevistas a los principales miembros de los equipos, para recoger necesidades, frustraciones, ideas y oportunidades.

Este proceso esclareció los principales problemas y los puntos en los que se haría hincapié durante el proyecto:

• Existía un desequilibrio entre Bnext, un producto maduro, asentado en el mercado, con las herramientas y el proceso que seguíamos en el equipo de diseño. Situación debida a la decisión estratégica de avanzar rápido en captación y expansión. Era el momento de romper cosas y generar el problema, antes que tratar de cubrirlo.
• Eramos conscientes de cómo Figma podía ayudarnos a dar un salto de calidad y unificación, evitando usar el versionado en Abstract, el Handoff en Zeplin y pasar a un proceso más sofisticado donde todas las necesidades de diseño y control de versiones se centralizan sobre un mismo software.
• ¡Se incorporan nuevos miembros! El crecimiento del producto viene acompañado de varias incorporaciones al equipo de diseño, lo que nos demanda un proceso en el que todos puedan trabajar de forma armónica, con roles claros y bajo un mismo estándar de calidad y proceso. Un argumento más para pasar a una herramienta dónde la colaboración está en el centro.
• Una alta demanda a diseño, que como departamento central, da soporte a negocio, a producto, a desarrollo y a data. Nos enfrentábamos al reto de mantener el alto estándar.
• Necesidad de un Sistema de Diseño, con la premisa de ser una herramienta compartida con el equipo de desarrollo, capaz de agilizar los procesos de creación y mejorar la consistencia. Fundamental para llevar el producto Bnext a una nueva fase.
• Una nueva organización de archivos y diseños que sea escalable y que responda a las necesidades de negocio. Teniendo en cuenta la reciente internacionalización, organizar los diseños de los diferentes países suponía un nuevo reto.
• Librerías abiertas que nos permitan una mayor sincronización entre equipos. Llevar el equipo de Diseño Gráfico a Figma y trabajar en base a los mismos recursos era uno de nuestros mayores retos. Crear campañas desde la plataforma, pudiendo automatizar y agilizar los procesos.
• La nomenclatura de pantallas como punto de contacto con el equipo de Data resultaba complicado. No existía una regla marcada, lo que provocaba brechas, siendo un punto claro de mejora.

Proceso de trabajo bien definido

Una de las principales verticales del proyecto: la organización. Iteramos el planteamiento en base a nuestras necesidades, llegando a un proceso de trabajo basado en tareas y con archivos Main como fuente de la verdad, propiando así:

1. Una mayor eficiencia
2. Un mejor seguimiento del estado de la tarea por todos los miembros del equipo
3. Un registro más preciso.
4. Una mejor diferenciación lo que está en desarrollo y producción

Sistema de diseño y componetización

Parte de las necesidades pasaban por la decisión de crear un Sistema de Diseño. Una herramienta compartida entre diseño y desarrollo, que sirva como lenguaje común, estandarizado y respaldado por todos sus usuarios, reducciendo la fricción en la toma de decisiones. Algunos beneficios que nos aporta el Sistema de Diseño son:

1. Ahorrar tiempo de diseño y desarrollo
2. Economiza recursos y mejora la consistencia
3. Escalable y fácil de evolucionar, con unas bases del sistema sólidas
4. Estrechar los lazos entre diseño y desarrollo

El contar con un sistema nos ayuda a centrarnos en los problemas y retos que se plantean en el diseño, beneficiándonos de los recursos del sistema para poder resolverlo.

A nivel de equipo, el utilizar un Sistema de Diseño fomenta el conocimiento compartido de todos los integrantes, a los que empuja a trabajar juntos. La documentación que se genera ayuda a incorporar a nuevos miembros, los cuales necesitan mucho menos tiempo para familiarizarse con el producto.

Nuestro modelo define los elementos que componen ese sistema y la relación que existe entre ellos. En base a los principios de Atomic Design, nuestro sistema, que conforma el producto, se compone de 3 capas: Foundations (Tokens), Componentes y Templates.

• Foundations: Son los aspectos que definen el visual del sistema. Agrupamos color, tipografía, spacing, estilos, logos, iconos e ilustraciones. Esto se materializa en Tokens o Design Tokens. Los utilizamos para conseguir la mayor consistencia en el producto. Se han ideado de forma que su nomenclatura es agnóstica a sus valores, para permitir ser cambiados o ser dinámicos. En el caso del color, por ejemplo, se logra abstrayendo al mismo de su valor real (código hexadecimal) y dándole uno en función de su uso o rol (wait for Dark Mode).
• Componentes: Son los elementos que resuelven las necesidades básicas de la UI. Diseñamos y codificamos componentes para ser reutilizados. Estos componentes basados en normas se alimentan de las Foundations, que nos permiten evolucionar Bnext de manera más eficaz.
• Templates: Pantallas core, que se repiten con frecuencia y que su construcción en base a componentes o fragmentos propios, nos ayuda a esparcir fácilmente los cambios en todas sus sinónimas, minimizando o eliminando de manera total el impacto de los cambios.

Resultado final

• El equipo de diseño en Bnext ahora es mucho más transparente. Figma nos permite trabajar de forma colaborativa y hacer partícipes al resto de la organización, donde TODOS tienen acceso a los últimos diseños, como al trabajo en proceso. Mantenemos el impacto de diseño como pilar fundamental en la empresa.
• La organización por tareas nos ayuda a trabajar de forma más eficaz y ordenada, junto con el uso de Main como fuente de la verdad, asienta las bases del futuro de Bnext como gran empresa.
• Un sistema de diseño con unas bases sólidas, bien integrado en la organización, nos permite crear e iterar de forma mucho más ágil en diseño y desarrollo y solucionar todos los problemas de consistencia. Con miras en una alta escalabilidad del producto y empresa.
• La unión de los departamentos de Diseño sobre la herramienta Figma, nos ha permitido idear sistemas de automatización de procesos en campañas de Marketing (Banners, Mailiang, etc.) de forma mucho más ágil. Creamos una marca Bnext más potente.

Para terminar, nos gustaría dar las gracias al equipazo de Mendesaltaren por habernos acompañado en el proyecto y a todas las personas que nos han abierto sus conocimientos: Alberto Roldán (Eventbrite), Carlos Tallón (Cabify) e Ismael Viejo (Coverwallet).

Este artículo ha sido un pequeño resumen de todo el proyecto, pero no queremos quedarnos aquí. Tenemos pensado contaros en detalle cómo hemos conseguido todos estos hitos, os dejamos algunos Sneak Peaks: “Flujo de trabajo de un equipo de Diseño” , “Categorización y creación de componentes” , “Equipo de Brand Design en Figma” , etc.