dos días a la semana, ahora unas dos horas: un newsletter que se escribe desde el sitio web

Cada semana, 2fifty Texas BBQ le manda un newsletter a casi 90,000 personas. Es un restaurante con dos locales, uno en Riverdale Park, MD y otro en Washington, DC, y el newsletter es uno de sus mejores canales de venta. También es una carga. En una semana completa, armar una edición le tomaba a quien diseña hasta dos días de trabajo.

De esa tensión se trata este post. El trabajo es tedioso, y importa. Una edición descuidada no falla haciendo ruido; sale a 90,000 bandejas de entrada con una fecha mal, un link roto o una imagen que ningún lector de pantalla puede describir.

Esta semana, la primera edición real pasó del sitio web del restaurante a una vista previa para el cliente en un par de horas de trabajo de una persona, con la ronda de feedback incluida. Esto es cómo funciona, qué sigue siendo a mano, y por qué creemos que el resultado no solo es más rápido sino mejor.

un montón de piezas que se mueven

El correo está hecho de imágenes: bloques diseñados que se exportan como imágenes y se cambian dentro de un correo clonado en su herramienta de email, cada imagen con su link y su texto alternativo. En la bandeja de entrada parece una pequeña revista editorial. Armarlo se veía así:

0. Antes de cualquier diseño, el cliente manda un brief. Sabe qué quiere vender más, el contexto, y hasta cuándo conviene que salga para darle un empujón a las ventas.
1. Juntar los especiales, las noticias y las fotos de la semana, desde el sitio web, un drive compartido y los chats.
2. Copiar y pegar textos que ya viven en el sitio web, y adaptarlos para que quepan.
3. Armar de doce a catorce bloques en Figma a partir de componentes, ajustando el texto en cada uno.
4. Exportar las imágenes y ponerles nombre a los archivos.
5. Mandarle una vista previa al cliente y pasar por rondas de revisión en el chat.
6. En la herramienta de email: clonar el correo de la semana pasada, subir cada imagen, poner cada link y cada texto alternativo, el asunto y el preheader.
7. Mandar una prueba y arreglar lo que esté mal.

Nada de esa lista es difícil. Es larga, y casi todo consiste en mover cosas que ya existen de un lugar a otro. La mayor parte del texto del newsletter ya está en el sitio web del restaurante; alguien ya lo escribió, lo aprobó y lo publicó. Cada semana, una persona lo volvía a escribir.

Y en el acarreo es donde se escapan las cosas pequeñas. De doce a catorce imágenes, cada una con su posición, su nombre de archivo, su texto alternativo, su link y su etiqueta de seguimiento, más un asunto, un preheader, un botón y un pie. Son algo así como 64 a 74 campos pequeños por edición, cada semana, al final de un día largo de diseño. Justo los campos que se salta una persona cansada.

Y cada uno tiene que estar bien, no solo estar. Un link equivocado da una impresión equivocada. Un especial equivocado manda a alguien a manejar una hora para descubrir que no está en el menú.

Algunas de estas piezas, siendo honestos, no han funcionado desde hace rato, porque los buenos nombres de archivo cuestan hacerlos a mano al final de un día largo. Estamos casi seguros de que mandamos un par de docenas de correos donde el logo se llamaba 04-chicken-combo-34.png. Esa va por nuestra cuenta.

no es una plantilla

Hay formas más rápidas de hacer un correo. La herramienta de email tiene su propio asistente de IA para correos, y hay plantillas de sobra. Las dos habrían sido más rápidas de montar, y las dos habrían sacrificado lo que al restaurante le importa: un newsletter diseñado, editorial, que se parece a ellos y no a todos los demás.

Por eso esto es a la medida. Pensalo como una caja de legos que diseñamos para 2fifty. Las piezas son bloques de newsletter: un masthead, una portada para cada tipo de edición (temporada, evento, feriado, regular), una tarjeta de menú de especiales, tarjetas por día, prensa, un adelanto del blog, una cita de reseña, pairs-well y catering, cada una en unos cuantos temas de color. Cada edición encaja un set de esas piezas en un orden, como las secciones de una revista, y les echa adentro el contenido de la semana. Las piezas se diseñan una vez, a mano. Armar es rápido. A esa caja le decimos el sistema de bloques, y el skill está construido alrededor de ella, y de cómo ya trabaja este equipo.

Lo pensamos así: la buena BBQ sigue siendo un pit y una persona que lo conoce; los mejores pitmasters cuidan el oficio y usan las herramientas que haga falta para no adivinar en lo demás. Oficio donde cuenta, herramientas con IA y código para todo lo que lo rodea. A este tipo de trabajo le empezamos a decir creative AI ops.

lo que hace el skill ahora

Empaquetamos todo el proceso como un skill que comparte el equipo. Corre en seis pasos:

1. Arranca del brief, después lee el sitio web. Lo que quien diseña juntó del brief del cliente entra primero: qué empujar, el contexto, cuándo debe salir. Después el skill lee los especiales, la página de temporada y las noticias del sitio para completar el resto, reutilizando los textos y las fotos tal cual. Lo que no encuentra queda como un marcador entre [corchetes], y la corrida termina con un reporte de lo que le falta al sitio.
2. Arma la edición sobre el sistema de bloques que diseñamos para este cliente.
3. Publica una página editable del newsletter. Reordenar, esconder o cambiar el color de los bloques; hacer clic en cualquier bloque para editar cada campo y cambiar la foto; bloquear lo que ya está listo.
4. Manda la edición a feedback. Arma una página de vista previa para el cliente: para qué es este correo, cómo se ve en la bandeja de entrada, el correo exactamente como va a llegar (con el pie real de la herramienta de email), y cada marcador abierto convertido en una pregunta. El cliente comenta sobre cualquier bloque. La segunda ronda actualiza el mismo link, así que los comentarios se quedan donde estaban. Preguntar "¿qué dijo el cliente?" convierte los comentarios en una lista de cambios, que se aplica después de la aprobación.
5. Exporta. Archivos de imagen numerados y fáciles de buscar, en el orden de envío (el número va primero, para que se ordenen solos al elegirlos), con el texto alternativo y los metadatos adentro, un link con seguimiento por imagen y una hoja de armado, guardados en la carpeta del proyecto y en un drive compartido.
6. Abre una ayuda para la subida. Una página con cada link, cada texto alternativo y cada archivo a mano para copiar mientras se cambian las imágenes en la herramienta de email, con un check por cada una que ya está.

La máquina hace el acarreo. Quien diseña sigue decidiendo cómo se ve la edición, y el cliente la sigue aprobando. Nadie escribe un menú dos veces.

no solo más rápido: mejor

Las horas importan, y ya vamos a llegar a ellas. Pero lo que más nos interesa es lo otro: los campos pequeños que se saltan cuando alguien está cansado ahora se hacen siempre, porque nadie tiene que acordarse de ellos.

• Texto alternativo de verdad, por imagen. Cada imagen lleva el suyo, en la hoja de armado y adentro del archivo. Quien lee con un lector de pantalla, o con las imágenes apagadas, también recibe el newsletter.
• Nombres de archivo que dicen algo. El skill nombra cada archivo según el contenido de su bloque, numerado en orden de envío, el número primero. El logo se llama logo. Son lo bastante descriptivos para encontrarlos el mes que viene buscando en el drive.
• Un link con seguimiento distinto por imagen. Antes, la misma URL se repetía en todos los cortes sin ninguna etiqueta por corte, así que no había forma de saber qué bloque se llevó el clic. Ahora cada imagen lleva su propio link etiquetado, y la siguiente edición se puede planear con lo que la gente de verdad cliqueó.
• El asunto y el preheader se revisan, en vez de escribirse a última hora.
• Nada inventado. Si el sitio no lo dice, la edición tampoco. Más sobre eso abajo.

corchetes, nunca inventos

La regla que más nos importa es la más pequeña. Un newsletter de restaurante está lleno de detalles fáciles de inventar y caros de equivocar: un precio, una fecha, el horario de un feriado, cuál de los dos locales tiene el especial. Un modelo los rellena sin problema, y suena bien. Con una lista de este tamaño, un detalle mal le llega a mucha gente.

Así que cada campo que el skill no puede sacar del sitio web sale como un marcador entre corchetes, como [precio] o [fecha del evento]. Le pasan tres cosas:

• Aparece en el reporte de la corrida como algo que le falta al sitio. Esa lista sirve por sí sola: si el newsletter no lo encuentra, probablemente la clientela tampoco.
• No se puede esconder. Un corchete adentro de un bloque diseñado se ve mal a propósito.
• En la vista previa del cliente, se vuelve una pregunta. El cliente la responde en el mismo lugar donde ya está comentando, y la respuesta entra a la lista de cambios.

Escribimos la misma regla cuando reconstruimos 24 casos de estudio en una tarde: solo lo que dice la fuente. La versión honesta de rápido deja un hueco que se ve. La deshonesta lo rellena y suena buenísimo.

las horas

Son estimaciones de la propia semana de quien diseña, paso por paso. La columna de "después" está medida en la primera edición real. Una edición no es un ritmo estable; vamos a saber el número real después de unas cuantas semanas más.

Son unas 13.75 horas de vuelta por edición, más o menos el 86 % del tiempo.

La gráfica también muestra dónde está el tiempo ahora. El bloque más grande que queda es la subida a la herramienta de email, y esa parte sigue siendo a mano.

el año

Por edición, parece un buen ahorro. En un año parece otra cosa. Con unas cincuenta ediciones semanales:

• Antes: unas 16 horas × 50 ≈ 800 horas al año en el newsletter.
• Después: unas 2.25 horas × 50 ≈ 112 horas.
• De vuelta: unas 690 horas al año.

Con semanas de 40 horas, 690 horas son unas 17 semanas de trabajo. Suponiendo unas 46 semanas laborales al año, eso es más o menos cuatro meses del año de una persona diseñando a tiempo completo, un poco más de una semana de cada tres. Todo son estimaciones: la columna de antes es la cuenta de quien diseña, y la de después es una edición real multiplicada por cincuenta.

Ese tiempo todavía no está gastado, y no vamos a hacer como que sí. Para lo que queda libre es el trabajo que una persona debería estar haciendo de todos modos: diseño que necesita un ojo humano, campañas nuevas, la biblioteca de fotos, mejores briefs con el cliente, y leer lo que dicen los links con seguimiento por imagen sobre lo que la gente de verdad cliquea.

cómo lo construimos

Más o menos un día de sesiones. Empezamos con un laboratorio de bloques: variaciones agrupadas por vibra, quien diseña fue bloqueando favoritos en cada ronda, y cada ronda nueva aprendió de esos bloqueos hasta encontrar un estilo intermedio entre ellos. Eso se volvió un kit, el kit se volvió un editor, y el editor se volvió un skill empaquetado que el equipo puede compartir, con pruebas automáticas debajo: 90 pruebas en Python, más pruebas de navegador para las páginas. Es otra vez el ciclo de construir por acumulación, con fecha de entrega de un cliente: cada capa parada sobre la anterior.

lo que todavía no hace

• La subida sigue siendo a mano. La página de ayuda la hace más rápida y más difícil de equivocar, pero una persona todavía cambia cada imagen en la herramienta de email. Es el bloque de tiempo más grande que queda.
• Las fotos todavía necesitan a una persona. El skill reutiliza las fotos que ya están en el sitio. Alguien todavía tiene que tomar las nuevas, o elegirlas.
• Una edición no es una tendencia. La columna de después es una sola edición real. Las primeras semanas de cualquier cosa son las semanas en que más atención se pone.
• La columna de antes es una estimación. Es la cuenta que hizo quien diseña de su propia semana, no una hoja de horas.
• Solo sabe lo que sabe el sitio. Los corchetes atrapan lo que falta. Si algo en el sitio está desactualizado, el newsletter arranca desactualizado también, y una persona lo tiene que atrapar en la revisión.

los siguientes experimentos

Hay dos cosas en camino, ninguna terminada:

• El conector de marca. Conectar el conector de marca alojado de El Fin (un estudio de diseño salvadoreño que Sam cofundó y una empresa separada de CAPSLOCK), el mismo MCP de conocimiento de marca que pusimos a prueba con usuarios sintéticos. Con él, la voz, los datos y las reglas visuales del restaurante vienen cargados desde el principio, así que el skill tiene menos que adaptar y el paso de los textos se achica otra vez.
• Una base de fotos. Estamos armando una base de etiquetas y metadatos para las fotos del restaurante junto con la fotógrafa de la marca, Sophie Macaluso. La idea es que el skill pueda elegir la foto correcta por plato, día y local, en vez de que una persona ande buscando entre drives.

Vamos a escribir lo que cambia cada una cuando las hayamos corrido.