Capture Math Mind
Gamified Math Learning Project
Project Overview
The Big Question
How can we make math learning more engaging and interactive for high school and college students who struggle with traditional methods, using AI-driven personalization and gamification to enhance motivation and understanding?
Solution
𝘾𝙖𝙥𝙩𝙪𝙧𝙚 𝙈𝙖𝙩𝙝 𝙈𝙞𝙣𝙙 is a gamified mobile application designed to transform math learning for high school and college students who find traditional methods dull and ineffective. At its core, the app features 𝘿𝙧. 𝙈𝙖𝙩𝙝, a GPT-based AI chatbot trained to provide adaptive, step-by-step support for solving SAT-standard math problems, particularly word problems.
My Role & Responsibilities
Project Lead
Leadership & Project Management
Research & Problem Definition
UI & UX Design
AI Prompting & Development
User Testing & Iteration
Data Analysis
Timeline
Sep 23, 2024 - Dec 8, 2024
Team Member
Yingqi Wu (Me), Fuqing Ye, Yiwei Liu
Tools
ChatGPT Canva Figma Miro Google Doc Adobe Illustrator WebAIM
Why We Start the Project
Drawing from my three years of experience as a bilingual math teacher, I began thinking about gaps in existing math learning tools.
Key observations from my teaching experience:
1. Few engaging math learning tools for older students – While many K-12 math apps use gamification, there are limited options designed for high school and college students struggling with math.
2. Most math apps prioritize efficiency over deep learning – Many tools provide instant answers (e.g., photo-based solutions) but do not support conceptual understanding or skill-building.
3. Lack of real-time feedback – Students rarely get step-by-step guidance, making it harder for them to develop problem-solving strategies.
These gaps raised an important question:
Can we create a math learning app that helps students truly understand math concepts, improve problem-solving skills, and stay engaged through gamification—rather than just memorizing answers?
With this in mind, I proposed that maybe we could develop an AI-powered, gamified learning platform with the following features:
01
Provides Stepwise Guidance
Guides students through math problems instead of just giving answers.
02
Provides Real-time Feedback
Provides AI-driven feedback to monitor and improve problem-solving processes.
03
Gamified Learning
Uses gamification to make math learning fun, engaging, and interactive.
1. Empathize
What math learning tools are available, and how they help with math learning?
At the start of this project, we set out to explore challenges in math education, particularly for high school and college students who struggle with traditional learning methods. To gain a deeper understanding of existing solutions and user pain points, we conducted market research and problem identification.
To understand how students currently engage with math learning technology, we conducted a market analysis of some existing math learning apps and platforms. The research focused on identifying their approaches, target audiences, and key features, which are illustrated below:
Market analysis chart
Through the research, we found out that the current math learning applications and platforms can be categorized into three main types:
1. Gamified learning platforms
2. Photo-based math solvers
3. AI-powered tutoring systems
These platforms incorporate various gamified elements or math-based games to make learning more engaging, primarily targeting younger students.
Apps that provide instant answers to math problems by allowing users to scan equations for quick solutions, often without guiding them through the problem-solving process.
Some platforms offer personalized learning experiences, but most focus on delivering solutions rather than providing step-by-step problem-solving guidance to help students develop deeper mathematical understanding.
Defining the gap: the need for a new approach
Through our research, we identified several critical gaps in existing math learning platforms:
1. Limited gamified learning for older students – While gamification is widely used in K-12 education, there are few engaging platforms designed specifically for high school and college learners struggling with math.
2. Lack of word-problem-focused games – Many existing math games focus on procedural skills rather than word problem-solving, and those that do often incorporate complex mechanics that increase cognitive load, diverting focus from actual math learning.
Recognizing these challenges, we saw the need for a solution that not only engages older students through gamification but also enhances their problem-solving abilities without adding unnecessary complexity. This realization led to the creation of 𝘾𝙖𝙥𝙩𝙪𝙧𝙚 𝙈𝙖𝙩𝙝 𝙈𝙞𝙣𝙙, a platform designed to bridge this gap by integrating AI-driven guidance and gamification to help students develop a deeper understanding of math concepts while maintaining engagement and focus.
2. Define
How Can We Structure 𝘾𝙖𝙥𝙩𝙪𝙧𝙚 𝙈𝙖𝙩𝙝 𝙈𝙞𝙣𝙙 to Effectively Support Student Learning?
After identifying the key challenges in math learning, we developed a logic model to systematically outline the foundation of 𝘾𝙖𝙥𝙩𝙪𝙧𝙚 𝙈𝙖𝙩𝙝 𝙈𝙞𝙣𝙙.
Logic model of Capture Math Mind
This model helped us align the app’s design, functionality, and expected impact with the needs of our users. By breaking down the inputs, activities, outputs, and outcomes, we structured a clear roadmap to ensure the app effectively supports student learning through AI-driven guidance and gamification.
3. Ideate
Building the Information Architecture
To ensure a seamless and intuitive user experience, we first designed an information architecture based on the core features of Capture Math Mind. Our goal was to create a structure that would allow users to navigate effortlessly between problem-solving, AI feedback, and gamified challenges.
Our original version of the information architecture
After developing the initial version, we conducted in-class user testing to assess the logic and usability of our information architecture. Two participants were invited to reorganize the elements, placing them where they felt most intuitive. During this process, we facilitated a think-aloud activity, encouraging them to verbalize their reasoning while making adjustments.
Reorganized information architecture by two classmates
Based on user feedback, we refined our information architecture by adjusting feature placements, improving category organization, and enhancing the overall navigation flow to better align with user expectations.
Our final information architecture
Journey Map
To better understand how students interact with 𝘾𝙖𝙥𝙩𝙪𝙧𝙚 𝙈𝙖𝙩𝙝 𝙈𝙞𝙣𝙙, we created a User Journey Map that outlines the step-by-step experience from the moment they open the app to completing a math challenge.
The user journey map we created for our app users
Wireframe
With a clear journey mapped out, we translated these insights into wireframes, bringing the user experience to life visually.
The draft wireframe I designed for the app
4. Prototype
High Fidelity Prototype
After defining the core structure and user interactions in the Ideate phase, we moved into the Prototyping stage, where we translated our designs into a functional high-fidelity prototype. This phase focused on visualizing key app features, refining AI interactions, and preparing for usability testing.
We conducted a color accessibility check using WebAIM to ensure optimal readability and inclusivity for all users after selecting theme colors.
Color accessbility check
Page Design
Welcome and tutorial pages
We designed a welcome page and a few tutorial pages to guide our uses on how to use our application.
Sign-in page and personalization pages
Users can personalize their experience by selecting their preferred chatbot appearance and interaction style. They have the flexibility to choose how the chatbot looks and the tone in which it interacts with them, ensuring a customized learning experience.
Chatbot interface pages
Users can interact with the chatbot, Dr. Math, through the 'Messages' interface. The current screen simulates the appearance after selecting the 'Pixel Style' for the chatbot
"About me" pages
In the "About Me" interface, users can track learned math topics, earned badges, problem sets by topic and level, and chat history with Dr. Math. A settings sidebar also allows them to customize app preferences.
Figma Prototype
AI Prompt Design and Iteration
To ensure Dr. Math provided accurate, step-by-step problem-solving guidance, we refined our AI prompts through three iterations. Each update aimed to enhance clarity, adaptability, and engagement in the chatbot’s responses.
First version
Role + Target subject and learners + Tone + Specific teaching procedure + Learning theory + Automatic image generation(Fail)
Second version
Version 1 + Specific concept category + Preset the options it needs to give to users + Specify its response format to different answers + Specific requirement on generating the game background + Point system + How to react to Students’ mistakes + Automatic image generation(Fail)
Thrid version (We reorganized all the information in the prompt)
Version 2 + Specify two types of users and how to react to these two types of users + Visual enhancement requirement + Automatic image generation(Fail)
Our prompt iteration process
Samples of our AI prompt design with color-coding
5. Test
Evaluation Metrics
To systematically evaluate our app, we created an evaluation metrics framework that focuses on six key aspects: effectiveness, efficiency, user satisfaction, learning outcomes, AI interactions, and UI/UX design.
This framework guided our assessment, ensuring a comprehensive analysis of how well the app supports user engagement, learning, and overall usability. We also used it to guide us in developing our interview questions.
Sample of our evaluation metrics and interview questions
User Testing
After finalizing our evaluation metrics, each of us conducted user testing to gather insights. Our partcipants included the following target users:
Graduate student
Male, 22
SAT Math level: Beginner
Colledge student
Female, 20
SAT Math level: Beginner
High school student
Male, 16
SAT Math level: Intermediate
High school student
Female, 15
SAT Math level: Intermediate
Participants were invited to test both our Figma prototype and chatbot interactions during user testing.
Participants engaging in the usability test for our app
Results Analysis
We created a radar chart displaying the average scores given by participants in the above key evaluation areas.
The radar chart that shows the average scores given by participants
We were able to gather encouraging feedback, including:
" It’s(Dr. Math) more direct about math and can keep one focus on math, for ChatGPT, you will get disturbed sometimes. "
" I think it's really good overall. And it's a new way of learning, and it will definitely increase the effectiveness of study. "
" The problem-solving process adopts a step-by-step approach, using a "leading by example" method rather than directly providing the answer. This encourages my critical thinking and deeper understanding. "
" The incorperation of Generative AI tool is creative, beacause it allows more diverse learning processing. And the learning Math via playing game is also funning, it could arise students' interests. And Having point rewards is a very motivative process, if you answer correctly you will get rewards, which will help students to be more motivated and enthusiastic about learning."
We've also received thoughtful suggestions from the participants helping us to reflect how should we improve the current application. We summarized the suggestion into three aspects:
Learning outcomes:
-
Add advanced options for high-level users.
-
Improve visual representations for better understanding.
Technical issues:
-
Fix slow loading and missing animations.
-
Optimize AI logic for complex questions.
-
Add personalized question recommendations.
-
Set up image library: including adding pie chart, line graph, theme-related story background images, and any other images related to math concepts to effectively support students’ learning.
Interface design and application features:
-
Enhance visual aesthetics with animations.
-
Provide customizable interface modes.
-
Simplify the image generation process.
Conclusion
Developing Capture Math Mind has been a transformative experience, allowing us to explore how AI-driven learning and gamification can enhance math education. Through iterative design, user testing, and continuous refinement, we developed a prototype that not only supports problem-solving skills but also fosters engagement and personalized learning experiences.
Throughout this process, we gained valuable insights into the importance of user-centered design, adaptive AI interactions, and accessibility considerations in educational technology. Our evaluation metrics and user testing results provided critical feedback, guiding us to refine key aspects of the app and improve its usability.
A special thanks to Dr. Ha for her guidance, feedback, and support throughout this journey. Her insights challenged us to think critically, refine our design choices, and create a more meaningful learning tool.
This project has strengthened my understanding of instructional design, AI integration, and UX research, reinforcing my passion for designing technology-driven educational solutions. Moving forward, I look forward to applying these experiences to future projects that bridge the gap between learning, innovation, and technology.
See Other Projects
CLILink
Multiple Subscription Management
