Estudio de caso de gamificación y experiencia del usuario
Estudio de caso de gamificación de la experiencia del usuario: cómo impulsar la participación en la plataforma educativa Madrasa
Como parte de las iniciativas de MBRGI, contribuimos al diseño de UX y UI para la plataforma educativa Madrasa, que tiene como objetivo hacer más atractivo el aprendizaje de matemáticas y ciencias. Para animar a los usuarios a practicar más y con regularidad, nos hemos basado en un proceso de gamificación que fomenta la competición amistosa entre estudiantes, respetando al mismo tiempo las especificidades educativas y culturales del proyecto.
1. Diseñar la experiencia gamificada
La gamificación se basa en la integración de mecanismos de juego (puntos, insignias, clasificaciones) dentro de un recorrido de aprendizaje. Primero estudiamos los casos de uso e identificamos los momentos clave en los que la motivación podría disminuir.
En respuesta, diseñamos elementos de retroalimentación visual (barras de progreso, puntuaciones, trofeos) para ayudar al usuario a medir su progreso y celebrar sus éxitos.
La idea es mantener un alto nivel de compromiso, en particular a través de:
- Sistemas de rangos e insignias: Marca cada paso dado y cada habilidad adquirida.
- Competiciones y clasificaciones: Fomentar el espíritu de emulación entre los estudiantes.
- Recompensas tangibles o simbólicas: Fortalecer el sentido de logro.
2. Un diseño UX & UI adaptado a cuestiones educativas
Para que la gamificación sea efectiva, la interfaz debe ser intuitiva y agradable. El diseño de la interfaz de usuario fue pensado para mejorar el contenido educativo, ofreciendo al mismo tiempo elementos divertidos (iconos, tipografía, colores brillantes).
También tomamos en cuenta la identidad general de Madrasa para garantizar la coherencia gráfica y respetar las sensibilidades culturales locales.
- Legibilidad del contenido: Secciones claramente delimitadas para una fácil navegación.
- Accesibilidad: Compatibilidad móvil, soporte en árabe e inglés para llegar a millones de usuarios.
- Estructura de progresión: un camino marcado para que cada alumno sepa qué pasos seguir y qué objetivos alcanzar.
3. Resultados: Un aprendizaje más atractivo y una comunidad dinámica
La plataforma educativa Madrasa ahora ofrece cursos gratuitos de matemáticas y ciencias en árabe e inglés, dirigidos a un público amplio.
Gracias a la gamificación UX, los estudiantes están más motivados para formarse, progresan más rápido y se crea un espíritu de competencia positiva.
Este estudio de caso destaca el impacto de un enfoque lúdico en el mundo de la educación: al integrar una estrategia de gamificación bien pensada, Madrasa logra hacer que el aprendizaje sea más estimulante, inclusivo y culturalmente relevante para 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 de la ventana emergente Mapa. Los 10 principales usuarios de madrasas en Egipto.
La imagen muestra una maqueta de los 10 primeros puestos de clasificación de usuarios en la plataforma educativa Madrasa de Egipto. Cada ranking, del 1.º al 10.º puesto, va acompañado de un apodo de usuario, un avatar y una indicación del número de vídeos completados (aquí, 50 vídeos para cada usuario). La tabla de clasificación está dividida en dos columnas, con un diseño claro y colores morados distintivos. En la parte superior se muestra el nombre del país con su bandera nacional, reforzando el carácter competitivo y comunitario de la plataforma.
Ui: Finalizando mi modelo de perfil. Página de perfil de usuario en Madrasa.
La imagen muestra la página de perfil de un usuario en la plataforma educativa Madrasa. En la parte superior, el rango y los puntos se muestran con una imagen icónica del trofeo dorado. La siguiente sección presenta una lección diaria, completa con un video educativo y puntos para ganar por verlo. Más abajo, la sección “Insignias” muestra diferentes distinciones obtenidas o por desbloquear, con iconos de colores. Finalmente, el usuario puede consultar su “Lista de observación” y sus “últimas 5 lecciones”, organizadas por categoría y puntos obtenidos. La página está diseñada con un diseño limpio y toques morados, propios de la carta gráfica de la madraza.
interfaz de usuario; Finalización del modelo de ruta de aprendizaje. Visita educativa a la Madraza.
Esta imagen representa la sección “Camino de Aprendizaje” de la Madrasa. En la parte superior de la página, un mensaje felicita al usuario por su clasificación y puntos actuales. La sección central enumera diferentes caminos educativos (“Path List”) con información sobre los puntos a ganar, el número de vídeos y el tiempo estimado para completarlos. A continuación, un reproductor de vídeo muestra una lección de ejemplo, con contenido de ciencias educativas. A la derecha, una "Lista de vigilancia de rutas" permite al usuario seguir su aprendizaje. El diseño es claro e intuitivo, acentuado por tonos violetas correspondientes a la identidad visual de la plataforma.
Interfaz de usuario: modelo de clasificación. Rankings y actuaciones en Madrasa.
Esta imagen muestra la sección Tabla de clasificación de Madrasa, donde los usuarios pueden ver tablas de clasificación basadas en los puntos acumulados. La parte superior muestra un mensaje de felicitación con el rango y los puntos del usuario actual. La tabla de clasificación principal muestra los 100 mejores usuarios con sus clasificaciones, puntos y avatares. Más abajo, las clasificaciones específicas se dividen por categorías (A, B, C) con pestañas de colores para cada segmento. La sección inferior ilustra el "Top 10 por país" utilizando un mapa interactivo de países árabes, donde los marcadores morados indican ubicaciones activas. La paleta de colores violeta y azul refleja la identidad visual de Madrasa y brinda una experiencia de usuario clara y atractiva.
Ux: Página de inicio Wireframind, V2. Maqueta de la página de inicio de Madrasa (Versión 2).
Esta imagen muestra una estructura alámbrica de una página de inicio propuesta de Madrasa, que muestra un diseño claro y organizado. La parte superior incluye un llamado a la acción para una competencia y los ganadores, seguida de una sección para elegir un área de aprendizaje. Otra sección ofrece itinerarios educativos en forma de mapas e indicadores de progreso. Los usuarios también pueden seguir su progreso mediante un botón de inicio de sesión o de creación de cuenta. Hacia la parte inferior, una sección "Acerca de" describe la misión, la visión y los objetivos de Madrasa, mientras que los botones le permiten descargar aplicaciones móviles. El diseño incorpora formas redondeadas y transiciones fluidas, reforzando una navegación agradable e intuitiva.
