{"id":756,"date":"2022-11-24T14:32:54","date_gmt":"2022-11-24T14:32:54","guid":{"rendered":"http:\/\/15.237.72.197\/?post_type=portfolio&p=756"},"modified":"2025-02-10T07:16:21","modified_gmt":"2025-02-10T07:16:21","slug":"madrasa","status":"publish","type":"portfolio","link":"https:\/\/whatzhat.com\/en\/portfolio\/madrasa\/","title":{"rendered":"Madrasa"},"content":{"rendered":"

Gamification Ux Case Study<\/h1>\n\n\n\n
\n
\n

Gamification Ux Case Study: Driving Engagement on Madrasa Educational Platform<\/h2>\n\n\n\n

As part of MBRGI initiatives, we contributed to the UX and UI design for the Madrasa educational platform, which aims to make learning mathematics and science more attractive. To encourage users to practice more and regularly, we relied on a gamification process that encourages friendly competition between students, while respecting the educational and cultural specificities of the project.<\/p>\n<\/div><\/div>\n\n\n\n

\n \n \n \n \n \n
Customer:<\/strong><\/td>\n Madrasa<\/td>\n <\/tr>\n
Link:<\/strong><\/td>\n Madrasa.org<\/a><\/td>\n <\/tr>\n
Date:<\/strong><\/td>\n June 2019<\/td>\n <\/tr>\n
Share:<\/strong><\/td>\n \n
\n
\n \n <\/svg> \n WhatsApp <\/span>\n <\/span>\n <\/a>\n \n <\/svg> \n Facebook <\/span>\n <\/span>\n <\/a>\n \n <\/svg> \n LinkedIn <\/span>\n <\/span>\n <\/a>\n <\/div>\n<\/div>\n<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n
\n
\n

1. Design the Gamified Experience<\/h2>\n\n\n\n

Gamification is based on the integration of game-based mechanisms (points, badges, rankings) within a learning path. We first studied the use cases and identified the key moments where motivation could decrease. <\/p>\n\n\n\n

In response, we designed visual feedback elements (progress bars, scores, trophies) to help the user measure their progress and celebrate their successes.<\/p>\n\n\n\n

The idea is to maintain a high level of engagement, notably via:<\/p>\n\n\n\n

<\/p>\n\n\n\n

    \n
  • Rank and Badge Systems:<\/strong> mark each step taken and each skill acquired.<\/li>\n\n\n\n
  • Competitions and rankings: <\/strong>encourage the spirit of emulation among learners.<\/li>\n\n\n\n
  • Tangible or symbolic rewards: <\/strong>strengthen the sense of accomplishment.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n
    \n

    2. A UX & UI Design Adapted to Educational Issues<\/h2>\n\n\n\n

    For gamification to be effective, the interface must be intuitive and pleasant. The UI design was thus designed to enhance educational content, while offering fun elements (icons, typography, bright colors). <\/p>\n\n\n\n

    We also took into account Madrasa's overall identity to ensure graphic consistency and respect local cultural sensitivities.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

      \n
    • Readability of content:<\/strong> clearly demarcated sections for easy navigation.<\/li>\n\n\n\n
    • Accessibility:<\/strong> mobile compatibility, Arabic and English support to reach millions of users.<\/li>\n\n\n\n
    • Progression structure:<\/strong> a marked path so that each learner knows which steps to follow and which objectives to achieve.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n
      \n

      3. Results: More Engaging Learning and a Vibrant Community<\/h2>\n\n\n\n

      The Madrasa educational platform now offers free mathematics and science courses in Arabic and English, aimed at a wide audience. <\/p>\n\n\n\n

      Thanks to UX gamification, students are more motivated to train, progress more quickly and create a spirit of positive competition.<\/p>\n\n\n\n

      This case study highlights the impact of a playful approach in the world of education: by integrating a well-thought-out gamification strategy, Madrasa succeeds in making learning more stimulating, inclusive and culturally relevant for millions of users.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n

      \n
      \n\t
      \n\t\t
      \n\t\t\t\"Visual\n\t\t<\/div>\n\t<\/div>\n\t\t
      \n\t\t\t\n
      \n\n\t\t\n\t\t\t