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:

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í:

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:

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.

Resultado final

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.

@yourbnext product design, copy and graphic design team