Edtech

Fluency Academy: Epic English

Página de las clases del evento gratuito de inglés, con UI/UX y desarrollo en WordPress

Mi rol: Diseñador UX/UI · Desarrollador Web PHP/WordPress

Contexto

Epic English es un evento gratuito de inglés de Fluency Academy con el profesor Spencer, en cuatro clases. Hice el UI/UX de la página donde se ven las clases y el desarrollo en WordPress, con tema en PHP.

Cliente

Fluency Academy

Categoría

Edtech

Roles

Diseñador UX/UI, Desarrollador PHP/WordPress

Tecnología

WordPress, PHP

Desafío

En los eventos online gratuitos, mucha gente ve la primera clase y no vuelve. La página tenía que mantener al alumno comprometido de una clase a otra: mostrar en qué parte del recorrido está, dar tareas cortas de práctica y crear motivos para volver.

La página de la clase, sección por sección

Del video de la clase a los comentarios, cada sección le da un siguiente paso al alumno.

01 / 05
La clase
El video de la clase destacado, con el recorrido de las 4 clases al lado (en vivo, liberada, fecha de la próxima) y una barra de progreso arriba con las etapas completadas. El contador "2.698 personas mirando" y el acceso a otra versión del video quedan justo debajo.
02 / 05
Los pasos de la clase
"Hora de configurar tu Memhack y poner a prueba tu memorización": tres pasos en tarjetas con estado "pendiente" (agregar el mazo a la app de memorización, escuchar el podcast y descargar el material, responder la pregunta de la clase), cada uno con su color y un único botón.
03 / 05
La recompensa
Completar los tres pasos libera el e-book "Spencer's Dictionary". La recompensa al final convierte la práctica en un objetivo claro.
04 / 05
La clase extra
La invitación a la clase extra en vivo en YouTube, con fecha, horario y el botón "Configurar recordatorio", para traer a la persona de vuelta al día siguiente.
05 / 05
Los comentarios
"¿Te gustó la clase? Hora de responder la pregunta que hago al final": la caja de comentarios cierra la página con la participación del grupo, bajo la cara del profesor Spencer.

Sistema Visual

Grafito y beige con el morado de la marca Epic English, y un color por paso (rosa, naranja y morado) para que el alumno sepa en qué etapa está. El borde rasgado entre el video y los pasos marca el paso de mirar a practicar.

Paleta

Grafito

#292630

Área del video y del recorrido de clases

Morado Epic

#7C6294

Marca del evento, recorrido y paso 3

Rosa

#D44E86

Paso 1: agregar el mazo

Naranja

#D4671D

Paso 2, e-book y destacados

Vino

#770E31

Clase extra en vivo

Beige

#E7DCD6

Fondo de los pasos y de los comentarios

Aprendizaje

En un evento online, la página de la clase es donde se gana o se pierde al alumno. Mostrar el progreso, dar tareas cortas con estado y prometer una recompensa al final convierte a quien solo mira en alguien que participa y vuelve.

Más proyectos