Sales Hub
Plataforma interna que permite a los consultores de WindMar Home personalizar y generar material promocional de la empresa de forma autonoma, utilizando plantillas predefinidas y su informacion de contacto.
Equipo
Mi rol: Desarrollador principal y Diseñador UX/UI — responsable de la arquitectura completa (frontend y backend), integraciones con servicios externos, diseño de la experiencia de usuario e implementacion de la plataforma.
Contexto y problema
En WindMar, los consultores pueden promocionarse utilizando la imagen de la empresa. La solucion existente era una especie de drive compartido con imagenes estaticas que los consultores descargaban y usaban tal cual, sin posibilidad de personalizar el contenido con sus datos de contacto.
Esto generaba dos problemas: los consultores usaban material generico que no los identificaba, o editaban las piezas por su cuenta perdiendo la coherencia visual de la marca.
La solucion: aprovechar que la empresa ya utilizaba Placid para generar sus artes, y construir una plataforma donde los consultores pudieran personalizar plantillas aprobadas por la empresa con su propia informacion, generando material profesional y consistente con la marca.
Desafios tecnicos
Integracion con Placid
El SDK de Placid no esta bien adaptado para trabajar con React y Next.js. Para resolverlo, creé una capa de abstraccion sobre el SDK que simplificaba su uso, evitaba codigo repetitivo y permitia integrar tanto la generacion de artes como el editor visual de forma consistente.
Persistencia de datos del usuario
La informacion de cada consultor proviene de Zoho (correo, nombre, telefono), pero estos datos no siempre son los que quieren mostrar en sus artes — pueden preferir usar un apodo o un numero especifico para ventas. Ademas, ningun usuario quiere re-ingresar sus datos cada vez que genera un arte.
La solucion fue almacenar los datos personalizados de cada consultor y vincularlos a las plantillas. Esto no solo mejoro la experiencia de uso, sino que tambien permitio ahorrar tokens de Placid al evitar generaciones duplicadas.
Base de datos flexible
Elegí DynamoDB como base de datos por su naturaleza no relacional: la capacidad de agregar o eliminar campos sin migraciones resultaba ideal para un proyecto donde los requerimientos evolucionaban constantemente.
Tiempos de generacion y notificaciones en tiempo real
Placid no genera los artes de forma instantanea — el tiempo varia segun el tipo (imagen, video o PDF) y el peso de la plantilla. Para que el usuario no quedara esperando sin feedback, implementé un sistema de notificaciones en tiempo real usando webhooks, WebSockets y Sonner (para las notificaciones en la UI). El flujo notifica al usuario cuando su arte entra a la cola de generacion y cuando esta listo para descargar.
Proceso de desarrollo
Arquitectura
Elegí Next.js como framework principal para aprovechar al maximo el server-side rendering, mejorando los tiempos de carga y la experiencia del usuario. El backend se construyo con Nest.js, y la infraestructura se apoyo en AWS (DynamoDB para datos, S3 para archivos).
Galeria de recursos y plantillas
Al integrar con Placid, la plataforma consulta todas las plantillas disponibles junto con sus metadatos: dimensiones (para evitar saltos en el layout), campos editables, y formatos de salida disponibles (imagen, video, PDF).
Ademas de las plantillas, se aprovecho la integracion existente con AWS S3 para mostrar los recursos generales de la empresa — imagenes, videos, PDFs y cualquier tipo de archivo — funcionando como un hub centralizado de contenido.
Diseño inspirado en Pinterest
Para la experiencia visual nos inspiramos en Pinterest: un layout de tipo masonry que muestra las plantillas de forma organica, con previews de video al hacer hover. Este patron es familiar para la mayoria de usuarios y no requiere curva de aprendizaje.
Sistema de filtros dinamicos
A medida que la cantidad de plantillas crecia, fue necesario implementar filtros. Sin embargo, por tiempos no era viable que yo como desarrollador agregara filtros nuevos manualmente cada vez que se necesitaran. La solucion fue crear un sistema de filtros dinamicos que se configura al momento de crear la plantilla en Placid, usando una convencion simple:
(Nombre del filtro):(Valor del filtro)Por ejemplo, si una plantilla tiene las etiquetas Brand:redes y Brand:sitios, la interfaz automaticamente agrupa estos valores bajo un unico filtro llamado “Brand” con las opciones “redes” y “sitios”. Al aplicar un filtro, el layout se anima de forma suave para dar una experiencia reactiva y fluida.
Resultado
La plataforma se implemento exitosamente y es utilizada de forma activa por los consultores de WindMar Home.
Impacto concreto:
- Autonomia para los consultores, que ahora generan su propio material sin depender del equipo de diseño
- Consistencia de marca garantizada, ya que todo el material parte de plantillas aprobadas
- Reduccion de carga operativa para el equipo de marketing y diseño
- Sistema escalable, donde nuevas plantillas y filtros se agregan sin intervencion del equipo de desarrollo
Conclusión
Sales Hub fue un proyecto donde tuve que resolver problemas en multiples capas: desde la arquitectura del backend hasta el diseño de la interfaz, pasando por integraciones con servicios externos y optimizaciones de experiencia de usuario. Cada desafio tecnico tenia un impacto directo en la usabilidad, lo que hizo que cada decision importara.