Gamificación, Ux y diseño Ui para la plataforma educativa Madrasa
Como parte de las iniciativas de MBRGI, nos pidieron que colaboráramos en su plataforma educativa Madrasa. El objetivo de la colaboración era gamificar la experiencia de los usuarios para animarles a practicar más y más a menudo enfrentándolos entre sí.
Ideamos el proceso de gamificación y las distintas pantallas para alcanzar nuestros objetivos, sin dejar de respetar la plataforma y las particularidades educativas y culturales del proyecto.
En la actualidad, Madrasa ofrece acceso gratuito a cursos de matemáticas y ciencias en árabe e inglés a millones de usuarios.
Ux: Página de inicio Wireframind, V1. Concepto de página de inicio de Madrasa: aprendizaje electrónico para todos.
La imagen muestra la estructura alámbrica de una versión inicial de la página de inicio de Madrasa, una plataforma educativa en línea. Los elementos clave incluyen secciones dedicadas a perfiles de usuario, noticias y presentación de ganadores o concursos. En el centro, una sección llamada “Ruta de Aprendizaje” ofrece un buscador y mapas de progreso interactivos con puntos asignados. La parte inferior contiene información sobre la visión, objetivos y características de la plataforma, así como enlaces de descarga para las aplicaciones de Android e iOS.
Ui: Finalización de la página de perfil. Página de inicio dinámica de Madrasa.
La imagen ilustra una versión finalizada de la página de inicio de la plataforma de aprendizaje electrónico Madrasa. En la parte superior, un banner invita a los usuarios a ser los mejores de su país, acompañado de un destacado de los ganadores y premios. La sección central presenta una "Ruta de aprendizaje" interactiva con categorías coloridas y puntos de progreso. Un recuadro destaca una cita inspiradora de Mohammed Bin Rashid Al Maktoum. En la parte inferior, la plataforma describe su misión, visión y objetivos, acompañada de enlaces para descargar las aplicaciones en iOS y Android, todo ello adornado con una paleta de colores morado y blanco para un diseño atractivo y profesional.
Ui: Creación de pop-ups. Elección de avatar. Personalización de avatar – Madrasa.
La imagen muestra una ventana emergente de la plataforma Madrasa dedicada a la personalización del avatar. El área principal presenta una selección de íconos de dinosaurios ilustrados con diversos accesorios y temas. Cada ícono va acompañado de una leyenda que indica la cantidad de puntos necesarios para desbloquear. Los elementos ya desbloqueados están coloreados, mientras que los elementos bloqueados son grises con una insignia de "Bloqueado". La interfaz, con un fondo violeta, es simple y atractiva, lo que anima a los usuarios a interactuar y personalizar su experiencia en la plataforma.
Ux: Wireframing de la página de perfil. Perfil de usuario interactivo en Madrasa.
La imagen ilustra un modelo de la página “Mi perfil” de la plataforma educativa Madrasa. En la parte superior se muestran el nivel y el apodo del usuario, junto con un botón para mejorar su clasificación. La sección “Lección diaria” ofrece un vídeo educativo con la posibilidad de ganar puntos tras verlo. Más abajo, se presenta una colección de insignias que indican los logros del usuario en diferentes categorías. Finalmente, las listas “Lista de observación” y “Mis últimas 5 lecciones” le permiten realizar un seguimiento de los videos vistos o por ver, con puntos asociados para cada contenido. El diseño es intuitivo y enfatiza la interactividad y la participación del alumno.
Ui: Creación del mapa emergente
Ui: Finalización de la maqueta de mi perfil
Ui; Finalización del modelo de itinerario de aprendizaje
Ui: Maqueta de la clasificación
Ux: Página de inicio Wireframind, V2
