Mathbot
January 2025 - May 2025 | September 2025
For this project, I designed some concepts for an educational mobile game that helps kids learn math. With M.O.N.A the math robot, kids will learn how to do the basics of arithmetic through tutorials, challenges, and other math based games.
When I used to work as an after-school coding tutor, most of the students I was monitoring didn’t really want to do any coding and just wanted to play online games. I don't blame them for their behavior because I wouldn’t want to do coding after a long day at school either. However, seeing the amount of screen time they got and their willingness to play gave me an idea. I wanted to work on a design project for an educational math game for kids, which could keep them engaged in learning while also having fun.
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
-
Balancing Education and Entertainment: Simply adding game elements to educational content doesn't guarantee engagement. The learning must be integrated seamlessly into the gameplay.
-
Effectiveness: The game must accurately reflect and reinforce the intended educational outcomes.
-
Demonstrating Value: Overcoming skepticism about the effectiveness of game-based learning can be difficult.
User Personas
User Flows
Early Designs
Mathbot App Icon
Mascot (M.O.N.A)
In-Game Backgrounds
Mid-Fidelity Wireframes & Prototypes
High-Fidelity Prototypes
Game Introduction
Addition Minigame
Usability Studies
Overview
To find out what people thought about Mathbot, I created a Google Form and shared it publicly. I initially messaged my designer friend to be a participant, but I wanted to reach a wider range of people so I shared it on a Discord server called Design Buddies. Despite leaving the survey link for a couple days, I’ve gotten no participants. This part of my research was difficult, so I directly contacted 2 users on the server who were also looking for test participants. In exchange for doing my study, I did theirs and I got very insightful feedback from them. One of the participants told me about a useful website SurveySwap where I could find more participants and that’s how I got the other responses.
Parameters
-
Study Type: Moderated and Unmoderated Usability Study
-
Location: United States | Remote
-
Participants: 7 participants (2 Moderated and 5 Unmoderated)
-
Length: 10 - 15 minutes
Questions
The survey asked users about their thoughts on the user flows. I specifically wanted to know if they thought the game was fun and whether they understood certain design choices that were made.
First Prototype Results
-
6/7 users had a positive reaction to the introduction user flow as they found it straightforward, enjoyable, and clear
-
3/7 users thought the introduction section 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 the addition game was fun
-
1 user suggested that adding optional help tools would be useful during the game
Overall Findings
100% of users thought Mathbot has potential to be useful for educators and kids. They think it's fun but certain aspects of the game need to be changed in order to make the user flow feel more cohesive and clear.
Final Prototypes
Game Introduction Changes & Solutions
Delayed Prompt
A major change that I included was a delayed prompt. If the user doesn't tap the screen after 5 seconds, a prompt will appear reading "Tap to Continue" to show that the user can tap to proceed.
For this prototype, not much has been changed because of the initial positive reaction during my usability studies. I made minor fixes that included some alignment issues, wording, and design choices.
One piece of feedback that I considered from the usability study was reducing the amount of screens. I understand that the introduction might feel long and that users want to start jumping into the gameplay. However, I felt like the screens were necessary for the user to be more familiar with M.O.N.A and the world-building of the game. I only deleted 1 screen that seemed unnecessary.
Addition Minigame Changes & Solutions
Map Placement Bar
On the first screen of the prototype, there's a bar that shows different areas of the Mathlands,
-
Math City (Math Lessons / Games)
-
Mathnasium Stadium (Online Battle Mode)
-
Workshop (Customization / Settings)
In my early prototype, the icons on the bar didn't look like they represented those areas very well because most participants in the usability study were confused by them. I made updated 2 of the icons so they can represent their designated location better.
Before
After
Home Button
Since the Workshop was an area where the user could change their settings, it was pointless to have a settings button on the top-right of the screen. I thought about deleting the settings button but then it would look empty on the top-right. Therefore, I changed the settings button to a home button. If the user ever wants to go back to the Mathlands, they could do it by simply tapping the home button instead of tapping the back button multiple times.
Help During Gameplay
During gameplay, there will be a small swipe-up menu at the bottom. If the user swipes up on it, there will be a hint on how to approach and solve the problem. If the user is done looking at it, they would swipe down.
The hint menu is optional and it serves as a way to balance the game. If the user swipes up to look at the hint, they will lose time in the minigame because they are unable to input numbers. Knowing how to solve the problem without looking at hints rewards the user for their math skills by displaying better results at the end of the minigame.
Animations for the Monster
While solving math problems was part of the gameplay, it also seemed a bit bland when there's nothing else happening on screen. So I included animations for the monster to make gameplay more engaging.
The monster has animations when:
-
it appears on screen
-
the user solves a math problem (monster gets stunned)
-
the user finishes the minigame (monster is defeated and falls)
Reflection
Throughout this project, I enjoyed combining my graphic design and UX design skills. I expanded my knowledge of Figma as I explored new features that helped me innovate on the design process. I also delved into different user research methods, gaining meaningful, eye-opening feedback. Participants suggested features for Mathbot I hadn't considered, which challenged me to channel my creativity and truly innovate the designs. Their feedback was invaluable in making the game look both fun and educational.
Ultimately, seeing the culmination of every design concept I've learned was empowering. This project was a rewarding experience filled with valuable lessons.