MKR es una plataforma AdTech que automatiza la producción de display ads a gran volumen editando un conjunto mínimo de variables.
MKR nació como una iniciativa de innovación interna en Blink.la para explorar una nueva vertical de negocio orientada a la automatización de display ads a gran escala.
El objetivo era diseñar un sistema capaz de generar grandes volúmenes de piezas manteniendo consistencia visual, flexibilidad de contenido y control creativo, reduciendo al mismo tiempo la carga operativa de producción manual.
Como Product Designer estuve a cargo del discovery, el diseño del producto y las presentaciones, trabajando junto al Head of Design y el equipo de desarrollo.
Producción manual
Las campañas de nuestros clientes requerían cientos de variantes (tamaños, idiomas, CTAs) que se producían una por una, consumiendo semanas de trabajo operativo de bajo valor creativo.
Rigidez del mercado
Muchas soluciones existentes eran plataformas SaaS cerradas o servicios costosos, con workflows poco flexibles y personalizados.
Falta de consistencia
Al escalar producciones, aumentaban los errores visuales, inconsistencias y tiempos de revisión.
Competencia analizada durante la etapa de research
Benchmark
Investigué herramientas y plataformas del mercado con propuestas similares para identificar distintos enfoques, patrones, oportunidades y limitaciones. Relevé y prioricé las funcionalidades principales de cada solución.
Definiciones tecnológicas
Junto al equipo exploramos distintos enfoques técnicos (desde piezas estáticas y animaciones en After Effects/Lottie hasta soluciones HTML con animaciones en CSS y JavaScript). Desde producto y UX, analicé cómo estas decisiones afectaban la flexibilidad de edición, los workflows y la escalabilidad del sistema.
Templates y workflows de diseño
Analicé estructuras de templates y lógica de variables para garantizar consistencia visual, flexibilidad de contenido y escalabilidad en la generación de piezas.
Estado de avance de las principales funcionalidades de la herramienta
Los ads en HTML se ajustan mejor al mercado que busca el negocio.
Definiciones iniciales
Trabajé junto al equipo de desarrollo en las definiciones iniciales del modelo de datos, la lógica de edición de las propiedades, el layout y la arquitectura general de la plataforma. El desafío era definir la forma más simple de incorporar la funcionalidad básica para cumplir con los tiempos establecidos del MVP.
Workflow de diseño
Definí qué aspectos de diseño podían ser convertidos en variables desde un template y establecí el workflow para una correcta integración entre los diseños en Figma y MKR, facilitando luego su edición y escalabilidad.
Edición a escala
La generación masiva de piezas debía mantener consistencia y flexibilidad. Diseñé workflows de automatización llamados "Collections" que permitían aplicar cambios en cascada usando variables para generar múltiples banners de forma inmediata. También diseñé la propuesta de importación de CSV para escalar la generación de ads.
Animaciones
La edición de animaciones debía integrarse de forma simple. Trabajé junto al equipo de desarrollo en la edición de propiedades utilizando GSAP, una librería JavaScript para animaciones HTML. Diseñé un panel que organizaba las secuencias en pasos, similar al utilizado en herramientas de presentaciones.
IA integrada
Investigué y prioricé, junto al equipo de desarrollo, herramientas de IA para incorporar a la plataforma. Se evaluaron e implementaron distintas integraciones orientadas a acelerar workflows de producción y prototipado.
El canvas agrupa las piezas por orientación, siguiendo la lógica de edición masiva.
Las propiedades se agrupan y se pueden editar de a una pieza o en todas a la vez.
Se pueden crear piezas masivamente importando un CSV o vinculando el proyecto a un spreadsheet online.
El export permite diferentes formatos y ocurre en segundo plano.