Elevating Math Engagement With M.O.N.A
Mathbot • UX/UI Designer • Jan. 2025 - May 2025
Mobile App
EdTech
Gamification
For this project, I conceptualized an educational mobile game designed to make math intuitive and engaging for kids. With M.O.N.A the math robot, the platform guides students through arithmetic fundamentals using interactive tutorials and gamified challenges.
This project was inspired by my experience as an after-school coding tutor. I noticed that after a long school day, students naturally gravitated toward gaming rather than coursework. By leaning into their existing digital habits, I designed a solution that transforms screen time into a productive, high-engagement learning experience.
Team
Solo Project
My Role
UX/UI Design
UX Research
Tools
Figma
FigJam
Adobe Illustrator
Google Workspace
SurveySwap
User Research
Problem
How do we design a mobile game app that makes learning math engaging and exciting?
Difficult to balance entertainment and learning.
Children have short attention spans so it's important to maintain interest.
Goal
What do we accomplish through this project?
Create and foster a positive learning environment that facilitates their growth and cognitive skills.
Make gameplay engaging to make the learning experience more memorable and enjoyable.
Pain Points
Effectiveness
The game must accurately reflect and reinforce the intended educational outcomes.
Balancing Education
& Entertainment
Simply adding game elements to educational content doesn't guarantee engagement. The learning must be integrated seamlessly into the gameplay.
Demonstrating Value
Overcoming skepticism about the effectiveness of game-based learning can be difficult.
User Personas
User Flows
Early Designs
Mascot (M.O.N.A)
In-Game Backgrounds
Mid-fidelity Wireframes & Prototypes
Game Introduction
Upon launching the game, players are greeted by M.O.N.A., their personal robotic guide. Following a brief introduction, players are invited to express their creativity by customizing their own robot avatar, establishing a personal connection to the game world before the journey begins.
High-fidelity Prototypes
Game Introduction
Addition Minigame
Usability Study 1
Overview
To gather user feedback on Mathbot, I created a public survey via Google Forms. When initial outreach through professional networks and community channels like Design Buddies yielded low engagement, I pivoted my recruitment strategy. I adopted a peer-exchange model, collaborating directly with fellow researchers to swap feedback. This not only secured high-quality, insightful data but also led to the discovery of SurveySwap, which I utilized to successfully scale my participant pool and complete my research.
The survey was designed to evaluate the effectiveness of the game’s user flows. I aimed to gauge player engagement and determine if the instructional design choices were intuitive enough for players to navigate without friction.
First Prototype Results
6/7
users thought that the introduction was straightforward and enjoyable
3/7
users thought the introduction took too long before the actual game
7/7
users liked M.O.N.A as a mascot
Second Prototype Results
6/7
users thought that the addition game was fun
1/7
users noted that adding optional help tools would be useful during gameplay
Overall Findings
The concept received 100% positive validation, with all participants identifying Mathbot’s potential as a valuable tool for both educators and students. While they praised gameplay, the feedback highlighted opportunities to refine specific mechanics and addressed friction points that hindered the overall flow. These insights provided a clear roadmap for improving navigational clarity and instructional consistency.
Final Prototypes
Game Introduction Changes & Solutions
Given the strong positive reception during usability testing, the prototype for the game introduction remained largely intact. The final iteration focused on high-fidelity refinements, which included polishing the UI and microcopy.
While some participants suggested shortening the onboarding sequence, I chose to maintain the narrative pace to prioritize deep user immersion and brand familiarity with M.O.N.A. I addressed the feedback by optimizing the narrative flow. Specifically, I deleted unnecessary screens while retaining the essential world-building elements that help ground the educational experience. This resulted in a more streamlined introduction that still delivers the intended personality.
Delayed Prompt
To improve navigational clarity, I implemented a conditional interaction hint. If there's five seconds of inactivity, a "Tap to Continue" prompt appears. This serves as a visual cue, showing that younger players or first-time users understand how to progress through the narrative without cluttering the screen during active reading.
Addition Minigame Changes & Solutions
Map Placement Bar
On the first screen of the addition game prototype, there's a navigation bar that functions as a map of the Mathlands, with icons representing key game regions:
-
Math City (Lessons / Games)
-
Mathnasium Stadium (Battle Mode)
-
Workshop (Customization / Settings)
During usability testing, I identified that the initial iconography lacked semantic clarity, leading to user confusion regarding destination labels. I iterated on the visual language of the Mathnasium Stadium and Workshop icons to better reflect their designated locations, These updated visuals significantly improved the interface's discoverability and intuitive navigation.
Initial Concept
Iterated Design
Home Button
To streamline the interface, I addressed a redundancy between the Workshop and the global settings button. Since the Workshop already housed configuration options, the dedicated settings button was repurposed into a Home button shortcut. This change optimized the screen’s visual balance while significantly reducing interaction cost, allowing players to return to the Mathlands instantly rather than navigating backward through multiple screens.
Help During Gameplay
To balance challenge with accessibility, I implemented a retractable hint drawer at the bottom of the gameplay interface.
The menu is intentionally designed as a strategic trade-off. While the hint is active, input is disabled and the timer continues to run. This encourages players to internalize math concepts and rewards "expert" play, as those who rely on their own skills achieve faster completion times and better results.
Animations for the Monster
To elevate the gameplay experience beyond static problem-solving, I implemented animations for the monster. These visual cues serve as a feedback loop, providing players with a satisfying sense of impact. It makes the learning process feel more active as it transforms the mathematical exercise into an engaging, high-stakes battle.
The monster has animations when:
-
it enters on screen
-
the user solves a math problem correctly (monster gets stunned)
-
the user finishes the minigame (monster is defeated)
Usability Study 2
Overview
After making iterative refinements, I conducted a second usability study through SurveySwap again to evaluate Mathbot's product-market fit and business value. While Study 1 focused on functional clarity and UI consistency, Study 2 expanded into behavioral metrics. In Study 2, participants pointed out friction points, tracked completion times of tasks, and gave ratings on value perception and brand trust. By shifting from qualitative preference to measurable performance metrics, this study established concrete performance baselines for onboarding efficiency and future demand.
Usability Study Results
2:55
Average Task Duration of 1st Prototype
4:12
Average Task Duration of 2nd Prototype
3.5/5
Trustworthiness & Polish Score
3.9/5
Recommendation Likelihood Score
Overall Findings
The second usability study validated Mathbot's product viability through strong user sentiment, efficient onboarding times, and positive brand trust. Together, the user flows of the two prototypes demonstrate that Mathbot eliminates unnecessary onboarding drag and maintains a sustainable session length. This allows students to spend their screen time actively engaging with math while building strong advocacy for the concept.
Low-Friction Onboarding
The onboarding flow for M.O.N.A.'s introduction and avatar creation averaged 2 minutes and 55 seconds, demonstrating a low-friction entry barrier that allows children to transition smoothly into gameplay without cognitive fatigue.
Sustainable Session Length
The addition challenge navigation and gameplay averaged 4 minutes and 12 seconds, establishing a sustainable session length that maintains educational immersion without causing user burnout.
Strong Brand Trust & Advocacy
Visually, Mathbot earned a trustworthiness score of 3.5 out of 5, with participants praising its animations and interactive elements. While some feedback pointed to a desire for greater complexity and more advanced content, the app achieved an overall recommendation likelihood of 3.9 out of 5, This indicates a strong user sentiment and broad advocacy for the concept.
Mitigation & Growth
Risk Mitigation
While the usability study validated overall interest, participants inevitably encountered friction points where static prototype paths lacked deeper interactivity or fell short of their expectations. If these dead-ends or unresponsive states gone undetected until development, they would have triggered mid-sprint code refactors, retesting, and a delayed release. Catching and resolving these issues during the design phase would save an estimated 20 to 30 hours of engineering and QA rework, translating to roughly $2,500 to $4,000 in saved development costs while preventing a frustrating user experience that could've harmed early retention.
Scaling & Monetization
Additional App Features
The second usability study left participants wanting more from the app. Introducing other challenges involving arithmetic operations, alongside elevated UI polish, will give Mathbot a distinct brand identity. These additions create high emotional resonance with users. By directly addressing the content demand highlighted in user testing, Mathbot can transform casual players into long-term users. This engagement loop naturally generates organic referrals, reducing paid marketing overhead and establishing stronger market credibility.
Cross-Platform Usage
While initial wireframes were optimized for mobile viewports to target on-the-go usage, scaling Mathbot requires full compatibility across personal devices and classroom hardware. To address this, Mathbot requires a responsive user interface designed to scale seamlessly from smartphones to standard tablets. This ensures students experience the exact same engaging interface whether practicing math independently at home or during designated tech periods in the classroom. Additionally, incorporating offline support or cloud progress syncing ensures that students can transition smoothly between devices without losing their game progress or learning streaks.
School Implmentation
To fully support these classroom tech periods, schools can easily integrate Mathbot as a supplemental classroom tool. The student experience remains engaging and accessible, while teachers gain access to a specialized Educator Dashboard to assign homework, track classroom mastery of math standards, and view automated grading analytics.
To capture this B2B market, the platform can introduce two pricing tiers:
-
Classroom Tier: $99 per year per teacher, which includes up to 30 student accounts and a full teacher dashboard.
-
School Wide Tier: $2,500 per year per school, offering unlimited teachers, student accounts, and administrator analytics reporting.
This subscription model creates a predictable, recurring revenue stream while opening direct distribution channels into school districts.
Reflection
This project served as a powerful synthesis of my graphic design and UX/UI expertise. I used this opportunity to deepen my Figma proficiency by optimizing my design workflow and pushing the boundaries of my digital craft. The user testing phase was particularly transformative as engaging with participants through diverse methodologies provided critical insights that challenged my initial assumptions. This iterative process pushed me to innovate beyond my original scope, ensuring the product was educational, fun, and visually engaging. It has been a rewarding experience that reinforced my commitment to continuous improvement in design.