Customer.io simplifica las entregas con variables y Dev Mode

Tiempo de lectura: 4 minutos

Resumen: la funcionalidad siempre ha sido un aspecto fundamental en el mundo de la tecnología de marketing (MarTech). Customer.io ha revolucionado el sector con un enfoque diferente: el diseño y la experiencia de usuario son sus principios rectores a la hora de crear productos para sus clientes. Fundada en 2012, la empresa ha crecido hasta impulsar campañas de mensajería automatizada para marcas líderes como Notion, Clearbit e IMAX.

Como parte del plan Organización de Figma, Customer.io ha mejorado las entregas de diseño a desarrollo utilizando variables y Dev Mode, lo que permite al equipo entregar el trabajo más rápido.

Desafío: las bibliotecas de componentes desconectadas crean fricciones entre el diseño y el desarrollo

Aunque Customer.io llevaba tiempo utilizando Figma, llegó a un punto de inflexión en el que la falta de gobernanza del sistema de diseño y el uso de componentes ad hoc empezó a afectar a su trabajo. Aiden Bordner, director sénior y responsable de Diseño de Producto de Customer.io, explica: "Llegamos a un punto donde no todos los componentes tenían una representación canónica en Figma. No existía una continuidad clara entre diseño y desarrollo, porque las especificaciones no se vinculaban fácilmente con la intención definida en el sistema de diseño".

Esta desconexión generó discrepancias en el trabajo que ya se había lanzado. Aunque a primera vista el impacto era sutil (un botón con el borde equivocado, un divisor demasiado oscuro o un espaciado desajustado por unos pocos píxeles), estas discrepancias entre el diseño y el desarrollo se tradujeron rápidamente en problemas graves y en una experiencia de usuario incoherente.

"Cuando detectamos esos errores, alguien del departamento de control de calidad tiene que marcarlos, se crea un ticket y luego reconstruimos el front-end", señala Aiden. "El tiempo y los costos de cambio necesarios para solucionar los problemas tienen un impacto real en lo que podemos ofrecer a los clientes en términos de desarrollo de nuevas funciones".

Ante la incertidumbre de los flujos de trabajo y el aumento de las fricciones entre los equipos, Aiden sabía que había que realizar un cambio antes de que estos descuidos afectaran la experiencia de usuario a mayor escala.

Solución: entran en juego las variables y Dev Mode

Customer.io adoptó las últimas funciones de Figma al comenzar a actualizar su sistema de diseño. "El punto de partida fue Config 2023:se lanzaron Dev Mode y las variables, y pensé: 'Esta es la herramienta que estaba esperando'", afirma Aiden. El equipo de diseño de producto configuró variables en Figma para definir colores, espaciado, tamaño de fuente, radio de borde y estilos de tipografía. Ahora, los desarrolladores ya no tienen que adivinar el número exacto de píxeles para un margen o el código de color adecuado.

Gracias a las variables, el equipo pudo estandarizar las propiedades de diseño desde cero. "Un desarrollador no tiene que preocuparse por hacer su propia interpretación de un diseño". Esto ayudará a los nuevos desarrolladores a convertir un prototipo en una implementación cuando tengan delante el 60-70 % de las especificaciones”, dice Aiden. Ahora que se han establecido estos marcos uniformes, los desarrolladores cometen menos errores y pueden trabajar a un ritmo más rápido.

Además, la adopción de Dev Mode ha supuesto un gran cambio en el flujo de trabajo de Customer.io. "A veces puede resultar complejo determinar qué está listo para desarrollarse», afirma Aiden. "Con Dev Mode, las anotaciones permiten que el diseñador destaque una sección específica para que el desarrollador pueda ponerse a trabajar de inmediato".

Impacto: los equipos de diseño y desarrollo establecen un nuevo estándar de eficiencia

La renovada entrega del diseño al desarrollo ha dado frutos en la productividad del equipo. Ahora que los archivos de diseño incluyen anotaciones, los desarrolladores pueden inspeccionarlos fácilmente, comprender la estructura subyacente y comenzar la implementación de inmediato.

Esta mejora en la velocidad también beneficia al equipo de diseño, cerrando el ciclo. "Los diseñadores están adoptando esa mentalidad de crecimiento", afirma Rennie Abraham, responsable de Brand Studio de Customer.io. "Pueden iterar, probar y ajustar en lugar de pasar seis meses trabajando en dos o tres grandes páginas de aterrizaje sin saber si eso va a alcanzar nuestros objetivos comerciales. No hay muchos lugares que tengan la colaboración y el espíritu de innovación que Figma nos permite alcanzar."

Al aprovechar las variables y Dev Mode, el equipo de Customer.io no solo ha mejorado sus procesos internos, sino que se ha posicionado como líder en diseño en el sector MarTech. Los diseñadores facilitan el seguimiento de los pequeños detalles y las revisiones cuando marcan sus archivos como "Ready for Dev", lo que les permite alcanzar un mayor grado de perfección en lo que entregan junto con sus compañeros desarrolladores. El compromiso de la empresa con este nivel de perfeccionamiento permite a sus usuarios confiar en que el producto puede transformar sus comunicaciones con los clientes.

"Nos centramos especialmente en ofrecer a nuestros clientes un nivel de detalle en la UX y la UI propio del sector de consumo", afirma Aiden. "Estas son las bases, en términos de conexión entre nuestros entornos de diseño e ingeniería, que nos brindan una ventaja competitiva".

Customer.io es un excelente ejemplo de los resultados positivos que se obtienen cuando los equipos optimizan las entregas del diseño al desarrollo. El resultado final no solo genera eficiencia y una mejor experiencia de usuario, sino que también presenta nuevas oportunidades para la innovación creativa. Con este enfoque colaborativo, el equipo seguirá creando soluciones centradas en el diseño que proporcionan a sus usuarios datos valiosos para atraer a sus clientes.