T.
Diseño UX/UI · Desarrollo · Sistema · Documentación

ScrollLearning

Framework propio para digitalizar e generar interactivada para contenidos formativos. De Word y PDF a experiencias web con seguimiento de alumno y menor tasa de abandono.

HTMLCSSJavaScriptFigma
Source Live Demo

El proyecto

Innovación y Cualificación contaba con un catálogo extenso de formación en papel y ficheros: manuales en Word, presentaciones, PDFs. El reto era transformar ese material en experiencias digitales interactivas que los clientes pudieran integrar en sus plataformas LMS, hacer seguimiento del progreso y reducir los abandonos.

El problema

El salto de Word a digital no es trivial. Sin sistema, maquetarlo es lento, inconsistente y no escala. Y sin interacción, los contenidos digitalizados se convierten en PDFs disfrazados de web: el alumno los consume de forma pasiva y acaba abandonando.

La empresa necesitaba producir contenidos a ritmo de cliente, con coherencia visual y con la interacción suficiente para que el alumno se mantuviera activo durante toda la formación.

La solución

ScrollLearning es el framework propio que resuelve ese problema. Combina un sistema de diseño, una librería de componentes y plantillas predefinidas para los tipos de pantalla más comunes: portadas, módulos, bloques de contenido, ejercicios y evaluaciones.

El diseño está pensado para scroll vertical —el formato más natural en el navegador— con componentes de interacción que mantienen al alumno implicado sin requerir que el equipo de contenidos sepa programar.

Proceso

  1. Auditoría del material existente — Análisis del catálogo para identificar patrones: qué tipos de pantalla se repetían, qué interacciones eran imprescindibles
  2. Sistema de diseño — Tokens de color, tipografía y espaciado para garantizar coherencia entre formaciones
  3. Librería de plantillas — Portada, intro de módulo, bloque de contenido, ejercicio, cierre
  4. Desarrollo del framework — HTML/CSS/JS listo para integrar en cualquier LMS
  5. Documentación y formación al equipo — Guía de uso para que los editores armen formaciones sin tocar código

Decisiones clave

Scroll como metáfora pedagógica — El scroll vertical no es solo un patrón de navegación: en formación refuerza el avance. El alumno siente que progresa a medida que baja por el contenido.

Componentes sin código para el equipo de contenidos — El framework permite que los editores armen formaciones sin depender del equipo técnico. Decisivo para escalar la producción.

Herramientas del equipo

Para cerrar el flujo de producción, desarrollé herramientas auxiliares que permitían al equipo de contenidos trabajar de forma autónoma sin depender del equipo técnico.

Resultado

Reducción del tiempo de producción por formación y caída en la tasa de abandono gracias a la interacción activa. ScrollLearning se convirtió en la base estándar para todos los nuevos contenidos formativos de la empresa.

Demo