Guía técnica para diseñar e implementar flujos de onboarding dentro del producto que guíen al usuario hacia la activación. Cubre la arquitectura de los tooltips progresivos, checklists de inicio y gates de funcionalidades para optimizar el time-to-value.
Cuándo usarlo: Diseño e implementación técnica de flujos de onboarding in-app en React
Herramienta recomendada: Claude
Actúa como un ingeniero de software senior especializado en product-led growth y experiencias de onboarding in-app. Necesito tu ayuda para diseñar e implementar un sistema de onboarding dentro del producto que guíe a los nuevos usuarios hacia su primera acción de valor sin necesidad de intervención humana. **Contexto técnico:** Tenemos una aplicación web SPA construida con React en el frontend y una API REST en Node.js en el backend. Usamos PostgreSQL como base de datos principal. Actualmente no tenemos ningún sistema de onboarding in-app: los usuarios llegan al dashboard vacío y no saben qué hacer. La tasa de activación (definida como crear el primer elemento en la plataforma) es del 18% en los primeros 7 días. **Parte 1 – Arquitectura del sistema de onboarding:** Define la arquitectura técnica del sistema de onboarding in-app. Evalúa las dos opciones principales: construirlo desde cero con componentes propios (más flexible, mayor esfuerzo de mantenimiento) o integrar una herramienta de onboarding de terceros como Intercom Product Tours, Appcues, Pendo o Userflow (menor esfuerzo de desarrollo, costo mensual adicional). Para cada opción, detalla: tiempo de implementación estimado, complejidad técnica, capacidades de personalización, analítica incluida y costo. Emite una recomendación según el tamaño del equipo de ingeniería y la urgencia. **Parte 2 – Modelo de datos para el estado de onboarding:** Si optamos por construirlo internamente, define el modelo de datos necesario. Diseña el esquema de base de datos para almacenar: el progreso de onboarding de cada usuario (pasos completados, pasos pendientes, fecha de inicio, fecha de completado de cada paso), los segmentos de onboarding (según el perfil del usuario en el registro), y los eventos de onboarding (qué acción realizó el usuario, cuándo, desde qué pantalla). Incluye las migraciones de PostgreSQL necesarias y los índices recomendados. **Parte 3 – Componentes de onboarding a implementar:** Define los componentes de interfaz necesarios para el onboarding in-app. Para cada componente proporciona la especificación técnica de implementación en React: checklist de inicio (lista de tareas de configuración visible en el dashboard con progreso visual, que desaparece al completar todas las tareas), tooltips progresivos (globos de ayuda contextuales que aparecen la primera vez que el usuario visita una sección, con botón para ir al siguiente paso), modales de bienvenida (diálogo de primer login con selección de caso de uso que personaliza el onboarding), empty states accionables (cuando una sección está vacía, mostrar un CTA claro con texto motivacional) y barra de progreso de configuración (indicador de % de completado de la configuración inicial en el header). **Parte 4 – Lógica de progresión y triggers:** Define la lógica de progresión del onboarding. Implementa el sistema de tracking de eventos: qué eventos del usuario disparan el avance en el onboarding (crear un elemento, invitar a un colaborador, completar el perfil), cómo se propagan estos eventos desde el frontend hasta el backend, cómo el backend actualiza el estado de onboarding y notifica al frontend del avance, y cuándo y cómo se ocultan definitivamente los elementos de onboarding una vez completado. Diseña también el mecanismo de re-activación del onboarding cuando el usuario accede a una funcionalidad nueva o cuando el admin activa funcionalidades adicionales. **Parte 5 – Analítica y optimización del onboarding:** El onboarding in-app debe ser medible y optimizable. Define la implementación de la analítica: qué eventos trackear (paso visto, paso completado, paso saltado, onboarding completado, onboarding abandonado en paso X), cómo implementar el tracking sin acoplar la lógica de negocio (event bus interno o llamadas explícitas al servicio de analítica), y cómo visualizar los datos en un funnel de onboarding que muestre el drop-off en cada paso. Incluye las consultas SQL para calcular las métricas de conversión por paso y por segmento de usuario. **Formato de entrega:** - Diagrama de arquitectura del sistema de onboarding (componentes, flujo de datos, API endpoints) - Esquema de base de datos con migraciones de PostgreSQL - Especificación de componentes React (props, estado, comportamiento) - Diagrama de flujo de la lógica de progresión y triggers - Queries SQL para el funnel de analítica de onboarding