Customer.io simplifica las entregas de diseños 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 su pauta a la hora de crear productos para sus clientes. Fundada en 2012, la empresa ha crecido hasta convertirse en el motor de las campañas de mensajes automáticos de marcas líderes como Notion, Clearbit e IMAX.

Como parte del plan Organización de Figma, Customer.io ha mejorado sus entregas de diseño y desarrollo utilizando variables y Dev Mode, permitiendo al equipo enviar el trabajo más rápidamente.

Reto: las bibliotecas de componentes inconexas crean fricciones entre el diseño y el desarrollo

Aunque Customer.io llevaba tiempo utilizando Figma, alcanzaron un punto de inflexión en el que la falta de control del sistema de diseño y los componentes ad hoc comenzaron a afectar a su trabajo. Aiden Bordner, Director Sénior de Customer.io, Responsable de Diseño de Producto, explica: «Llegamos a un punto en el que no todos los componentes tenían una representación canónica en Figma. No había continuidad compartida entre el diseño y el desarrollo porque las especificaciones no se correspondían fácilmente con la intención plasmada en el sistema de diseño».

Esta desconexión creó discrepancias en el trabajo que se había lanzado. Aunque a primera vista el impacto era sutil (un botón con el borde incorrecto, un divisor demasiado oscuro, un espaciado desviado en unos pocos píxeles), estas discrepancias en el desarrollo del diseño pronto se convirtieron en graves problemas y en una experiencia de usuario incoherente.

«Cuando detectamos esos errores, alguien del departamento de control de calidad tiene que etiquetarlos, se crea un ticket y, a continuación, reconstruimos el front-end», señala Aiden. «Ese tiempo y los costes de cambio necesarios para solucionar los problemas tienen un impacto real sobre lo que podemos ofrecer a los clientes en términos de creación de nuevas funciones.

Con flujos de trabajo inciertos y una mayor fricción entre los equipos, Aiden sabía que había que hacer un cambio antes de que estos descuidos afectaran la experiencia de usuario a gran escala.

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

Customer.io adoptó las últimas funciones de Figma cuando empezaron a actualizar su sistema de diseño. «El pistoletazo de salida 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 que fueran compatibles con colores, espaciado, tamaño de fuente, radio de borde y estilos tipográficos. Ahora, los desarrolladores ya no juegan al juego de adivinar para averiguar el número preciso de píxeles para un gutter o el código de color correcto.

Con las variables, el equipo pudo estandarizar las propiedades de diseño desde cero. «El desarrollador no tiene que preocuparse por hacer su propia interpretación de un diseño. Esto ayudará a los nuevos desarrolladores a llevar a cabo la implementación de una maqueta cuando tengan delante el 60-70 % de las especificaciones», afirma Aiden. Ahora que se han implantado estos marcos uniformes, los desarrolladores cometen menos errores y pueden trabajar a un ritmo más rápido.

Además, la incorporación de Dev Mode ha supuesto un cambio radical en el flujo de trabajo de Customer.io. «Puede resultar complicado determinar qué está listo para desarrollarse», afirma Aiden. «Con Dev Mode, las anotaciones permiten a los diseñadores resaltar una sección específica para que los desarrolladores puedan ponerse manos a la obra directamente».

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

La renovada entrega entre el diseño y el desarrollo ha dado sus frutos en cuanto a la productividad del equipo. Ahora que los archivos de diseño están anotados, los desarrolladores pueden inspeccionarlos fácilmente, comprender la estructura de fondo y comenzar la implementación de inmediato.

Liberar la velocidad también ha supuesto un gran avance para el equipo de diseño. «Los diseñadores están adoptando esa mentalidad de crecimiento», afirma Rennie Abraham, Responsable de Brand Studio en Customer.io. «Pueden iterar, probar y ajustar, en lugar de pasar seis meses trabajando en dos o tres grandes páginas de destino sin saber si alcanzarán nuestros objetivos empresariales. No hay muchos lugares que ofrezcan la colaboración y el espíritu de innovación que Figma nos facilita».

El equipo de Customer.io ha sacado partido de las variables y de Dev Mode, y no solo ha mejorado sus procesos internos, sino que se ha posicionado como líder en diseño dentro del sector MarTech. Los diseñadores facilitan el seguimiento de los pequeños detalles y las revisiones cuando marcan sus archivos como «Ready to Dev», y alcanzan 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 UX y de IU de calidad para el consumidor», afirma Aiden. «Estas son las bases, en lo que respecta a la conexión entre nuestros entornos de diseño e ingeniería, que nos proporcionan una ventaja competitiva».

Customer.io es un gran ejemplo del efecto positivo de Figma cuando los equipos optimizan las entregas del diseño al desarrollo. El resultado final no solo mejora la eficiencia y la experiencia de usuario, sino que también brinda nuevas oportunidades para la innovación creativa. Con este enfoque colaborativo, el equipo seguirá creando soluciones centradas en el diseño que proporcionen a los usuarios información valiosa para atraer a sus clientes.