Mathbot
UX Designer | January 2025 - May 2025
Team
Solo Project
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.
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 Studies
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
user suggested that adding optional help tools would be useful during the game
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—deleting 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)
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 research 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 final product was educational, fun, and visually engaging. It has been a rewarding experience that reinforced my commitment to continuous improvement in design.