Mathopedia: Revolutionizing Math Learning for Students

An interactive math learning platform designed to make math fun and accessible for young learners.

Problem: Existing platforms felt too complex or uninspiring for kids.


Solution: A playful, intuitive interface that turns math into a game-like experience.


My Role: UX/UI Designer – I led the user research, created wireframes and prototypes, and designed the final UI in Figma with a focus on simplicity, engagement, and usability.

Three smartphones displaying an educational app called 'Mathopedia' with features for learning math, watching videos, and chatting with an online tutor.

Overview

Mathopedia is a mobile application designed to make math learning engaging and effective for students aged 8–14. The app focuses on simplifying mathematical concepts through gamification, interactive modules, and tailored lesson plans. The ultimate goal was to empower young learners to build confidence in math while fostering a love for problem-solving.

The Problem

Challenge: Despite the abundance of educational apps, many fail to engage younger audiences due to a lack of interactivity and relatability. Students often perceive math as boring or intimidating.

Key Pain Points Identified:

  1. Lack of Personalization: Generic lesson plans that don’t adapt to the student’s skill level or pace.

  2. Limited Engagement: Absence of interactive elements or gamified incentives that could motivate students.

  3. Overwhelming Interface: Overcomplicated designs in existing apps that hinder the user experience for young learners.

Objectives

  1. Create an intuitive and engaging interface tailored for children aged 8–14.

  2. Introduce gamification techniques to keep learners motivated and invested in their progress.

  3. Build a personalized learning system that adapts to each student’s pace and skill level.

  4. Design a clutter-free and visually appealing interface that aligns with the cognitive abilities of younger users.

Research & Insights

User Research:

  • Conducted interviews with 10 students, 8 parents, and 5 teachers to understand the challenges of math learning at home and in classrooms.

  • Identified user needs through surveys and competitor analysis of apps like Khan Academy and Prodigy Math.

Key Findings:

  1. Children learn best when lessons are interactive and fun.

  2. Rewards and feedback (e.g., badges, trophies) significantly boost motivation.

  3. Simple and colorful UI helps retain attention and reduces cognitive overload.

Design Process

1. Empathy Mapping & Persona Development

We developed two key personas to guide the design process:

Profile of a man named Ibrahim, who is a 32-year-old primary school teacher. The profile includes background information praising his friendly attitude and desire to teach responsibility and honesty to children. It also mentions his frustrations with children cheating on exams and not taking it seriously, and contains a quote about teaching. The image shows Ibrahim with dark hair and beard, wearing a brown shirt, with a blurred window and a rainbow reflection in the background.
A digital profile of a young woman named Susan, including her photo. The profile shows her age as 30, gender as woman, and her occupation as a teacher. It mentions her education level as high school. The background notes she is environmentally friendly and dislikes tests on papers. Her goals include helping students understand the importance of the environment, and her frustrations involve teaching students online. A quote from Susan says, 'I Wish I Can Help Children With Knowledge I Have.'

2. Ideation

  • Brainstormed features like daily challenges, quizzes, leaderboards, and progress tracking dashboards.

  • Prioritized features based on user feedback and feasibility.

3. Wireframing & Prototyping

  • Created low-fidelity wireframes to map out the app’s structure and user flow.

  • Designed high-fidelity prototypes in Figma, incorporating bright colors, simple navigation, and playful illustrations.

Screenshots of an educational app interface with various screens, including a home page, chat with a teacher, course details, video lesson, quiz questions, and progress sharing, designed for student learning.

4. Usability Testing

  • Tested prototypes with 15 students to assess ease of use, engagement, and satisfaction.

  • Iterations were made based on feedback, such as increasing font sizes and adding audio cues for younger users.

Landing page for Mathopedia, an online math learning platform, featuring a light blue and purple geometric background, icons of a lightbulb and geometric shapes, a potted plant, and stacked books.
Mobile sign-up form on screen with fields for first name, last name, email, and password, with a 'Next' button and option to sign in.
Mobile app screen with a personalized greeting for Amelia. Sections for chapters with video buttons, ongoing assignments for math subjects with teacher Susan, and a scheduling button asking if help is needed. Navigation bar at the bottom with icons for Home, Chat, and Profile.

Key Features

  1. Personalized Learning Paths

    • AI-driven customization that adjusts lessons based on the student’s performance.

    • A progress dashboard for students to monitor their journey.

  2. Gamification Elements

    • Daily quizzes, badges, and streaks to encourage consistency.

    • Leaderboards to create a friendly competition among peers.

  3. Interactive Modules

    • Drag-and-drop activities, visual problem-solving, and real-time feedback.

  4. Parent & Teacher Dashboards

    • Progress tracking tools to help parents and teachers identify areas where students need extra help.

Final Design

  • Color Palette: Bright and inviting colors (e.g., blue, green, yellow) to evoke positivity and focus.

  • Typography: Large, rounded fonts for better readability.

  • Illustrations: Custom characters and playful icons to create a friendly atmosphere.

  • Navigation: Simplified navigation with easy access to lessons, quizzes, and rewards.

Conclusion

Mathopedia demonstrates how UX/UI design can transform learning experiences for younger audiences. By combining personalization, gamification, and a user-first approach, this app creates an environment where students can learn math in an engaging and effective way.