Two Five One

Una plataforma de formación tan moderna como la tecnología que enseña

Two Five One quería lanzar Training Hub, una plataforma para aprender a desarrollar software con herramientas de IA, también para personas sin perfil técnico. La plataforma tenía que parecer de su tiempo, ordenar formatos muy distintos y acompañar al alumno sin que se perdiera.

Partimos de cinco retos:

• Definir un visual moderno, con estilo tech.
• Organizar cursos cortos y largos, vídeos, clases en directo y material de soporte.
• Diseñar una navegación clara dentro del curso.
• Sentar las bases de un Tutor IA.
• Entender las fases de promoción de cada curso para crear una landing certera para cada momento.

Estilo tech, con energía y sin ruido

Construimos un lenguaje visual con tono tecnológico. Un violeta eléctrico (#8200DB) marca la identidad y las acciones principales. Un verde lima (#C1FF00 y #7CCF00) se reserva para el progreso y lo conseguido. El rojo queda solo para los errores y el negro azulado (#101828) da profundidad.

Sobre ese sistema, las superficies son tarjetas translúcidas con bordes finos y esquinas redondeadas. Los fondos son degradados suaves, en lila claro para el modo claro y en violeta casi negro para el oscuro. La plataforma funciona en ambos modos desde el primer día, y el wordmark enmarcado de Two Five One cierra la identidad.

Cada formato, en su lugar

Un curso de IA mezcla muchas cosas, y todas necesitaban su sitio sin competir entre sí. Definimos una jerarquía simple: curso, módulo y clase.

• Cursos cortos y largos: una etiqueta indica el tipo (por ejemplo, Bootcamp) y un contador de progreso (25 de 95 clases, 32 % completado) muestra cuánto falta.
• Vídeos: un reproductor con lista de lecciones y reproducción automática, para encadenar clases sin salir de la pantalla.
• Clases en directo: una tarjeta destacada de «Siguiente clase» con fecha y hora, en el color principal.
• Material de soporte: un bloque de recursos descargables, como PDFs y archivos comprimidos, y botones de descarga dentro de la propia clase.
• Estados: completado, en curso, bloqueado y próximamente, con un lenguaje de color y de iconos constante en todas las listas.

Saber siempre dónde estás y qué toca después

La estructura sigue el recorrido del alumno:

• Tu espacio: tus cursos, certificados y cuenta, con tarjetas con progreso y próxima clase. Debajo, cursos recomendados con descuento.
• Cursos: el catálogo, con buscador.
• Ficha del curso: progreso, siguiente clase, temario por niveles e información del instructor.
• Clase: un menú lateral con el árbol de módulos y clases, el reproductor, el contenido, los recursos y, al final, «Anterior» y «Marcar como vista y pasar a siguiente clase».

El menú lateral mantiene siempre a la vista el punto exacto del recorrido, y la acción para avanzar es siempre la misma, en el mismo sitio. Al terminar una clase, un aviso de «¡Bien hecho!» celebra el avance y propone continuar con el curso.

Un asistente que no solo responde: acompaña

Definimos la base del Tutor IA antes de diseñar su interfaz. La idea es que sea un operador activo y no un buscador de respuestas: orienta, resuelve dudas, da acceso al contenido y motiva a seguir.

• Qué hace: explica conceptos («cuéntamelo como si fuera un principiante»), depura código explicando el porqué del error, genera diez preguntas al terminar cada módulo, resume cursos o módulos y busca por significado, no por palabra clave.
• Cómo funciona: accede a todo el contenido del alumno y se basa en las transcripciones, los PDFs y la documentación de los cursos para evitar respuestas inventadas. Sabe en qué clase está el alumno, así que «esto» significa lo que está viendo.
• Cómo se ve: un panel lateral expandible, accesible desde cualquier pantalla, que indica el curso en el que estás. Además, una sección «Tu tutor» con chat, historial, archivos, resúmenes y tests.
• Proactividad: al terminar un módulo propone el test de ese módulo. Al entrar a la clase del día siguiente ofrece un resumen escrito y descargable de la anterior. Si ve que llevas mucho tiempo parado en un ejercicio, se ofrece a ayudar.

La misma base, un mensaje por fase

Un curso no se promociona de una vez. Mapeamos las fases por las que pasa una persona y diseñamos una landing con un único objetivo para cada una, sobre el mismo sistema visual:

• Descubrimiento: un evento online gratuito, con hojas de trabajo en directo y sin necesidad de saber programar. Tras apuntarse, la página avisa de que falta un paso: confirmar la plaza.
• Primera compra: una oferta de acceso al campus por 1 €, con tres kits de agentes de IA según el perfil (producto, marketing o consultoría).
• Lanzamiento: una landing completa con temario, testimonios, preguntas frecuentes y una oferta con cuenta atrás. Incluye ventajas escalonadas por lotes de plazas y pago en cuotas.
• Antes de empezar: una página de cuenta atrás con calendario, una lista de lo que hay que tener listo, un vídeo de bienvenida y ejemplos de lo que ya han construido otros alumnos.
• Después de comprar: páginas de confirmación y de gracias, con acceso a la comunidad.

Todas existen en versión escritorio y móvil.

Qué entregamos

Entregamos el sistema visual en modo claro y oscuro, los flujos de plataforma (acceso, Tu espacio, Tu cuenta, Cursos, ficha del curso y de la clase), la definición y la interfaz del Tutor IA y la familia de landings, en escritorio y móvil.