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.

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

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

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).

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.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store