Math Village
This document systematically presents the overall background, goals, user research, learning science foundations, product features, and technical architecture of the Math Village project, providing readers with a clear and professional overview of the initiative.
Role
Skills & Tools
Work Responsibilities
- Independently researched and developed Math Village, a full-stack, AI-powered, evidence-based math learning platform featuring a student-facing web application and a teacher analytics dashboard. Integrated OpenAI API with math-specialized prompts to provide real-time AI tutoring and generate comprehensive learning analytics.
- Conducted in-depth user and competitive research, including interviews with target students and teachers to define learner personas and learning roadmaps. Designed and implemented the product from Figma prototypes to a full-stack application.
- Built a complete end-to-end system using React.js + TypeScript and Tailwind CSS for responsive frontend interfaces; Node.js/Express.js with RESTful APIs for the backend; SQLite for data persistence; and JWT for secure authentication. Set up a CI/CD pipeline with GitHub → Vercel (frontend) and Render (backend) for seamless auto-deployment.
Project Overview
Math Village is a learning-science-based, AI-powered math learning platform for students aged 10–15, designed to make daily math practice both effective and engaging. It offers lightweight, guided 15–20-minute sessions that combine AI tutoring, community interaction, and story-driven content to strengthen motivation and persistence. Developed through two rounds of user testing with 30 educational technology graduate students and two parents, the platform integrates seven functional modules grounded in educational technology principles, most of which have been technically implemented using modern web frameworks.
Problem Analysis & User Research
User Research
During my three years of teaching math and years of research on K–12 learning platforms with both teachers and students, I've heard many real voices from learners.
Struggling Learners
- "Math is too hard. I don't want to learn anymore."
- "I just learned it yesterday, but I've already forgotten."
- "There are too many exercises on those platforms—it gives me a headache."
- "When I get stuck, I don't know what to do, and there's no one to help."
- "If only a teacher could be with me every day, guiding and encouraging me."
- "Your encouragement makes me feel motivated again."
High Achievers
- "I don't know which angle to approach this hard problem from."
- "I want to master all problems of this type."
- "I want to host a math party where everyone plays with math."
- "I hope a teacher can guide me every day and expand my thinking."
- "I need to practice math daily to stay sharp and flexible."
These real voices deeply influenced my design thinking. They reminded me that a good math learning platform is not just a place to solve exercises — it should be a companion that supports, encourages, and grows with the learner.
Based on these insights, I summarized four core problems and designed corresponding solutions.
Learner Personas
Age Group: 10–15 (Middle School)
Struggling Learners
Often feel overwhelmed and easily give up when facing complex or endless math tasks.
Needs
Lightweight, guided daily learning with clear direction, supported by progressive unlocking, gamified storytelling, and community engagement to rebuild confidence, enjoyment, and consistency.
High Achievers
Enjoy challenge and aim to deepen problem-solving skills and broaden thinking.
Needs
Advanced challenge paths, targeted daily practice, and collaborative spaces to exchange ideas and celebrate progress.
All Learners
Desire learning that feels meaningful, engaging, and supported, rather than mechanical or isolating.
Needs
Learning that is effective and enjoyable, with timely guidance, and a sense of being seen, encouraged, and connected throughout the journey.
Problem–Solution Mapping
Low Motivation
Math is often perceived as boring and difficult
Daily Practice & Daily Review 5–20 min light learning sessions
Math Stories Make concepts vivid and engaging
Community Plaza Provides interaction and encouragement
AI Assistant Offers instant help and support
Content Overload
Students feel they can't complete learning
Progressive Unlocking reduces "infinite task" feeling
Daily Review pushes personalized mistake reviews
Home Dashboard reminds students of today's tasks
Clear Navigation allows easy module access
Weak Persistence
Lack of habit-forming mechanisms
Light Learning makes practice easy to sustain
Streak & Leaderboard motivate consistent engagement
Stories & Community encourage regular return
Study Tips personalized guidance from dashboard
Isolated Learning
Low sense of belonging
Community Plaza sharing, discussion, recognition
AI Assistant interactive, supportive companionship
My Collection note-taking and reflection features
Math Party online math-themed activities
Learning Science Foundation
Each learning science principle is thoughtfully integrated into Math Village's user experience, ensuring that the platform not only engages students but also maximizes learning effectiveness through evidence-based educational strategies.
Guided Discovery
A learning approach that uses structured tasks, cues, and feedback to guide exploration and pattern-finding, allowing understanding to emerge naturally without giving direct answers.
Daily Practice: Map-based, step-by-step prompts guide learners to discover rules and patterns.
Math Stories: Concepts are embedded in narratives and revealed through context and guided inference.
Spaced Retrieval
Strengthens long-term memory by revisiting key concepts at spaced intervals.
Daily Review: Automatically generates personalized review plans based on errors, using spaced repetition to reinforce retention.
Self-Explanation
Deepens understanding by prompting learners to explain their reasoning and make meaningful connections.
My Collection: A space for learners to take notes, restate concepts, and reflect.
AI Assistant: Encourages learners to verbalize their thinking during Q&A, promoting self-explanation.
Cognitive Load Management
Reduces unnecessary mental effort through thoughtful design, pacing, and content organization.
Daily Practice: Short, focused exercises (10–15 min) broken into steps to avoid overload.
Interactive UI: Clean layouts and clear navigation minimize cognitive distractions.
Belonging & Social Learning
Fosters a sense of acceptance, support, and value. Emphasizes learning through observation, collaboration, and interaction.
My Collection: A personal space to jot down thoughts and build a sense of safety and belonging.
Community Plaza: Learners can make friends, interact, and learn by observing others' posts.
Leaderboard: Social competition and interaction boost engagement and motivation.
Multimodal Learning
Integrates multiple modalities—visual, auditory, textual, and verbal—to enhance comprehension and memory through different sensory channels.
Math Story: Combines animation and narrative for rich multimodal presentation.
Daily Practice: Webflow-based learning integrates text, audio, video, and illustrations.
Immediate Explanatory Feedback
Timely feedback that explains why a response is right or wrong, reinforcing accurate understanding and correcting misconceptions.
Daily Practice: Immediate feedback after each question—highlighting key reasoning when correct, and giving hints or examples when incorrect.
Chunking & Scaffolding
Breaks learning into manageable steps and provides structured support that gradually fades.
Curriculum Map: Organizes content by topic, subtopic, and concept to guide learning progressively.
Daily Practice: Tasks are broken down into clear, bite-sized steps.
Mastery Learning
Learners must master each concept before moving on to the next.
Progress Bar & Achievements: Tracks mastery and unlocks new content once proficiency is reached.
Daily Streak: Encourages consistent practice and review to build lasting mastery.
Targeted Intervention
Identifies specific gaps in understanding and provides personalized support to address them.
Teacher Dashboard: Displays each student's mastery by concept, highlighting weak areas to support targeted teaching.
Acknowledgment & Limitations
The platform has not yet reached full functionality. The current version has implemented core modules but still requires further development in several key areas.
Implemented
Core modules: Daily Practice, Daily Review, Math Stories, AI Assistant, My Collection, Community Plaza. Basic navigation and Home Dashboard structure.
Limitations / Incomplete
- 1.Daily Practice Module needs clearer unlock path planning, completion-based unlocking, Challenge Mode for advanced learners, and multimodal feedback mechanisms.
- 2.Other Modules require feature refinement and smoother interaction flow.
- 3.Overall UI Design Upgrade to improve visual coherence, navigation flow, and add more playful interactivity.
Figma Design and User Testing
To quickly validate this multifunctional learning experience, I built a complete layout and visual design of the platform in Figma. My goal was to explore how learning and playfulness could be integrated into one engaging experience. I analyzed platforms frequently used by my target users, such as music apps and creator video platforms, to study how they design for high engagement. I also drew insights from math learning platforms I've personally used to make users feel guided and curious.
First Round Testing
After one week, I conducted a quick Figma prototype testing session with graduate students in the educational technology field. They gave rich and encouraging feedback:
Positive Feedback
- •The visual and information structure feels age-appropriate.
- •The Voiceflow-based Daily Practice (demo) is fun and effective!
- •The Math Stories and Community features are strong reasons for learners to return — they really appreciate how interaction is integrated into learning.
Suggestions
- 1.Add a daily streak to motivate consistent learning.
- 2.Create a clearer mapping between platform features and learning science principles.
Action Taken
After this round, I clarified my design direction — to make learning and engagement deeply connected — and added the daily streak feature to the home page.
Second Round Testing
Overall, participants found the platform fun, engaging, and exciting to use, expressing genuine interest in exploring it further.
Key Suggestion
- •Add a comprehensive dashboard for progress overview.
Action Taken
After this round, I added the progress overview and math learning suggestions sections to the Home Dashboard.
Product Development
To test the platform's interactivity and learning experience, I built a quick prototype in one week using HTML, CSS, and JavaScript. After the course ended, I continued to refine each feature. However, as the number of features increased, I noticed that maintaining the codebase became challenging and the UI design lacked reusability. So, I decided to rebuild the entire platform using modern technologies — React, TypeScript, Tailwind CSS, and Next.js. This transition made the code structure cleaner, maintenance easier, and feature updates more scalable.
Core Features
Home Page (Dashboard)
- Displays daily streaks and motivational notes.
- Shows AI-generated progress reports and personalized insights.
- Keeps learners engaged and visually informed of progress.
- Includes gamified elements: unlockable skins, badges, and custom themes.
Daily Review
- Generates review tasks based on each student's mistake history.
- Applies spaced retrieval principles to strengthen long-term memory.
- Focuses only on incorrect questions to reduce unnecessary repetition.
- AI-powered reminders ensure timely and efficient review.
Daily Practice
- Map-based interface: each topic appears as a colorful house with dots representing subtopics.
- Short, step-by-step practice sessions built with Voiceflow.
- Students earn points to unlock new levels.
- Designed for 15–20 minute microlearning to build daily habits.
Math Stories
- Animated, narrative-driven explanations of math concepts.
- Sparks curiosity and supports conceptual understanding.
- Leverages visuals and storytelling to enhance context-based learning.
- Content drafted by LLMs and refined by the content team.
AI Assistant
- A prompt-engineered, math-focused AI assistant.
- Offers clear, step-by-step explanations to students' math questions.
- Functions like a patient, built-in tutor—no need to leave the platform.
My Collection
- Students can save favorite stories and posts.
- Write reflection notes to build metacognitive habits.
- Enables personalized review and recommendations.
- Reduces need to switch to external note-taking tools.
Community Plaza
- A moderated space for posting, commenting, discussing math, and making friends through math.
- Fosters a sense of belonging and encourages consistent engagement.
- Promotes peer-to-peer support and knowledge sharing.
System Architecture
Frontend-Backend Separation + Microservices Architecture
Frontend Applications
Backend Service
Data & External Services
Modern microservices architecture with clear separation of concerns, enabling scalable development, independent deployment of components, and efficient maintenance of the educational platform.
Technology Stack Details
Frontend Development
React
v18.2.0Component-based UI library for building interactive user interfaces
TypeScript
v5.4.5Strongly typed programming language that builds on JavaScript
Vite
v5.2.0Next generation frontend build tool for lightning fast development
Tailwind CSS
v3.4.3Utility-first CSS framework for rapid and responsive UI development
KaTeX
v0.16.22Fast and high-quality mathematical formula rendering library
Recharts
v2.12.7Composable and declarative charting library built on React components
Axios
v1.7.2Promise-based HTTP client for browser and Node.js
Backend Development
Node.js
v20.xJavaScript runtime built on Chrome V8 engine for scalable server applications
Express.js
v5.1.0Fast, minimalist web framework for building robust Node.js APIs
SQLite
v9.6.0Self-contained, serverless, zero-configuration SQL database engine
OpenAI API
v5.22.0AI-powered natural language processing for intelligent tutoring
JWT
v9.0.2JSON Web Tokens for secure authentication and authorization
bcryptjs
v3.0.2Password hashing library for secure user authentication
Development Tools & Deployment
Vercel
Frontend deployment platform with global CDN and automatic deployments
Render
Backend hosting platform for Node.js with auto-deploy from GitHub
Deployment Architecture
Vercel
Frontend Hosting
Auto-deploy from GitHub with global CDN distribution
Render
Backend Hosting
Scalable Node.js hosting with automatic deployment
SQLite
Database
Persistent file-based storage on Render server
CI/CD Deployment Pipeline
Local Dev
GitHub Push
Auto Deploy
Zero-downtime deployment with automatic builds and environment variable management
Project Documentation
Access comprehensive project documentation including technical specifications, product management resources, and design prototypes.