Gamification Ux
Ux & Ui design for the Madrasa educational platform
As part of the MBRGI initiatives, we were asked to collaborate on their Madrasa educational platform. The aim of the collaboration was to gamify the user experience to encourage them to practise more and more often by pitting them against each other.
We devised the gamification process and the different screens to achieve our objectives, while following the platform and the educational and cultural particularities of the project.
Today, Madrasa offers access to Mathematics and Science courses in Arabic and English to millions of users free of charge.
Ux: Wireframe of the Home Page, V1. Concept of the home page of Madrasa: E-learning for all.
The image shows the wireframe of an initial version of the homepage of Madrasa, an online educational platform. Key elements include sections dedicated to user profiles, news, and presentations of winners or competitions. In the center, a section titled “Learning Path” offers a search engine and interactive progress maps with points awarded. The bottom part contains information about the platform’s vision, goals, and features, as well as download links for Android and iOS apps.
Ui: Finalizing the profile page. Dynamic Madrasa homepage.
The image shows a finalized version of the Madrasa e-learning platform’s homepage. At the top, a banner invites users to be the best in their country, with a spotlight on winners and awards. The middle section features an interactive “Learning Path” with colorful categories and progress points. A sidebar highlights an inspiring quote from Mohammed Bin Rashid Al Maktoum. At the bottom, the platform outlines its mission, vision, and goals, with links to download the apps on iOS and Android, all complemented by a purple and white color scheme for an attractive and professional design.
Ui: Pop-up creation. Avatar selection. Avatar customization – Madrasa.
The image shows a pop-up window of the Madrasa platform dedicated to avatar customization. The main area presents a selection of illustrated icons of dinosaurs with various accessories and themes. Each icon is accompanied by a legend indicating the number of points needed to unlock it. Already unlocked items are in color, while locked items are in gray with a “Locked” badge. The interface, with a purple background, is simple and engaging, encouraging users to interact and customize their experience on the platform.
Ux: Wireframing of the profile page. Interactive user profile on Madrasa.
The image illustrates a mockup of the “My Profile” page on the Madrasa educational platform. At the top, the user’s level and nickname are displayed, along with a button to improve their rank. The “Daily Lesson” section offers an educational video with the possibility of earning points after viewing. Further down, a collection of badges is presented, indicating the user’s achievements in different categories. Finally, “Watch List” and “My Last 5 Lessons” lists allow you to track the videos viewed or to be viewed, with associated points for each content. The design is intuitive and emphasizes interactivity and learner engagement.
Ui: Creation of the pop up Map. Top 10 Madrasa users in Egypt.
The image shows a mockup of the top 10 users ranking on the educational platform Madrasa for Egypt. Each rank, from 1st to 10th position, is accompanied by a user nickname, an avatar and the indication of the number of videos completed (here, 50 videos for each user). The ranking is divided into two columns, with a clear design and distinctive purple colors. At the top, the name of the country is displayed with its national flag, reinforcing the competitive and community nature of the platform.
Ui: Finalizing my profile mockup. User profile page on Madrasa.
The image shows a user's profile page on the Madrasa educational platform. At the top, the rank and points are displayed with an iconic golden trophy visual. The next section offers a daily lesson, accompanied by an educational video and points to earn for watching it. Further down, the "Badges" section shows different distinctions earned or unlocked, with colorful icons. Finally, the user can view their "Watch list" and "Last 5 lessons", organized by category and points earned. The page is designed with a clean design and touches of purple, typical of Madrasa's graphic charter.
Ui; Finalization of the model of the learning paths. Educational path on Madrasa.
This image represents the “Learning Path” section of Madrasa. At the top of the page, a message congratulates the user on their current rank and points. The middle section lists different educational paths (“Path List”) with information on the points to be earned, the number of videos and the estimated time to complete them. Below, a video player displays a sample course, with educational content in science. On the right, a “Path Watch List” allows the user to track their learning. The layout is clean and intuitive, accentuated by purple tones matching the visual identity of the platform.
Ui: Leaderboard mockup. Rankings and performances on Madrasa.
This image shows Madrasa’s “Leaderboard” section, where users can view rankings based on accumulated points. The top section displays a congratulatory message with the current user’s rank and points. The main leaderboard shows the top 100 users with their ranks, points, and avatars. Further down, specific leaderboards are divided by categories (A, B, C) with colored tabs for each segment. The bottom section illustrates the “Top 10 by Country” using an interactive map of Arab countries, where purple markers indicate active locations. The purple and blue color palette reflects Madrasa’s visual identity, providing a clear and engaging user experience.
Ux: Wireframe of the Home Page, V2. Mockup of the Madrasa home page (Version 2).
This image shows a wireframe of a proposed homepage for Madrasa, showcasing a clean and organized layout. The top section includes a call to action for a competition and winners, followed by a section to choose a learning area. Another section offers educational paths in the form of cards and progress indicators. Users can also track their progress with a login or create account button. Towards the bottom, an “About” section describes Madrasa’s mission, vision, and goals, while buttons allow users to download mobile apps. The layout incorporates rounded shapes and smooth transitions, reinforcing pleasant and intuitive navigation.
