Enfant Terrible
Mejorando la generación de assets gráficos
Cómo redefinir un workflow interno con Figma para mejorar la experiencia de usuario del equipo de Community Management.
Brief
Enfant Terrible es un medio de comunicación cooperativo fundado en 2018 en Córdoba, Argentina.
Aborda temas socioambientales, políticos, territoriales y de género. Articula con organizaciones sociales y es miembro fundador de la Red de Medios Digitales (RMD) de Argentina.
Mi rol
Me encargué del análisis e implementación de un nuevo workflow de generación de assets gráficos para el equipo de Community Management.
Realicé entrevistas internas, evalué potenciales soluciones y propuse un nuevo workflow.
El problema
Anteriormente, la generación de assets para redes sociales de los artículos publicados se implementaba en el propio sitio web, utilizando los datos de los artículos para generar una estructura HTML, y la librería dom-to-image para exportar dicha estructura a un archivo PNG.
El problema era que, debido a las limitaciones de renderizado CSS de la librería, algunas cosas eran imposibles de implementar.
Además, al no tener ningún diseñador gráfico dentro del equipo de trabajo, se dependía en gran medida de diseñadores externos para crear contenidos más personalizados, aquellos que escapaban de lo que era posible con la librería.
Trabajé pensando, en el mejor de los casos, en superar estas limitaciones. ¿En el peor de los casos? Reestructurar todo el proceso con otra herramienta.
Objetivo
Implementar un nuevo workflow para la generación de assets gráficos.
Investigación
Realicé varias entrevistas con el equipo de Community Management para entender mejor cuáles eran los principales problemas con el workflow de generación de assets implementado.
A pesar de ser consciente de las limitaciones ya mencionadas, al menos en el aspecto técnico, me interesaba más comprender lo que ellos consideraban un problema o, en el mejor de los casos, lo que realmente funcionaba.
La falta de libertad y la interfaz fueron los principales problemas.
Lo primero chocaba con la capacidad de mantener consistencia interna con la marca, en tanto que dicha libertad debía darse en un marco que no permita que se escape de sus propios lineamientos.
Lo segundo excedía el tiempo y el presupuesto del proyecto, en tanto que profundizar el desarrollo de una herramienta in-house implicaba mayor carga de desarrollo y mantenimiento.
Decisiones
El proyecto pasó entonces de intentar arreglar algo a redefinir todo el workflow con una herramienta que: no sea una solución interna ni autoalojada para mantener el mantenimiento al mínimo, sea actualizada regularmente, tenga una buena UX/UI, y permite al usuario mayor libertad creativa al tiempo que la mantiene limitada.
Figma fue mi elección. Exploré algunas herramientas y suites, como BannerBear y Adobe Suite, pero al final la relación coste-beneficio se decantó del lado de Figma.
La razón no era la mera familiaridad, sino el hecho de que:
- Se pueden definir variables y estilos globales, incluidos los colores.
- Se pueden crear componentes con variantes y operadores booleanos.
- Su interfaz es más sencilla que la de otros editores de gráficos vectoriales.
Figma permitía una mejor experiencia de usuario para todo el workflow, al tiempo que mantenía los activos generados dentro de la marca al limitarlos a estilos, variables y componentes definidos.
Diseñando
Definí los elementos que conforman la identidad visual de Enfant Terrible, como isotipos, imagotipos, logotipos, paleta y tipografía.
Cada uno de ellos se definió como componentes y estilos en una guía de estilo de la marca, que funcionó como base visual tanto de este proyecto como del rediseño del sitio web.
Realicé una evaluación visual de los contenidos publicados en las redes sociales. Identifiqué cinco tipos de contenido: artículos, citas, vídeos, monetización/fidelidad y situacional (contenido personalizado).
Cada tipo de contenido, excepto el contenido personalizado, se transformó en componentes en Figma, garantizando la coherencia en los distintos casos de uso gracias a la utilización de una única fuente de verdad.
Realicé una formación interna intensiva de dos días, seguida de una semana de asistencia. A principios de la semana siguiente, el workflow ya estaba implantado.
Algunas conclusiones
El cambio se consideró una gran mejora para el equipo de Community Management.
La intuitividad de Figma permitió acortar la formación interna con una rápida implementación.
En el momento de escribir esto, la biblioteca Figma incluye +5 componentes, con más de 60 variaciones en total.