Plataforma Salesforce
OK | Flows
OK | Flows empezó como alternativa cuidada a Typeform y evolucionó hacia una plataforma seria de journeys para Salesforce. Combina autoría visual, experiencia one-question-at-a-time, lógica de rutas, prefill seguro, entrega server-to-server a CloudPages, generación de URLs para audiencias, recuperación de abandonos, gamificación y documentación operativa.
Año
2026
Duración
435+ horas estimadas
Rango
€€.€€€
Servicio
Plataforma de producto
Reto
El reto real era diseñar una plataforma que sirviera a perfiles distintos a la vez: autores de campaña, diseñadores de journey, operadores Salesforce y analistas. Tenía que sentirse simple en la UI, pero sostener lógica compleja, datos seguros, integración con Marketing Cloud y control operativo.
Solución
Construí una arquitectura sobre Next.js 16, Supabase/PostgreSQL y Salesforce Marketing Cloud. Separé builder, player, lógica, entrega, prefill, media, respuestas y gamificación en capas claras. El resultado es una herramienta con profundidad de producto, no solo una colección de pantallas.
Resultado
Un producto que supera el formulario clásico: actúa como capa gobernada de interacción, personalización, captura y activación para campañas complejas.
Resultados
- Plataforma completa de formularios, surveys y journeys, no solo un builder básico
- Integración SFMC con CloudPages, Data Extensions, prefill seguro y jobs cron
- Modelo operativo con runbooks, tests, auditoría, logs y documentación de despliegue
Alcance
Tecnología
Un stack elegido por utilidad, no por decoración.
TypeScript
Supabase AuthSupabase PostgreSQLSalesforce Marketing CloudCloudPagesAMPscript / SSJSCloudflare R2
Framer MotionGSAP
Zod
React Hook FormJWT PrefillOpaque Prefill TokensCron JobsServer-to-server WebhooksMapa de capacidades
Cada capa que hace que este proyecto sea sustancial.
Posicionamiento de producto
OK | Flows funciona como una capa gobernada de interacción para campañas Salesforce, no como un formulario genérico.
- Autoría visual de formularios y encuestas multi-step
- Journey orchestration con lógica condicional
- Personalización por contexto CRM y datos de audiencia
- Captura, enriquecimiento y writeback hacia Marketing Cloud
- Producto preparado para campañas, promociones y experiencias de captación
Superficies de usuario
El producto cubre marketing, autenticación, dashboard, builder, runtime público y operación interna.
- Web pública con homepage, templates, docs, blog, security, pricing, contact y legal
- Login, magic link, Google OAuth, reset password y auth callback
- Dashboard protegido con listado de forms, carpetas, creación, edición y settings
- Runtime público en /f/[slug] con experiencia one-question-at-a-time
- Pitch interno para presentar el producto a dirección o equipos de negocio
Builder visual
El editor no es un panel plano; incluye canvas, inspector, preview, block library y flujo de publicación.
- Crear, seleccionar, duplicar, borrar, insertar y reordenar preguntas
- Edición inline de títulos, descripciones, opciones y CTAs
- Inspector contextual para configuración avanzada por tipo de bloque
- Preview por paso y preview de flow completo
- Undo/redo, keyboard shortcuts, publish warnings y preflight checks
Catálogo de bloques
El sistema soporta bloques simples, estructurados, ocultos, calculados y orientados a campañas.
- Short text, long text, dropdown, multiple choice, checkboxes, email, phone, number y date
- Rating, opinion scale, NPS, statement, legal consent, matrix, ranking y image choice
- Hidden field, hidden JSON, calculated field, website URL, file upload, yes/no y date time
- Slider, numeric range, address, contact, date range, availability, allocation y semantic differential
- Best/worst, qualification gate, open numeric grid, location intent, preference center y constant sum
Theming y experiencia visual
La capa visual permite crear experiencias de marca sin tocar código.
- 6 temas base: Midnight, Ocean, Sunset, Forest, Lavender y Minimal
- Controles de ancho, fuentes, botones, radius, spacing, backgrounds y surface emphasis
- Header image, logo, layouts logo-only, logo-plus-title, minimal y plain
- Footer legal, links, shell presentation y controles de alineación
- Success pages con imagen, CTAs múltiples, links, reward image fit y estilos diferenciados
Runtime y UX del respondente
El player público está optimizado para velocidad, accesibilidad y recorridos personalizados.
- Navegación one-question-at-a-time con progreso y CTAs por paso
- Keyboard navigation con Enter, arrows, hotkeys y scroll-wheel opcional
- Mobile-first, responsive, shell dinámico, header/footer y navegación por ruta visitada
- Validación por tipo, required fields, consent capture, qualification gates y file upload
- Accesibilidad endurecida: semántica, labels, alt text, shift-tab y estados interactivos
Lógica, visibilidad y simulación
El sistema incluye una capa real de journey logic, audit y simulación antes de publicar.
- Branching condicional por respuestas o contexto SFMC/prefill
- Operadores equals, not_equals, contains, not_contains, exists y not_exists
- Match modes all/any, first-match-wins y fallback por defecto
- Visibilidad condicional show/hide por bloque y targeting de subcampos estructurados
- Path simulator con respuestas de prueba, contexto, loop detection, hidden-target skips y unreachable blocks
Prefill seguro y personalización
Uno de los diferenciales fuertes: personalización sin exponer PII innecesaria en URL.
- Prefill por JWT firmado con expiración y formId
- Opaque prefill tokens para reducir datos visibles en URL
- Resolución server-side antes de renderizar el journey
- Prefill disponible para hidden fields, lógica, visibilidad y contenido personalizado
- Endpoints para generación individual, bulk tokens y sync de audiencias
Salesforce Marketing Cloud
La integración SFMC está pensada para operación real: CloudPages, Data Extensions, mapping, logs y seguridad.
- Settings globales de CloudPage: endpoint, signing secret, key id y enable/disable
- Configuración por form: delivery enable, target Data Extension, insert/upsert y upsert key
- Mapping de campos de respuesta, subcampos estructurados, metadata, raw answers y system fields
- Webhook server-to-server firmado con replay protection, timestamp skew e idempotency
- Integration delivery logs con estados delivered/failed, payload snapshots y respuesta objetivo
Respuestas parciales y recuperación
El producto captura progreso abandonado sin bloquear la experiencia del usuario.
- Toggle por form para partial capture
- Draft endpoint, tabla response_drafts y autosave debounced
- Backup localStorage y sendBeacon al salir de la página
- Cron de sync a SFMC para drafts incompletos
- Delete-on-success y retries en fallos de entrega
Audience prefill runs
OK | Flows permite preparar campañas grandes escribiendo URLs personalizadas en Data Extensions.
- Runs persistidos con estados draft, running, paused, completed y failed
- Create, launch, pause, resume, update, delete y cron-driven continuation
- Batch progression, counters, run history, active-run banner y campaign id propagation
- Row-level locking con lease para evitar doble procesamiento
- Fallback AMPscript/JWT copyable cuando los managed runs están desactivados
Gamificación y rewards
La gamificación está diseñada como sistema controlado para campañas, no como animación decorativa.
- Prize pools con weighted instant-win allocation
- Inventario finito, no-reward state, reward cards y celebration effects
- Direct reveal, wheel, slots y configuración de símbolos/segmentos
- Discount code lists, claimed-code awareness y reward image handling
- Eventos, métricas de premios, reveal rate, win rate y participación
Media, analítica y operación
La plataforma incluye media library, response dashboard, export y señales de operación.
- Media upload, deletion, browsing, R2 storage y picker en builder
- Dashboard de respuestas con search, filters, CSV export e inspección individual
- Métricas de respuestas, premios, inventario, win rate, reveal rate y top mechanic
- CloudPage, SFMC, prefill, partial sync, opaque prefill y live verification runbooks
- Tests SFMC, documentación técnica y feature logs para onboarding de equipos